Project: Responsive website for Spicy Thai Lao, a Chicago-area "hole-in-the-wall" restaurant

Target user:  Current and potential Spicy Thai Lao diners who want to find information about Spicy Thai Lao, see photos, view the menu, and order online

Goals:  Rebrand and refresh the Spicy Thai Lao branding and create a responsive website for Spicy Thai Lao to boost its online presence

My role:  UX and Visual Designer

Tools used:  Pen/pencil and paper, Adobe Photoshop, Sketch, Illustrator, InVision

I started out the process by conducting research through secondary research by reading information on the digital aspect of restaurants and looking through various responsive restaurant websites to understand the purpose they serve for restaurants and diners alike.

I compiled a list of general key statistics, common features, and recent trends when it comes to user interaction with restaurant websites. Some interesting statistics I found were that 57% of restaurant diners order from a restaurant’s website online daily, weekly, or monthly. The nation’s most tech-savvy diners are in Washington, DC (74%) and San Francisco (67%), followed by Chicago (63%) and Boston (63%). Since Spicy Thai Lao is located in the Chicago area, I felt that this was something to really consider.

Along with the information found in secondary research, I conducted interviews, which provided me with valuable and specific information. In order to have as specific information as possible, I was able to recruit Spicy Thai Lao customers for the interviews. The purpose of the interviews was to learn more about habits and pain points of using online interfaces to find and order food. I also specifically asked them about their experiences with Spicy Thai Lao to see how that might fit or not fit with their overall online experiences with restaurants. 

One thing I noticed was that although participants used online platforms for other restaurants, with Spicy Thai Lao, they mainly did things the old school way ordering via phone call or stopping in. This affirmed the need for Spicy Thai Lao to have some sort of streamlined online presence. 

The secondary analysis and interviews helped me to create my persona, Huda Kayali. Huda is a foodie in her mid twenties. Out of convenience because of her busy schedule, Huda often orders online from nearly every restaurant she frequents, except for Spicy Thai Lao. 

After the research phase, I dove into figuring out ways to construct the site before designing it. I did this by first drawing potential sketches of the homepage, thinking about what content should exist on the site, including sorting Spicy Thai Lao's extensive menu. With that information, I created a site map.  

Following the site map, I created a user flow by identifying the main flow that users would follow to navigate the Spicy Thai Lao website. The user flow was based on the persona Huda, to present different paths she may take to arrive at the site and what task she might accomplish while on it. 

After the user flow, I began drafting wireframes for Spicy Thai Lao, coalescing my research. From the desktop wireframes, an initial prototype was built in InVision. Below are the responsive wireframes (desktop, tablet, mobile) for the homepage.

One thing I really wanted to make sure I included for customers was the ability to order online. Although Spicy Thai Lao customers mainly order over phone call or in person, having the option to order online is almost always necessary these days for both customers and restaurants. An order page was created to show the customer their options for ordering (phone call and online, takeout and delivery).

Users were recruited to try out the wireframe prototype. Their experiences and feedback was taken into consideration moving forward. Responsive wireframes for tablet and mobile were also created.

The last step in the process was creating the user interface design aspect. First, a logo was created to achieve branding that reflects the feel of Spicy Thai Lao. The business owners expressed interest in bringing in green, orange, and red colors. These colors reflect the color of their food and interior. After creating a few different logo drafts, I came up with a final logo concept.

As I was finalizing the logo, I put together a UI kit. The kit consisted of a color palette that would reflect Spicy Thai Lao in a way that is clean and modern. Typography, buttons, icons, photography, and the navigation were also included in the UI kit.

After creating the UI kit, I created the high fidelity prototype on InVision for Spicy Thai Lao's desktop version. Because of the site's simplicity, the prototype shows all functions of the site. I also designed responsive designs of Spicy Thai Lao's homepage on tablet and mobile.

This was my first time working with a client in this capacity, and it was such a positive experience. I learned so much during every aspect of the process.

During the research portion, I learned so much about how restaurants use online platforms, and the benefits and pain points for both business owners and customers. This information was enhanced with the interviews, which gave me specific feedback because they were all Spicy Thai Lao customers themselves. This helped inform the rest of the project, from the user persona to the final hi-fi prototype, and everything in between.

I had fun during the visual design aspect of the process. Creating the logo and bringing in the visual elements really allowed me to creatively envision a better solution and make it a reality.

User feedback was incredibly valuable throughout the entire process. The usability testing in particular opened my eyes to better ways to improve the look of the site so it would be more visually accessible for folks with special needs.

I really enjoyed working with the owners of Spicy Thai Lao and hope their restaurant continues to grow and succeed. As a Spicy Thai Lao diner myself, I look forward to ordering food from there for a long time to come!