Crafting a frictionless homepage
Project completed while working as a product designer at Ideally.
Helping Ideally users land, find, and act. The homepage redesign focused on clarity, simplicity, and supporting momentum, not interrupting it.
Users who had run many tests struggled to organise and sift through past projects. The homepage didn’t support search, filtering, or a scalable way to manage many tests which was proving to be an issue as we onboarded larger enterprises that were launching several tests a day.
Some specific challenges:
• No way to search by name, concept, or person.
• No filtering or sorting (by date, status, or test type).
• Teams like Asahi needed to group tests by purpose (e.g. message tests, launch tests).
• High-volume customers like Goodman Fielder had over 100 tests, creating major usability issues.
- Designed and prototyped the new homepage experience based of insights from discovery.
- Worked closely with product and engineers throughout the process to ensure UX and craft was executed to a standard.
- Updated components and tokens in the shared design system in Figma.
-
High-friction for users with 30+ tests.
-
No ability to search or sort tests.
-
Repeated requests for test grouping / folders.
-
Confusion over test statuses and next steps.
- A need for better onboarding and dynamic guidance on the landing page.
- More wow factor needed for sales. This is the first place people land when first using the product.
We didn’t need to reinvent the wheel. There were existing design patterns we could Ideally-fy.
Based on the challenges in the current designs, I began to mockup some ideas for the direction we could take the new homepage.
Some key ideas:
- Global search.
- Cover image / preview of imagery in test.
- Image view with option to switch to list view.
- An automated tagging system that users could manage.
- Filter by column.
- Colour coding types.
- Display filter vs framework type.
- Archiving tests.
- ‘Create by’ avatar to minimise text on list.
The challenge: How do we include more in the list without the page becoming overbearing?
We were able to get some concepts in front of a few of our beta testing group customers, to get a general steer around what features excited them.
Key insights:
- Search was a must-have, and people were excited about the idea. They asked whether it would let them find anything related to a test for example, if they searched the name of a single concept, would the full test appear?
- Viewing the stim was a good add, however it pushes the list down the page / takes up too much space.
- Desire to see the credit cost of each test in this list.
- Last edited by was a big win.
- They would use the framework filter often.
Taking these insights, we were able to continue iterating on the options we were exploring.
Playing around with different list styles and filtering options
To keep the list easy to scan, we took inspiration from Slack and Google, particularly in how they approach hover states and previews. This allowed us to neatly fit in stimulus, framework details, follower info, and key actions directly within an overlay on hover instead of including that info in the list.
Google drive example Ideally design
Atomic design system for the homepage changes
- Updated the design system and pushed tokens via Token Studio.
- Used Figma Dev Mode and annotations for clear specs.
- Worked alongside front-end developer to implement this and finesse the craft + animation.
- QA’d post-build and raised tidy-up tickets to fix styling inconsistencies.
Final framework hover states Hovering over the list Searching for a test
- Introduced a global search across all past tests, not just by name, but also by type, stimulus, market, creator, and more.
- Gave users multiple filtering options: quick tabs for speed and deeper filtering for more complex needs.
- Avoided the need for folders by introducing smarter filtering, saving internal teams significant dev and maintenance effort. This was a desire from Ideally’s head of design.
- Improved visual cues through clearer status tags, with added filters for drafts and date ranges.
- Bringing in stimulus preview that users can quickly access on hover.
- Enhanced brand experience in framework selector and personalised messaging i.e Good morning, Liv.
This was a really fun project from start to finish. We were able to bring a level of craft and care that often gets lost in more data-heavy areas of the product. While the final animations and polish differed slightly from what I had envisioned, it highlighted the need for clearer styling guidelines up front - something I’d prioritise next time to save time in development. We tackled key pain points from the legacy design and introduced features that position Ideally to scale with larger teams and enterprises. The design will continue to evolve, but the foundations are now in place for those changes to shine.