Information Architecture
Redesign
of
bon appétit's website
Bon Appétit is a leading online and print magazine for cooking, food, and culinary trends. The brand is recognized for its dynamic visuals and rigorously tested recipes. Bon Appétit’s website is made up of a large and growing library of company-generated content.
information architect
UX researcher
UX designer
Google Sheets, UXArmy, OptimalSort, Treejack, Figma
four information architects
As Bon Appétit’s website grows, the business and user needs change. Over time, the site’s structure looses its effectiveness for users to intuitively navigate or make sense of it, and making it a challenge for Bon Appétit to grow their sales and their subscribers.
Our design matches current user and business needs by creating information architecture for the site that aligns identified user tasks with the high-priority business goals.
We started with basic research to learn more about Bon Appétit’s site, users, and business.
We listed 25 common tasks users might perform on the site. Based on our research and common user tasks, we created primary and secondary personas to represent people who explore cooking for themselves and those who prefer to cook for others.
Next we identified Bon Appétit’s mission from their U.S. Media Kit and business needs from their site. We highlighted common user tasks(of the 25) that may also be a business priority.
We wanted to know how well the current site’s structure matches what the user is looking for and business priorities so we conducted gap analysis. We found that 12 high priority business items are not found on the home page and identified 3 missed opportunities. We also identified the top ten tasks to prioritize.
We conducted online tree testing with eight participants using the top ten tasks and the site’s existing structure to get a baseline of how well the site's current structure works for users. We learned that our participants had the most trouble when there were many potential categories that felt correct to them, or when the task had an ambiguous element for the participants to find, like to find a 'trendy' restaurant.
To identify categories that made sense, based on users' mental models, we performed card sorting online and in-person with a total of 13 participants.
We looked for similar category labels that the group of participants created for each task so that we could group similar labels, condensed them while keeping the original theme in mind.
We placed the category labels identified from card sorting into an abstract IA to get an easy-to-change overview. We further refined labels by label scoring so that the labels were well-know, easy, real, brief and representative.
Then we used the refined labels to update our abstract IA.
Based on the updated abstract IA we created 2 navigation options, one broad and shallow, the other narrow and deep. We picked the broad and shallow sitemap to move forward with because it would be easier to discover content at upper levels and no category would be burried too deep.
To learn how the new navigation structure performed for users, we conducted tree testing on our new sitemap, making sure to use the same tasks that we used for the initial sitemap's tree testing.
Based on what we learned from tree testing, we updated our new sitemap to the final design.
The new design placed top categories visually and textually obvious in the navigation bar. We also considered accessibility for visually impaired users by using a WebAim verified contrast ratio for our typography and by not relying on color alone to show hyperlink states. The new design uses containers with simple shapes that can chunk and responsively display multiple content types
We would conduct tree testing on our second navigation option and compare the results to our first option to learn which performs better for users.
Using the navigation option that performs best for users, we would complete a prototype and then conduct usability testing.
An information architect constantly keeps user needs, business needs, and the product offering in mind or else the design may be irrelevant.
Words matter. Be aware of the wording when creating tasks because research participants may be influenced by specific words. For instance, when we used the words ‘tips’ or ‘ideas’ in tasks, they appeared to influence the labels that our participants created.
We learned that labels need user research to back them up to be effective for users.
Even with a team of four we still found user mental models differed from any of ours. It is necessary to design and test with users during each iteration as much as possible. The information architect does not design work alone.
