Long Provincial

Website redesign for downtown restaurant to better showcase their healthy offerings to working professionals and increase lunch orders. 

 

PROJECT

Concept Design Challenge
Web Redesign

TIMELINE

2 week sprint

ROLE

UX Designer

TOOLS

Sketch
Omnigraffle
InVision
Pen
Paper

METHODS

User Research | Interviews & Surveys
User & Site Flows
Affinity Diagrams
Information Architecture
Wireframes
Interaction Design
Usability Testing

 

Summary

Long Provincial Vietnamese Restaurant is a downtown Seattle restaurant with an extensive menu, lots of inexpensive healthy options and a long tradition in Seattle for serving authentic Vietnamese food.

But their current website has gone out of date and doesn't accurately represent who they are and what they do, making it difficult to attract new customers.

I redesigned the structure and offerings of the current Long Provincial website to showcase their best offerings in a way that was easily and quickly accessible for working professionals and competed with similar downtown lunch options.

 
 Current Site Homepage

Current Site Homepage

I wanted to visit the restaurant for myself to get a true experience and understanding of what it would be like as a customer. I was hoping to learn more about the user experience as well as learn about the restaurant's vision, priorities and personalities to help guide me in what to promote and highlight in this redesign.

So I went to LongProvincial.com as that would likely be my first way of figuring out the details of where the restaurant is, what it offers and when to visit. I learned some very important things as I spent time on the website with the mindset of a customer looking to visit for happy hour. I uncovered a few problems:

Location Address

The location address was visible on the homepage which was great, but I needed to click on and copy the location address to figure out where it was and how to get there using Google Maps. I tried to click and nothing happened, I tried to copy and paste and realized that the location had been embedded into an image so it wasn't accessible. This was definitely frustrating. The text was small and difficult to read quickly so I needed to open up two browsers in order to read one and then type into Google Maps to figure out my navigation to the restaurant

Open Hour Listings

These were not made a priority within the site. Happy Hour is listed on the main page but because it is small and at the bottom, I didn't notice at first as I expected a navigation  item for this type of important information. I eventually found that the hours were listed on the Contact-Map navigation. 

Menu

I now knew when to visit for Happy Hour and how to get to the restaurant so I wanted to start thinking about what I would order and to try to figure out what to expect. I clicked on the Menu Navigation. There were 16 menu navigation items listed and then each one of those had several items, some over 20. This was very thorough but also very overwhelming and because there were not photos of any of the individual items, it was very difficult to understand what I was looking at or what to expect. I then went to the Happy Hour that evening not knowing what to expect or what to order. 

Site Analysis

 
 

DISCOVER


 

On-Site Visit

Screen Shot 2018-05-22 at 8.16.36 PM.png

Now I had all the details I could gather from the website, I was ready to meet my husband for Happy Hour. My goals for this on-site experience was to understand the service, experience the food and uncover any complexities with in the in-house dining experience. Here were the key-findings from my visit: 

LOGISTICS:

Not much wait time, at least at 5:30 on a Monday, it was very easy to get in. The location was more difficult to find, however and didn't have very accessible parking because it was located on busy 1st Ave with construction going on and commute traffic heading home. 


FOOD:

There were a lot of Happy Hour food options and discounted drink menu, including some non-alcoholic options. We generally enjoyed most items of the Happy Hour. The food was fresh and there were lots of vegan or vegetarian items which seemed unique and unexpected because it wasn't something that had been featured on their current site. 


AMBIENCE:

We sat in the bar to experience Happy Hour and also because I had seen on Yelp that the restaurant features a unique feature of a live jellyfish aquarium and even names their bar the Jelly Bar, but unfortunately the tank was not running and instead of real jellyfish, it had plastic fish floating at the top of the tank. This was unattractive and disappointing and could be very frustrating if you came specifically to experience that aspect. Overall, the ambience wasn't as modern as advertised on Yelp and the press features on their website, including many plastic lights and playing of elevator music. 


I had learned a lot but still wasn't quite sure where to go with the site redesign. I needed to learn a bit more about who I was designing for and what other similar restaurants were doing in their design. I believed that their website could be a great advertisement for Long Provincial Restaurant but it needed some changes to make it more usable and visually engaging.

 

