Overview
During my UX Design Diploma at BrainStation, I participated in a 24-hour hackathon hosted by The LEGO Group. My role as the sole UX Designer involved leading the problem solving and design efforts for a team tasked with enhancing the online gift-finding experience for adults selecting gifts for children.
Key Moments
• With only 24 hours, I had to quickly conduct research, design, and wireframe our solution. The challenge was to ensure the software engineer could start coding in time for our final presentation.
• Our team collaborated closely, revealing how much we can achieve in such a short time through effective and focused collaboration. I led the design discussions, ensuring our approach aligned with user needs.
Duration
24 hours
Role
UX Designer
Client
The LEGO Group
Tools
Figma
Team
1 UX Designer
1 Software Engineer
2 Data Scientists
Finding the Right Birthday Gift
Finding the right gift for a child is a struggle for adults due to rapidly changing preferences of children and endless options for toys and products. People need to consider a number of factors and there are high expectations placed upon them for special occasions.
Less Clutter and More Focus
After auditing the current LEGO website and gift finding flow, our solution was to make the design less cluttered and add more recommendations to make the user’s life simple. Additionally, we brought more attention to the gift finder feature and made it more functional by designing a filter.
The LEGO Group redesigned their LEGO Gift Ideas page and made most of the changes we suggested they make!
When selecting a gift for a child, adults often struggle finding the right choice to please young ones. This is due to the rapidly changing preferences of children and the endless options for toys and products available on the market.
Making a choice requires considering factors such as the child’s age, interests, and developmental stage. Additionally, adults need to find the balance between educational value and entertainment, ensuring the gift is both enjoyable and beneficial for the child’s growth. Lastly, occasions such as birthdays and Christmas create high-pressure situations where the expectations for finding the perfect gift are elevated.
The Design Question
Design Process
With only 24 hours to design, wireframe, prototype, code and present the solution, I ensured I understood and researched the problems before ideating and creating a prototype that solves the problem effectively.
EMPATHISE
Conducted a quick audit of the current LEGO website and the gift-finding flow.
DEFINE
Used secondary research to create a proto persona, helping us empathise with our target user.
IDEATE
Employed the ‘Crazy 8’ method to generate and refine concepts quickly.
PROTOTYPE
Developed wireframes and prototypes and collaborated with the software engineer to enable coding on-the-fly.
PRESENT
Included our design testing as part of our presentation to the audience and judges from The LEGO Group.
Clutter
Clutter in an eCommerce website's UI and UX design can significantly impact customer behaviour, leading to decreased conversions and sales.
Choice Overload
According to a recent research from Episerver, 46% of customers have failed to complete a purchase online due to overwhelming choices.
I analysed market trends and found that the LEGO website saw peak popularity in December, indicating its strong role as a go-to destination for gifts. However, to further boost sales related to gifting, it’s essential to place greater emphasis on this aspect throughout the year.
I created a proto persona for our design sprint because we didn't have the time to conduct user interviews but still needed to ensure our design solution was user-centred. The proto persona allowed us to quickly build empathy with our target audience and understand their key needs and pain points. This approach helped us align our team around a shared vision of the user, ensuring that our design decisions were focused and relevant. By using the proto persona, we could effectively prioritise features and create a solution that truly addressed the user's challenges.
I conducted an audit of the current experience and presented my findings to the panel. To help our primary user find the right gift, we first needed to identify the issues she faced on the current LEGO website.
My first discovery was that the 'Gift Ideas' page was difficult to locate; users had to navigate through the 'Discover' menu and click on 'LEGO Gift Ideas' at the bottom of the overlay.
Additionally, during our initial browsing, we missed the 'Gift Finder' tool, which was buried under the 'Shop' tab.
The 'Gift Ideas' page itself was cluttered and featured two confusing CTAs—'Explore' and 'Shop Now'—which seemed redundant. Moreover, the useful 'Gift Finder' tool was hidden within the page, making it hard for users to know such a handy tool existed.
The overall design was overwhelming, with information that wasn’t easy to digest. Users had to scroll past a lot of unnecessary clutter, making it challenging to focus on what was truly helpful for their gift-finding journey.
There are helpful categories that can aid the user with finding the right gift but they had to scroll to find it and it could also be designed for the user to absorb this information more easily.
After clicking the 'Try It Now' CTA for the gift finder, users were prompted to answer three questions about the gift recipient's age, interests, and budget. However, a major issue was that the resulting options were overwhelming, and there was no way to filter these search results, leaving the user frustrated and uncertain.
I designed solutions to address each UX problem identified during the audit and reviewed these with the team before moving on to wire-framing and prototyping the solution for development.
To help our primary user find a gift quickly , I proposed adding a new section to the navigation bar called 'Gifts'. This would open an overlay with options to view what's new and trending, as well as direct access to the 'Gift Ideas' page. I also added Gift Finder to the new Gifts navigation overlay.
I redesigned the 'Gift Ideas' page to feature a prominent 'Gift Finder' CTA at the top. The overall design was simplified, making it easier for users to find gifts without feeling overwhelmed.
Clicking on the Gift Finder CTA takes the user through the existing gift finder flow, where they need to answer questions about the age, interests, and budget for the intended gift.
I redesigned the results page for the gift finder to feature three top picks, with the option for the user to scroll for more results if they wish. I also added a search bar and filter button, allowing users to easily refine their results further and find the perfect gift.
I designed the filter to appear as an overlay, incorporating more relevant filters to better assist the user in narrowing down their options.
For the top recommendations, I collaborated with the data scientists to analyse the raw data provided by The LEGO Group, identifying the top-rated and best-selling products. I featured these in the 'Gift Guide' section to help our users quickly find the best products on the site, especially if they prefer not to use the gift finder.
As we only had only 24 hours to complete our project, a key challenge was that the engineer couldn't begin coding until I had designed the necessary elements. We started by discussing our ideas and agreeing on what we wanted to achieve. I asked the engineer which parts of the design would be hardest to code in the time we had. This helped me know what to focus on first.
I quickly designed the initial elements and shared them with the engineer via Figma. This allowed her to start coding while I continued working on the rest of the design. With a tight deadline, I had to prioritise getting the design done over perfecting every detail. This was crucial so that the engineer had enough time to code everything and we’d have a complete product to present.
Through my approach to the solution, I added the following features to improve the UX and help the user find the right gift:
Gift finder - through design I brought more attention to the Gift Finder tool which was more of a hidden gem before
Filter - the lack of filter after getting the results from the gift finder tool was a major usability issue that I fixed
Top recommendations - I added top recommendations to reduce the choice overload users are faced with when buying products
User friendly layout - I reduced the clutter in the design to reduce the cognitive overload for the user and make it easier to call out key and relevant information
Educational benefit - I added an education benefit category to the filter and suggested that products should have this tag for new-age parents who want more products that are both fun and educational
Post-hackathon, LEGO introduced a new 'New' tab in their navigation bar. While it isn’t specifically for gifts, it aligns with our idea of making trending products easily accessible, showing that LEGO recognised the need for users to find popular items quickly when purchasing gifts.
LEGO implemented many of our recommendations, such as adding 'Gift Finder' to the navigation under 'Shop' and redesigning the 'Gift Ideas' page to be more sleek and user-friendly. These changes have made it easier for users to locate and use the 'Gift Finder' tool, improving their overall experience on the site.
LEGO adopted similar ideas, introducing a 'New' page that features trending products and top picks. They also added a 'Shop by Occasion' section and streamlined their categories, making the gift selection process more intuitive and less overwhelming for users.
We were the only team to present a holistic audit of the current gift-buying experience, while other teams focused solely on improving the 'Gift Finder' tool. Our approach considered the entire user journey, ensuring that users could easily find and use tools without being overwhelmed. The changes LEGO made after the hackathon closely align with our suggestions, indicating that our solutions effectively addressed the users' needs.