GrubHub: Information ARchitecture
Overview:
Establishing the information architecture and navigation design for GrubHub (a new recipe website), our team conducted a content audit followed by open and closed card sorting exercises with users. Design recommendations and interactive prototypes were developed.
The Ask:
Design a responsive website and mobile application catered to user profiles focusing on the information architecture, features, and branding.
Duration: 2 Weeks
Team: Yash Goud, Kevin H & Celine Wong
Role: UX Researcher & Designer
Tools: Figma, Excel, Post-its
P R O C E S S
C O N T E N T a u d i t
From a content inventory of 150 items , we voted on 50 items that were most representative.
Avoiding bias: instead of selecting specific items that only coincide with a particular category, cards that fit under several potential categories were included. For example, recipe items could be classified under specific cuisines, ingredients, or dietary categories.
1 open card sort followed by 1 closed card sort was completed by the team to:
See how our team would organize the data initially.
Compare team results with external participant sorts.
Establish potential patterns and information hierarchy.
U S E R R E S E A R C H
Personas
GrubHub provided a list of target demographics, psychographics, techno-graphics, and brand relationships.
I compiled the information and generated 3 user profiles to inform design.
CARD SORTING
Open card sorts were conducted with 8 participants that fit GrubHub’s target audiences.
Participants were given 30 minutes, and asked to group & categorize 50 cards while verbalizing their thought process.
“As a grill master I want a recipe playbook for the BBQ.”
“Oh what about a festive or holiday section! How fun."
“Making food can take forever, so cooking times would be great.”
Comparative Analysis: I used similarity matrices, and noted the broad ranges of participants’ categorization and rationale.
S I T E M A P & I A
Version 1. Organizing content according to card sorting results, we re-tested with all participants to inform navigation design.
Feedback included:
• “What is ‘Techniques’ ? That’s a little vague.”
• “I’m used to having profile access at the top of my pages.”
• “Wow, that’s a lot of categories.”
Version 2. Considerations when revising the final sitemap:
• Vague labels create confusion
• Navigational familiarity is important for user experiences.
• Visual clutter will overwhelm users, how might we present information that does not sacrifice efficiency?
W I R E F R A M E S
M O C K U P s
STYLEGUIDE
Features
I re-visited the target audiences, and remembered that social platforms were commonly used. Therefore, incorporating a community aspect called ‘The Hub’ would encourage users to share, post, and feel connected.
Another feature added was the shopping list. Users may have limited produce, spices, or other items on hand when browsing through menus. Liking recipes and adding items to their shopping list automatically generates a checklist - helping users’ during their next grocery run.
Additional Interactive Features:
Drop down category menu to reduce visual clutter, but still permits fast navigation.
In the mobile app, ‘+’ icon expands to provide quick actions for users within thumb range.
Recipes have video tutorials that users can follow or watch prior.
Desktop
Mobile
R E F L E C T I O N S
• Challenges/ Limitations: not having enough participants, not including enough items for card sorts, and the seemingly endless possibilities of sorting through abundant amounts of information. We can only base our recommendations on how our testing group organized items.
• The potential of testing multiple times with each user to sort for desktop AND for the mobile app. Would the organization and categorization be different?
• Other challenges I faced was trying not to create too much visual clutter for customers by providing excess navigational pathways. I wanted to avoid ‘paralysis by analysis’ in which many users experience when visiting sites like Netflix, which consists of large content amounts.
• Designing responsive sites are critical with more and more devices coming to the market. It was great to identify the advantages and limitations of devices based on interactions, space, aesthetic, and usability.