The Challenge
After a few months of continued development, the Consoul founder, Cindy, and development team encountered a problem. They had fleshed out the Resources and Services sections of their app, and realized that the ever-growing number of articles and products had become difficult for users to wade through. They reached out to me to help them create an easy-to-use categorization feature that could sort into simple categories but later be expanded to include more complex filtering.
My Role
• Sole Designer
• Research analysis and synthesis
• Create user journeys
• Sketches, wireframes, hi-fi prototypes
• Adapt desktop and mobile
The Challenge
After a few months of continued development, the Consoul founder, Cindy, and development team encountered a problem. They had fleshed out the Resources and Services sections of their app, and realized that the ever-growing number of articles and products had become difficult for users to wade through. They reached out to me to help them create an easy-to-use categorization feature that could sort into simple categories but later be expanded to include more complex filtering.
My Role
• Sole Designer
• Research analysis and synthesis
• Create user journeys
• Sketches, wireframes, hi-fi prototypes
• Adapt desktop and mobile
Synthesis and Sketches
Synthesis and Sketches
I started by spending some time doing research on how other apps organize their content. This led to two potential formats: one with ovals that would allow users to stay on the initial page, and the other with category links that would take users to a second page. I created sketches of a each option for the mobile Resources page to give Cindy an idea of what they would look like.
After walking Cindy and the development team through the options, they requested that I draft designs of both so they could get a better idea of what users would experience. I used the persona from MVP to inform the layout and focus of the sketches.
I started by spending some time doing research on how other apps organize their content. This led to two potential formats: one with ovals that would allow users to stay on the initial page, and the other with category links that would take users to a second page. I created sketches of a each option for the mobile Resources page to give Cindy an idea of what they would look like.
After walking Cindy and the development team through the options, they requested that I draft designs of both so they could get a better idea of what users would experience. I used the persona from MVP to inform the layout and focus of the sketches.
Wireframes and Testing
Wireframes and Testing
I used the design system my previous team and I had created during our initial project. The system already included formatting, layout, fonts, etc., so I put the wireframes together quickly. I then conducted AB user testing to determine which layout users preferred — selectable category ovals, or image boxes with icons. The result was a clear preference for ovals.
I met with Cindy to walk her through both feature layouts. We discussed the research and how how each would affect the user experience and fit with their current app layout. Ultimately she agreed the responsive ovals that would allow users to remain on the same page and navigate more easily.
I used the design system my previous team and I had created during our initial project. The system already included formatting, layout, fonts, etc., so I put the wireframes together quickly. I then conducted AB user testing to determine which layout users preferred — selectable category ovals, or image boxes with icons. The result was a clear preference for ovals.
I met with Cindy to walk her through both feature layouts. We discussed the research and how how each would affect the user experience and fit with their current app layout. Ultimately she agreed the responsive ovals that would allow users to remain on the same page and navigate more easily.
Final Mockups and Discussion
Final Mockups and Discussion
Now that we had decided upon a design, I could apply the brand colors from our design system. The ovals design can easily be modified to allow users to select multiple filters at once. This project was completed within the three-week timeline, and will now be incorporated into Consoul’s design before their upcoming launch.
Now that we had decided upon a design, I could apply the brand colors from our design system. The ovals design can easily be modified to allow users to select multiple filters at once. This project was completed within the three-week timeline, and will now be incorporated into Consoul’s design before their upcoming launch.