Persona 

 

 To aid me in this project, I was given three proto personas to consider as tools for the design of the site. I spent time considering each of the personas and at first, before my on-site restaurant visit, believed that Lauren would be a good fit based on past reviews on Yelp that highlighted an active night life, great cocktail menu and even a unique jellyfish aquarium in their bar area. I believed that the website needed updating to represent this youthful modern atmosphere being expressed in the Yelp reviews and description. But then upon visiting the location, I saw that it wouldn't be a good fit for Lauren because she cares about visual aesthetics and the cool factor of the space was low due to an inactive empty jellyfish aquarium tank, cheap plastic holiday lights as decor, and a empty atmosphere at least for my Happy Hour visit. 

Based on the current website and my Happy Hour visit, I decided that Daniella - a 65 year old HR manager who is a mother and grandmother would be the best fit for the new design.

Key facts about Daniella:
- Appreciates quality and tradition. 
- Brand loyal once she finds what she likes. 
- Overwhelmed by too much information or indistinct categories.
- Prefers delivery to pick up.
- Busy work and life schedule.
- Turned off by reentering information

I knew that I could redesign the website to better suite Daniella and to support her needs  as well as increase customers and sales for Long Provincial Restaurant. I saw Daniella being a good audience for the healthy offerings of Long Provincial, many items which are vegetarian and vegan. Now I needed to solve how to get this great food to Daniella within her busy work day?

 
 Proto Persona courtesy of General Assembly

Proto Persona courtesy of General Assembly

 

Competitive Analysis

Since Daniella was a busy working woman, I focused on finding healthy and fresh lunch options nearby downtown that were a similar price point as Long Provincial to use as Competitive Analysis. I wanted to see what others were doing right and find ways that I could integrate those ideas within the Long website.

The 5 sites I analyzed were Sweetgrass, Purple Carrot, Homegrown, 'Table and Green Leaf Vietnamese. 

Screen Shot 2018-05-18 at 4.02.10 PM.png
 

Key Findings from Competitive Analysis were:

  • All competitors offered pick up and/or delivery

  • 4 of 5 competitors included high-quality photos of their food items

  • All competitors made sure their hours and location were highly visible

  • Scrolling photo friendly menu made extensive menu easier to take in. 

Hours-Navigation.png
OrderOnline.png
Photos.png
 

I wanted to take these key findings to improve the site experience for our proto-persona Daniella. I knew she would need clear and straightforward navigation, for it to be quick and easy to do whatever task she'd need to do, in this case, ordering lunch for delivery online. It task of ordering lunch to be extremely quick and easy and also would appreciate being able to Order for Delivery online.

 

DEFINE


 

Design Goals

 

After analysis of the site and the competitors, my plan was to redesign the header so that the navigation is full of all the important details for Daniella to order a quick lunch. Making the lunch ordering system simple and easy on the Long website would bring Daniella and other working professionals in and increase their loyal customers and sales.

Key updates to make were to:

Highlight Necessary Information

Hours, contact info, reservations, and location should all be in main navigation header

Reorganize Menu

Make 16 category menu featuring 300+ individual items, into a scannable and less-overwhelming  experience. 

Incorporate Photos

Bring in high quality photos to represent each dish listed online to highlight delicious, vibrant food and drinks and make it easy to quickly get a sense of the restaurant.

 

Realizing that navigation would be key for Daniella to experience an easy-to-use site to quickly order lunch on her busy work day, I used User Flow and a Site Map to help me zero in on an effective and organized site that would support Daniella's needs and remove the problems that were arising in the current site navigation.

Navigation

 

Updated Site Map

Screen Shot 2018-05-18 at 3.32.27 PM.png
 

User Flow

FlowChart-Long.png
 

I sketched out screens for a new site design and layout that would support Daniella in her need for an easy to navigate site that let her find the food she wants for a lunch delivery.

Sketches

 
 

DEVELOP


 

I narrowed down the layout and began to convert the sketches to wireframes. I focused on a simple, clean and straightforward layout for Reservation page, Contact Us page and Delivery / Pick Up page, drawing inspiration from my comparative research and what I knew about Daniella. 

Daniella hates to re enter information so I designed the sites using integrated 3rd party providers for delivery (Caviar), pickup (ChowNow) and reservations (Open Table) to 1) make it easier on Daniella when completing tasks and save her time and 2) to make it easier on Long Provincial restaurant to implement. 

