Reimagining App Information Architecture
Completed in Fall 2020, 3 weeks
Context
After two years of building the app Meal Hero, our team had reached a critical point in development. In order to continue in an efficient and reasonable manner, it was necessary for our engineers to switch from Ionic to React Native.
As a product team, this gave us some time and space to evaluate how our current information architecture (IA) was serving us and to identify new opportunities for improvement.
Please note, we refer to our users as Home Chefs.
My Role
Project Lead, Facilitator, and Design Lead
Project Team
Product Designers: Linda Hsu, Steph Liang, Julie Wang
Product Managers: Chris Boorman, David Ip
Challenge
Align our product and design team on a future information architecture for our app, Meal Hero.
Process
At Meal Hero, we start every project by filling out a Discovery Kickoff Document with all members of the team. This helps us align all members of the team for the very beginning and set expectations accordingly. Below is an abbreviated version of the document we came up with together.
Discovery Kickoff
Purpose
- Investigate and define new IA for Meal Hero
- Identify opportunities and challenges of the current IA
- To create a more cohesive user experience and navigation of the app
Outcome
- As a home chef, I can easily navigate the Meal Hero app.
- As a home chef, I’m guided to core stations in the app and able to complete core/desired actions.
Milestones
- Discovery Kickoff
- Competitive Analysis
- MH native app analysis
- Micro-moments — Revisit opportunities in user journey for MH app to bring value
- Identify core/desired actions in-app (consider user & business needs)
- Define hierarchy — primary, secondary, tertiary actions for tabs
- Ideation on structure (high level) — sitemap
- Share and consult with the leadership team
- PMs and Designers to consult with tech leads in their pods
- Project team to debrief and determine next steps
- Discovery work in pods to validate new IA
Competitive Analysis
Why competitive analysis?
- Inform the design process and help solve usability problems
- Identify the strengths and weaknesses of competing products
- Understand where our app stands in the market
- Gather evidence for making product changes
We chose these competitors because they have similar content and we were interested to explore more deeply the relationships between how they structured and organized that content.
Each member of the project team was assigned a competitor and completed a competitive analysis + site map of the app.
As a project team, we came back together to share the insights, structure, guidance, and navigation of these apps.
As the lead, I synthesized the insights we came up with and proposed recommendations based on our analysis.
Meal Hero Information Architecture Analysis
Next we completed an analysis of our own information architecture. Each designer did an analysis and site map of the part of the app they owned and were encouraged to bring any additional insights as well. We debriefed as a project team on our learnings.
As lead, I synthesized the analysis into 6 major insights we used to inform our later work.
Identifying Micro-Moments
As 3 of our 6 project team members were new to the Meal Hero team, I thought it was important to pause and allow all of us to revisit our users core needs. This would ensure our users were front and center in our hierarchy conversations.
As a design team, we had previously completed a large primary research study in which we had many many insights. We revisited those insights.
We used google’s micro-moments framework to give this activity structure.
What are micro-moments?
Key moments in every consumer’s life when they decide to pick up their mobile device for a specific purpose.
Google’s four micro-moments:
- “I want to know”- What I want to learn
- “I want to go”- Location, our digital lives are connected to the physical world
- “I want to do” — ‘How to’ moments when people want help or to learn something new
- “I want to shop” — User has a clear intention to buy, be there with the right information to help them make their decision
For this activity, we individually reread the notes from research and pulled out the micro-moments and put them on stickies. Then we came back together to discuss and categorize them.
Synthesized micro-moments
I want to know…
- what to make for dinner
- that I’m eating healthy food
- what I can cook now with what I have
I want to go…
- grocery shopping efficiently
- grocery shopping nearby
I want to do…
- have a plan for my meals
- involve the family in cooking
- how to save time and energy while cooking
I want to shop…
- within my budget and have quality ingredients
- for my “usuals” and for ingredients that are required to make what I have planned
- for ingredients that will inspire me to make something new
Now that the team had a clear picture of our competitors, where our own app was currently, and our users’ needs were front and center it was time to start driving alignment on the future.
Identify Core Actions
For this activity, we gathered as a group and started to identify the hubs of activity or primary pages of our app. Then we went through each screen and documented all of the current actions a user could take (no matter how small!). Since we had already built sitemaps in our analysis of Meal Hero this was really just a deconstruction of the sitemaps we had created individually. It also served to align the team on what currently existed in the app and make sure we hadn’t missed anything. We grouped actions together that were similar but at this stage there was limited hierarchy.
Next was the fun part! We knew we wanted this new information architecture to serve us beyond the next few months. So I facilitated a brainstorm. We took the top level pages we had identified above and brainstormed any future actions we may want to enable for our users. At this stage nothing was off the table.
However at the end of our brainstorm, I quickly realized we had A LOT of ideas. It would be unreasonable to try to put this many untested and unknown ideas into our current architecture.
So I created 3 categories:
- Must include in IA — This consisted of ideas that had already been validated from research or we knew we needed to include for business needs.
- Confidence based on qualitative or quantitative data — This consisted of ideas based on needs that we had heard about in research so we felt confident in them but they still needed more research.
- Needs discovery work — These ideas had little to no data validation and needed a lot of research.
By categorizing our ideas from the brainstorm into these three categories, we were able to identify 20 ideas that we could use to stress test our new IA to make sure it would continue to work well into the future.
Navigation Ideation
We started our navigation ideation session by agreeing on a few guidelines.
- Use the top level pages we had identified in ‘Identify Core Actions’ session
- Focus on primary tabs and secondary pages
- The sky’s the limit, meaning the new navigation does not need to resemble our current navigation
In Miro, we individually brainstormed what the future app navigation could be using sticky notes. Then we came together as a group to share and make our case. This was no small feat and we didn’t land on a quick answer right away. Rather it took some time to let everyone think on it, pull data from our current app users and from our research in order for the answer to emerge.
Here are some data points we discussed that helped inform our navigation decisions:
In the end, we decided to reimagine the browsing experience in the app. Instead of a large number of categories with many recipes that put all of the effort on our users, we would work with our data science team to create a ‘Home’ experience which would include personalized recipes, and prompts to gather more data and preferences.
We also decided to remove ‘My recipes’ as a primary tab because we didn’t want our users to be spending a significant amount of time browsing through those recipes. We thought we could show a category of users’ recipes on the new ‘Home’ page and then surface users saved recipes when they searched or clicked on similar recipes.
At this stage, we had our primary tabs, secondary pages, and desired actions for these pages (from the earlier activity) but how all of these pieces fit together was still unknown.
Sitemap Creation
For this activity, I broke up the group of six into two small groups to tackle the two biggest primary tabs — ‘Home’ and ‘Shopping List’. This gave us other people to bounce ideas off of and for time’s sake would move things along . Then we came back together to share, review, make edits, and finish the last primary tab ‘Meal Plan’ together.
While that sounds easy, this process was harder than I originally thought. What we quickly found out is that moving colored boxes around in Miro to show structure and hierarchy does not always make it easy to understand what it will look like and what the experience for our users will be. At this stage, we found it helpful to do a few rough sketches to show how different actions *might* work together or to show how users would navigate deeper into an experience.
By doing this it was easier to get folks on the same page and aligned around a common sitemap with many acknowledgements that everything we were discussing would need research and testing.
To view the new information architecture up close, click here.
How did this sitemap inform future work?
Below are two examples of how we used this work and sitemap in the months after to work towards a future vision together.
Secondary Page Navigation
In the new sitemap we had many more secondary pages. The icons in the top right were the solution we ended up on. Under the person icon, we added ‘My recipes’ which was previously a primary tab. In addition, this style was applied to all of the primary tabs across the app, creating a cohesive experience.
Home Widgets
During our competitive analysis, we identified that some of our competitor’s used the term ‘Home’. Later in the process, we found ‘Home’ to be a good term to use to indicate the place where our users would first experience the app, and a place we could use to help guide our users to different experiences.
As part of the ‘Home’ product development process, we developed different widgets that would gather more preferences from our users, allowing us to learn more about their intentions and needs. Below is one of the experiments we ran. We hoped to learn what our users’ goal was in their first time entering the app, as well as to guide them to that goal.
Key Learnings
- Large project team = larger effort to facilitate and align the project team. It was a lot of work to get our entire product and design team in the same room for all of these activities. Also because of the nature of this work and the way each activity built on the other it was important to align before moving on, this also took a lot of effort. If I was to do this again, I would choose a smaller team of three and then get buy-in at the end once we had a flushed out rationale.
- Take a step back, to take a step forward. When a group can’t come to consensus sometimes the best thing to do is take a step away, and sleep on it. We did this after ideating on primary tabs for navigation. The next time we came to the table we had all had time to think about it and bring research and data into the conversation. That time around the discussion was fruitful and we were able to make a decision easily.
- Make sure leadership is on board, really on board. Months later as the design team was doing discovery work to test and validate the sitemap, it became clear that key members of our leadership team did not understand how this IA work would inform future work. At the time of sharing this work with them, I chose not to share screen visuals because nothing had been researched and tested. However, looking back I see now that it would have been helpful to provide a visual or even a rough sketch so that they could imagine where we were going beyond colored boxes connected with lines in Miro.
