Updated a month ago
I was given a task to redesign a responsive mobile application for RecipeRUs, a start-up focused on delivering easy and accessible recipes to their users. CHALLENGE The existing application contains a vast amount of information about different recipes and the number of recipes themselves. The categorization and prioritization of the existing information was the main challenge in the redesigning process. USERS Our primary users were those who have busy lifestyles and cannot spend a ton of time on cooking. Because of this, we wanted to make a very easy-to-use and straight-to-the-point product that would encourage cooking meals at home. METHODOLOGY I’ve started a process with card sorting to organize topics into categories that make sense. I’ve conducted 3 sessions of card sorting to get the most accurate categories. Then I was able to build an IA diagram that reflected all the levels of a navigation structure. After that, I proceeded to create the feature list and work on the interactive navigation design. Finally, everything was set to start on wireframing and then prototyping. Card Sorting INITIAL CARD SORTING First I’ve completed the initial card sorting. Then I recruited two users to make the same card sorting for me. I chose enough cards for a card sorting session (approx. 60) to represent all the possible categories. CARD SORTING ANALYSIS Then, I analyzed the results of 3 card sorting sessions, paying most attention to recurring patterns and difficulties the recruited users had during the task. Then I revisited the results from the initial card sorting and revised all the first-level categories that I initially came up with. FINAL CARD SORTING Then I’ve merged some of the categories based on the relevance they had into a wider category, which included the subcategories and pages. I ended up with a final card sorting version that will provide a robust foundation for the structure of the mobile application. Information Architecture IA DIAGRAM Based on the card sorting results I was able to build an IA diagram that showed 4 levels of our navigation structure. I wanted to focus on creating intuitive categories at the higher level, resulting in categories, such as “Preparation method”, “Ingredients”, “National cuisine”, “Beverages”, “About us”, and “My account”. Because of the vast amount of information about different recipes and the number of recipes themselves, this seemed like the best way to categorize at a higher level, while going into more specifics at lower levels. Eventually, I was able to develop a refined system of hierarchical organization that covered all the categories and addressed project needs. FEATURE LIST After creating the diagram, I proceeded to create the feature list and work on the interactive navigation design. RecipeRUs Feature list: Add recipes, including photos Rate and like recipes Save favourite recipes, creating the lists and labels Share recipes on social media Create wish lists Search for recipes in any possible way: keywords, ingredients, meal, type of cuisine, preparation method. Subscribe to our blog Filter the recipes by the time of the meal, low-carb, diabetic, vegetarian, gluten-free. Edit a profile, including photos. Wireframes Based on the navigation structure I came up with and considering the previously developed IA, I started the wireframing process. I tried to keep the main user tasks easily available. I included the most popular categories on a landing page. Each main category (level 1) opens a submenu (level 2) with its sub-categories if available (level 3) or pages (level 4). By tapping “EXPLORE” or search bar (available from all screens), the different recipe categories are available. I included the filters page so the user can narrow down his search. Filters are available from any category. I packed the rest of the pages like About us, Contact and Blog within the hamburger menu. I’ve included the filters page so the user can narrow down his search. Filters are available from any category. I packed the rest of the pages like About us, Contact and Blog within the hamburger menu. Prototype Takeaways Focus on structure rather than hierarchy. The homepage will always be the homepage, but where it leads, how users get to those places, and everything in between and beyond is determined later. Previous research (card sorting) is precious, as it secures a basis for building an intuitive navigation system. Products evolve, designs change, users adapt, and the cycle continues, over and over. Every navigation design should be revisited after a while.