Role:
UX/UI Designer
Year:
2024
Platform:
Mobile & Desktop
Adding a New Feature
After a few months of continued development, the founders and developers of Consoul discovered an issue. 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.
As UX/UI designer, I conducted industry research, created sketches, and worked with Consoul CEO Cindy to develop wireframes and prototypes for both mobile and desktop. The timeline for this project was three weeks, with a new deliverable and meeting each week.
First Steps 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 create wireframes of both so they could get a better idea of what users would experience.
Wireframes
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.
Desktop Resources with Oval Filters
Desktop Resources with Graphic Links
A category page with the option for further filtering
A category page without the option for further filtering
Mobile Services with Responsive Ovals
Mobile Services Category Page with the option for further filtering
Mobile Services with Graphic Links
Mobile Services category page with the otp
Mobile Resources with Responsive Ovals
Mobile Resources with Graphic Links
Mobile Resources without the option for further filtering
Mobile Resources Categorization Page with option for further filtering
The Final Decision
I met with Cindy to walk her through both feature layouts. We discussed how each would affect the user experience and fit with their current app layout. Ultimately she chose the responsive ovals that would allow users to remain on the same page and navigate more easily.
Hi-Fi and Prototypes
Now that we had decided upon a design, I could apply the brand colors from our design system. The final prototype can be accessed here. This project was completed within the three-week timeline, and will now be incorporated into Consoul’s design before their upcoming launch.
