An Choi

The Problem Space

An Choi is a Vietnamese restaurant opened by the Bui brothers in 2009. The restaurant delivers exceptional cuisine which ties back to inspiration from the street cuisine of the alleyways of Ho Chi Minh City (Saigon-and Hanoi). SInce opening its Orchard Street location has become a staple of the Lower East Side.

The restaurants inviting and fun decor, delicious cuisine and local ambiance are alluded to with its current web presence, but the existing site does not easily provide the user with the valuable information they need to make dining plans.

An Choi sought a solution to maintain the simplicity and feeling of their current site while updating it to compete in the current market.

Assumptions: We assume that existing customers of An Choi do not want a drastic change and that new patrons of the restaurant will be inspired by more clear representation of the existing information available on the An Choi restaurant site

Hypothesis: We hypothesize that if the site was more useful, it would attract new customers for both dine-in and take-out.

Focus: Maintain the simplicity of a one page design, but make the site more informative and responsive.

Sprint Planning

Methods

• Proto Persona

• User Stories

Design

Methods

• Hand Illustrations

• Figma Prototype

Developer Handoff

Methods

• Deliver files in Zeplin

• Site Build

Sprint Planning

Working within such a tight timeline, it was important to have a preliminary discussion with developers to share how the design process works , as well as learn what assets were needed for the sites development. Additionally, we discussed how we would communicate during the developer process should any questions arise.

From here we reviewed the current site design.

The images , colors , and general feel of the site was exciting and inviting, however, important information was hard to see.

 

 

To empathize with the An Choi customer, we established a proto persona, Serena.

Serena needs to know logistical information about the restaurant, anticipate if they will accommodate her dietary restrictions, and wants to enjoy authentic cuisine that reminds her of travelling.

Serena becomes frustrated and may pass over a restaurant for dine-in or takeout if the information she needs isn’t readily available.

 

With Serena in mind, user stories were written to guide our design. Each story was assigned a point value based on developer input which indicated the perceived difficulty of implementing the associated site feature.

These stories would also be useful for validating the final design in how effective it was in meeting Serena’s needs.

During initial planning timelines in Trello and alignment of working habits were established.

Design

Before beginning the design in Figma which would become the final prototype, hand illustrated sketches were created.

Site features

Included in the new design were

• Photographs of the restaurant , and press excerpts

• Tropical elements to invoke the ambiance of Saigon and Hanoi

• A visual preview of popular menu Items, and a link to the full PDF

• Address, hours, location, social links, telephone, and email

• Information about the Chefs and their motivation to open An Choi

These features tied back to the user stories to ensure Serenas needs would be met by the site to be developed.

 

The design was created mobile first to ensure it would be responsive across devices.

Launch the Prototype

 

 

Developer Handoff

Deliver Files

Once the design was complete the assets were delivered from design to the developer team. Below are the tools used for the developer handoff.

🍜 Figma: Desktop & Mobile Concept 

🍜 Figma Desktop & Mobile Prototypes

🍜 Font & Image Assets via Google Drive

🍜 Zeplin Files of each Concept Screen

🍜 Trello Board Stories & Assigned Points

Site build in React

From here the developers got to work building the desktop site in React. During this time Design was available as needed when questions arose.

🍜 Slack for design questions or asset requests

🍜 Dev's kept the UX side updated on progress with links to their deployed work

🍜 UX team communicated aspects of the deployed website that were not in line 

Retrospective

Once the dev team completed the site build we met to complete a retrospective on the project to discuss next steps and analyze our work as a whole.

🍜 Complex interactive elements take a lot of effort

🍜 Transparent complex shapes on CSS = difficult

 🍜 Review deployment on different browsers and devices