Wireframes

 
 
 DELIVERY / PICKUP

DELIVERY / PICKUP

 
 CONTACT US

CONTACT US

 
 RESERVATIONS

RESERVATIONS

 
 
New Menu (3).png
Menu Main.png
 
 

I focused most of my attention and iterations on the wireframes and sketches for the Menu page. I wanted to find a way to create a design where Daniella could scan the menu easily and be able to quickly understand what’s being offered and if she wants to eat there or order, and then also, once found, to very quickly be able to navigate to precisely what she wants and order. I wanted to create a navigation that was both by recognition (browse images of full website)  as well as recall (navigate to Lunch menu, Salad menu and select exact salad to order.)

 HOMEPAGE

HOMEPAGE

 MENU VARIATION 1

MENU VARIATION 1

 
 

I shared my wireframes in a critique to get a sense from a design perspective how it was reading visually and how other designers had solved problems with organizing and showing a large amount of information, like these 300+ menu items. 

The feedback included suggestions for reducing the header as it was limiting content visible on the page above the fold.  limited content on the page above the fold. It was also suggested that a popped out side navigation, rather than top navigation, could be useful for the menu specifically, to allow more visibility and scrolling of the food items but also reveal what section of the menu you are currently on, or to easily switch from lunch to dinner to happy hour without scrolling back to the top navigation. 

So I went back to sketching and wireframing and updated my designs. 

Iteration

 

Updated Wireframes

New Menu (1).png
New Menu (2).png
New Menu (2).png
New Menu (3).png
 
 

User Testing

IMG_20180523_090815596 copy.jpg

The wireframes seemed like a better option to still allow for scrolling and for specific navigation in the menu and so I popped them into a clickable prototype in InVision and began testing it with users. 

I asked users to accomplish 3 tasks:

  1. Finding a salad to order and then ordering for delivery

  2. Making a reservation

  3. Locating address to navigate to restaurant

All users were able to fully complete all tasks. I did not see any main issues that needed to be immediately changed. There was one comment from a user saying that the location address in header linking to Google Maps was unsettling as it took the user off the site. I think this could be fixed by including a small Google symbol so that clicking indicated that you were leaving the website to get Google Directions.

 

DELIVER


 

Clickable Prototype

View InVision Prototype Here

 

Hi Fidelity Prototypes

Because it was a two week challenge, I didn't get to the next steps of hi-fi prototyping or visual redesign of the site and continue to test with clients. 

Evaluate Menu Items

If this were a client project, I would also want to discuss editing down the menu after evaluation of online orders or popularity of dishes. Was it necessary to show every offering or could a smaller menu be beneficial for customers ordering online? 

Test Tech Viability

I am a little concerned about listing over 300 menu items with photos and would want to test the tech viability of having so many photos and items on one page and what that load time would be and how it would affect the user's experience.

Next Steps

 

Complexity of designing with real data and content

This challenge revealed so much to me regarding the importance of a solid Information Architecture. With a restaurant with over 300 items, it was so imperative that the content was laid out in a way that would keep from being overwhelming to the user but still provide all the options that a customer might need. I found I could have spent weeks working on really coming up with a good solution for the representation of so many products for a restaurant. It was a compelling challenge to work to find a organized design that cleanly and clearly highlights the necessary information from the client and enables a very helpful and engaging experience for the user. 

Maintaining Brand Personality 

I also learned that Content Strategy must not be overlooked. Even for a seemingly simple design for a menu, it was important that I not simplify and lose personality or brand. On the current site, the restaurant includes both the Vietnamese name of the item and the English. While I found that added more text than was helpful and made it difficult for a user to quickly scan the site to find the dish they wanted, I also knew it was important that this staple Vietnamese Restaurant remain true to who they are. I designed a simple Language toggle to be switched between Vietnamese and English within the site. This takes up little real estate and still keeps the menu much cleaner, but it now allows for the user to decide what language they would like to view the menu in and to view it in a way that is most comfortable for their experience.

On Site Visit Reveals More of the Story

I learned the importance of an on-site visit to get to know the whole story. If I wouldn't have visited the restaurant myself and perused the website as a real customer, I wouldn't have been able to accurately select my primary persona or understood the needs of the client, understanding their strengths and difficulties. 

What I Learned