Annapurna Cafe Case Study

A redesign of the information architecture and wireframes for Annapurna Cafe Restaurant that provides cuisine from India, Tibet, and Nepal (including Newari cuisine).

Timeframe: Two weeks | Deliverables: User persona, storyboard, site map, usability testing, low fidelity wireframes, competitive comparative analysis | Software: Sketch, Omnigraffle, InVision | Methods: User interviews, affinity mapping, and low fidelity sketches

Role: Researcher, Information Architect, and Interaction Designer

The Project I was given the challenge to choose from a list of businesses in the Seattle area to redesign their website. As someone who likes food, I had the privilege to create a user experience for Annapurna Cafes website. My goal was to create a website that is succinct in navigation and informed the user of the restaurant's offerings.

“We need something to do together”

“We need something to do together”

Meet John Goodson

John is an art teacher who is a single parent with a 12-year-old daughter.  Prior to visiting a restaurant John and his daughter like to view images of menu items of possible restaurants that they would like to experience.  

John’s Missed Opportunity: John has viewed Annapurna Cafes website and it is not meeting his needs to provide him the visual context of menu items.  We ask ourselves how might Annapurna Cafe improve the menu visuals to allow John and his daughter to get a sense of the cuisine provided beyond a description?

John’s Opportunity If John and his daughter had the ability of visually seeing entree items along with a description in the Menu tab of the website John and his daughter would be able to view entrées and get an idea of what they are ordering.

The Process:

•User research - interviewing, affinity mapping, usability testing

•Information Architecture - card sort, sitemap

•Interaction Design - sketching, low-high fidelity wireframes

 

Research

Interviews and Synthesize

Key Takeaway - in heightening user experience through content and visuals

I met with five users with similar needs as John and interviewed them on their web experience when browsing Annapurna Cafe’s website. My goal was to understand how visuals and menu descriptions would help users decide where they eat. 

I was able to glean information on who, when, where and why they go or how they search for a restaurant. Users gave me further understanding inline to Johns’ frustration of not having the ability to visually seeing entrée items along with a description.   

Upon further questioning, users told me about likes and dislikes of their experience, and a poignant quote arose “It would be helpful for me to see an image along with a description of a menu item.”  At this point, I realized I needed to create a means for users to see entree with the description visually.  

Once I finished the interview process I created an affinity map to understand the pain points better.  I derived the answers to my interview questions into “I” statements and found three themes.

• Images of menu items with description

• Family experience

• Cultural experience

 
IMG_8632.jpg
It would be helpful for me to see an image along with a description of a menu item.
 
IMG_1089 2.jpg
IMG_1109.jpg
 

Competitive Comparative Analysis

Key Takeaway - truncate primary navigation tabs to enable user clarity while navigating through website

I reviewed five other similar restaurants in the Seattle area that were in various spots to understand what features they had and the navigation schema of the competitors.

Once I reviewed the sites, I understood that all eateries had more than five tabs in the primary navigation and realized that I would have to omit tabs from my project based on the users' feedback and navigational conventions. Users exclaimed the odd redundancy of how the Yeti Bar was a tab in the primary navigation rather than in the depth of the menu tab.

Furthermore, I knew that it could be possible to bring some of the other tabs into the depth of the site that could become useful features. Once I viewed the sites, I physically visited Annapurna Cafe and realized that the Yeti Bar was an entirely different experience and that it deserved its own website and could be linked together via a Global Navigation

 

Information Architecture

Open and Closed Card Sort

Key Takeaway - reinforced minimizing primary navigation tabs for user ease while navigating website

I asked three individuals to take part in an open and closed card sort for me to establish a rough skeleton of a sitemap as well as future sketches for Annapurna Cafes website.

Through the process, I was insured that the breadth of the website could be minimized to five while the depth could be greater by two levels.

Open card Sort

Open card Sort

 
Closed card sort

Closed card sort

 
Open Card sort

Open Card sort

 

Site Map 

Key Takeaway - mitigating redundancy through the website

I felt it was time to make a site map due to the redundancy of the existing navigation.  Users found that they could find themselves on the site acquiring redundant information such as the Yeti Bar menu.  I realized the flaws and complexity could be minimized.

I reviewed the current site map and recreated it to understand the repetitive nature of the navigation schema. Fortunately, the outcome was an abridged version where users could navigate the site with ease due to the lack of loops found in the current site.

 
intial sitemap

intial sitemap

 
Truncated sitemap

Truncated sitemap

 

Interaction Design

Sketching

Key Takeaway - created a prototype that allowed user confirmation of content and visuals

At this point, I started to make my sketches and iterations to understand the user's needs best. My initial process was messy; I received a comment “What am I even looking at?”  I realized I had to bring the fidelity up for users to respond to my design.  

Once I achieved the response that users would recognize I began to make various iterations where I discovered how I could make a wireframe to relieve the pain point of not seeing an image with a description of an entree item. 

Once users are on the menu page, they would hover over entree item, and the text changes color allowing a user a mental queue to click the item.  Once clicked a pop-up image finds its way to the foreground showing the menu item and description.

P2 sketching images.jpg
 

Wireframes

Key Takeaway - user feedback allowed for robust interaction with the website

Through creating my sketches and performing low fidelity paper prototypes, I came to realize that it was time to create my low fidelity wireframes. The information provided by user feedback was reliable and allowed for insights that I was not aware of.

 
Home Page

Home Page

About page

About page

 
Menu

Menu

Image with description of entree, pop-up

Image with description of entree, pop-up

 

Usability Test

Key Takeaway - the goal was reached by users ability to view content and visuals

I tested three individuals and determined that my solution rectified the ability of the pain point of being able to see a visual representation of the entree with a description. One user mentioned, “You first taste with your eyes.” 

I recognized through note taking that the users' discovery reflected my aim of Heuristics of recognition, consistency, and minimalism. Through the SUS usability test, I received a mean score of 65 which placed the score at the high marginal placement.

You first taste with your eyes.
 

Reflection

From the project what I learned is changing navigation schema to eliminate redundancies enables users a clear path to receive information thereby not confusing the user.  

I also realized that researching the needs of the user and understanding their pain points such as images along with description informs the user's decisions thereby satisfying their needs.    

Next Steps

•Create an additional website for the Yeti Bar and instill a Global Navigation

•Reiterate digital prototype to benefit user needs via SUS testing

•Continue the process and eventually create UI for the website