Annapurna Cafe Website
*Case Study*
Seattle based cafe featuring foods from India, Nepal and Tibet, dedicated to bringing the rich flavor and experience of these far eastern cuisines to their customers.
Role
UX Designer
Duration
Task
Two Weeks
Update existing site to be competitive in the Seattle restaurant market
Brand
Seattle based cafe featuring foods from India, Nepal and Tibet, dedicated to bringing the rich flavor and experience of these far eastern cuisines to their customers.
Problem Statement
The current Annapurna Cafe website is full of endless loops and broken links that confuse the user. Ultimately, users drop off without gathering helpful information.
Solution Statement
How can the existing site be updated in a way that informs and engages the user and mirrors the look and feel of the physical restaurant.
Heuristic Analysis
I began with an initial analysis of the heuristics of the website. I quickly realized that the site had some issues that were causing it to be more of a deterrent for patrons rather than a tool to bring in potential customers. Among its many issues were broken links, missing images, pixelated images links to no-where, empty pages, circular user flow experiences, and a very dated template design. When tackling this problem I realized that to make Annapurna Cafe competitive in todays restaurant market their site would need a general facelift.
Market Research
The next step in figuring out how they could be more competitive with similar local brands I needed to do a competitive analysis as part of the market research. To accomplish this I first needed to see what restaurants they were competing with. I began by doing some research into finding out how far people are will to travel to go to a restaurant. I found a consumer report that indicated that restaurant patrons are willing to travel between 12-17 minutes for dinner. I went on google maps and using their time estimate function estimated the distance one could travel at 6 o'clock in the Seattle area. That estimate distance was 2.5 miles. Knowing that you could travel 2.5 miles to go to either Annapurna Cafe (indicated by the yellow star) or one of their competitors, I drew a 5 mile radius around the restaurant. I then used yelp and other various restaurant rating apps to find the top Indian food restaurants within the radius (indicated by the red stars).
I determined several criteria on which to judge these restaurants and created a matrix based off of my findings. While certainly not worst on the list, Annapurna Cafe did show signs of where improvements could be made.
Site Mapping
First I made a site map of the original site. Some pain points that stuck out right away were: no online ordering option, finding a phone number to call was difficult, without images it was difficult to get an idea of the quality of the food, the pricing structure for bar drinks was confusing, and there were too many possible directions to move in on the site.
I made a list of the all of the possible features of the website and did a card sort with users to find out where they would expect to find certain bits of information. The results showed that many of the features could be condensed and the mapping of the site could be greatly simplified. With this data in hand I created a new site map that simplified content and gave more organization to the the site as a whole (see right).
Ordering Plugin
When analyzing what would make Annapurna Cafe more competitive in the market it was apparent that an online ordering function needed to be implemented. I examined four different online ordering programs (their capabilities and functions) and determined that EatStreet would be the best program to implement for this particular brand. When factoring in the barrier of entry it was determined that EatStreet would have the lowest by-in value and could be easily pivoted from if it did not seem to be working with the users once implemented or it was determined that the restaurant needed a more robust plugin.
Paper Prototyping
With my site map complete I began on paper prototyping. I went through several iterations with the homepage alone, trying different layouts that would then eventually determine the overall layout of the rest fo the site. I tried to be a little inventive with several of the solutions, but in the end settled on a more traditional layout. This was determined through user testing on these designs. Proving that some of my more non-traditional designs were too confusing and difficult for users to navigate. The more traditional designs gave users a sense of familiarity that they could identify with and easily use.
Wireframing
From the testing of the prototypes I went into wireframing. During this process I was able to really see the space I had to work with, sizing of object, and layout of different elements on the screen. With the more traditional design that I had decided on I began to build out the homepage and rest of the online ordering flow. I chose to incorporate the ordering option into the online viewable menu instead of separating them like several other sites had one. Providing information and buying options for users with the least amount of travel between the two was the goal. This was done to prevent drop off. In testing these designs the ease of this type of navigation proved to be efficient for users.
Next Steps
My next steps in development would be to skin the rest of the site, retest with users, and iterate on their feedback. After making those iterations and re-testing (barring any major revisions) I would then pass the designs over to development to begin their initial implementation of the website. Again, after the development process was complete I would cycle back to the "test, evaluate, iterate" model that I had previously used on the paper prototyping and wire-framing. This model is the best way to understand if the needs of the users are being met consistently and effectively.
