THAI EXPRESS
The new owners of Thai Express purchased the restaurant at the end of 1996, and opened for business in 1997. They serve excellent Thai food, in a fast service carryout restaurant. Thai Express has won numerous awards including multiple awards for best carryout restaurant, and Best Thai food. They often participate in the Asian Food Festival in Cincinnati, and were also featured in the Asian American Association festival in Oxford Ohio.
PROJECT OVERVIEW
Challenge
Thai Express is a locally owned restaurant in Cincinnati that is highly regarded and has been selling take out Thai food since 1997. The clientele are mainly students, and employees of the University, and the many hospitals in the neighborhood. The atmosphere is of a small family restaurant that cares about providing customers with filling, nourishing, and flavorful meals, for a reasonable price. They do not have a website, although they have a facebook page. They recently got a new logo to match their overall look and feel.
Solution
Design a responsive website for Thai Express
Create a responsive site that has Thai Express’ menu
Review their logo and branding, and refresh if needed
Duration
80 hours in 4 weeks
Scope
Responsive ecommerce website, logo, branding
Tools
Sketch, Invision, Pencil & Paper
Role
UX designer (research, visual design, interaction design, user testing)
PROCESS
This is a graphic description of the process that I used in this project. It is important to have an overview of the entire process, to ensure that it is logical, and reasonable. The process included gaining empathy for the business and their customers, defining the goals of the project, and the product that would be created, generating ideas for the features of the product, creating a prototype product, and testing it so that it could be improved, and potentially handed off to a development team.
EMPATHIZE
I needed to gain empathy into the needs of the customers of Thai Express, and into the business. It is important to understand the customers, the business, and their needs, as well as the environment where the business operates. I conducted secondary and primary research into Thai Express, their customers, the potential customers in the neighborhood their direct and indirect competitors and the industry.
SECONDARY RESEARCH
Secondary research is research using data that was collected by others. It is important to conduct secondary research because it jump starts research with the minimum of effort and expense. Secondary research was conducted by reading about the demographics of the customer base near Thai Express, and reading about direct and indirect competitors, as well as trends in the quick service restaurant industry.
MARKET RESEARCH
Market research is research into the general market, and the business’ competitors. Market research is important to identify best practices, and problems that customers have as well as gaps in needs that are not being filled by other businesses.. I conducted market research by investigating and reading trade publications in the food industry, and visiting websites and reading reviews about Thai Express’ direct and indirect competitors.
INDUSTRY OVERVIEW
Much of the nation’s food supply is provided by restaurants. During the COVID-19 restrictions, before sit-down restaurants were open, carry out restaurants were an essential industry. The reason was that, since a large portion of Americans eat out every week, the grocery stores and markets did not have enough food to feed everyone, and with sit-down restaurants closed, fast service places needed to provide food to people. Most fast service places have a menu that is available, along with pictures and a description of the dishes, along with a list of main ingredients. Customers also often want to see the history of the restaurant, where it began, what type of food they serve, and where they get the idea for the food. Most restaurant websites include this information. Larger restaurants may be required by law to provide nutrition information as well, but small restaurants are not required to do this.
DEMOGRAPHICS
Local real estate website areavibes.com shows that the neighborhood where Thai Express is located is young, with a median age of 25.4.
There are an average of 2 people per household, and 4 times as many households without children than with children.
A lot of young people find the neighborhood attractive, but move out if they begin a family.
There are a lot of people who commute into the community.
Competitive Analysis
Competitive analysis is analysis of the industry competitors. Knowing the strengths of competitors allows selection of the practices to implement in this product, while looking at their weaknesses lets the design take these into account to create a superior product. I read about industry leaders, and looked into competitors in the same type of cuisine, reading reviews, and looking at online information, then summarizing it here.
Provisional Personas
Provisional persona are descriptions of likely users of the website. These are useful to help keep real people in mind when creating questions to ask interviewees, and to describe the results of research in terms that are more human. I created this using market research in the Thai Express area and the demographic characteristics of the area.
PRIMARY RESEARCH
Primary research is data collected directly for use in this project. While this data is the most difficult type of data to collect, it is the most valuable in determining the users’ pain points and needs. I used the provisional persona to select the demographics of the people to interview, then created an interview script.
USER INTERVIEWS
I conducted user interviews with Thai Express customers. Interviews are a very valuable source of primary research data. The users were interviewed in person, and asked about both their in-person and online experiences with the restaurant and other restaurants, and these interviews were recorded.
EMPATHY MAP
The empathy map is a map providing insights in the users’ pain points, goals and motivations. These insights will form the basis of the features that will be designed into the website. To create this map, I transcribed the user interviews and recorded each observation on a sticky note, then grouped similar ideas together sticky notes to form formed clusters, revealing insights. and recognized the users needs from these insights.
INSIGHTS:
● The menu is important to customers. In addition to helping them order, some customers decide which restaurant to go to based on the menu.
● Customers want to order online for several reasons. They feel that their orders are more accurate, that they save time, and sometimes they just do not want to deal with a person.
● Customers want to know about the restaurant and the owners.
● Many customers are motivated by food quality, and if they have not been to a place, they make their decisions about the quality of food based on reviews of other customers.
● Customers want to know what to expect to get when they receive their order.
NEEDS:
● The customers need to see a clear menu.
● The customers need a simple, online ordering system that gives them information allows them to customize and confirm their order and when it will be ready.
● Customers need information about the restaurant, including basic details such as
location and hours, and information about the type of food, and the family that runs the restaurant.
● Customers need to be able to see other people’s reviews.
● Customers need to see pictures of the food they are ordering.
USER PERSONA
The user persona of Scott Perry, was created from information gathered from user interviews. The final user persona is very useful, since it is is created from real user data. Scott’s motivations, frustrations, and needs are directly from user interviews, with the other characteristics, such as his brand affinities with Drunken Bento from market research and the personal details compiled from several different interviewees.
DEFINE
This portion of the project defines what is needed in the final product. It is important to define he needs, and proposed solutions that will be used in the product. To do this I formulated How Might We questions, asking how we might answer the users’ needs from the point of view of the persona, put together a Venn diagram of the business and users’ goals, and conducted brainstorming to identify solutions.
POV STATEMENTS AND HMW QUESTIONS
This is a list of point of view (POV) statements and how might we (HMW) questions. These questions serve as the basis for brainstorming and developing features to answer the needs of the users. I took the insights and needs gathered from users from the empathy map, restated these in the POV of Scott the persona statement, then asked how to answer the persona’s needs in the HMW questions.
PROJECT GOALS
This is a Venn diagram showing the overlap of the business and users’ goals. The goals that overlap between the business’ goals, and the users are those that will be the highest priority for features of the project to address. I found the business goals through market and competitor research, and the user goals by examining the results of user interviews and the empathy map.
SITE MAP
The site map is the first listing of the organization that a site will have. The site map guides the development of the rest of the pages in the site, and begins to define the information architecture of the site. The site map was created using industry standards for the arrangement of pages and features, and adding the features that were developed by brainstorming.
IDEATE
TASK FLOW
This is a list of tasks, and flow diagrams for how these tasks will be completed on the site. The task flow diagrams are important because they show the minimum number of clicks required to accomplish a task. The tasks were created by examining the HMW questions, and the task flow began with the industry standard designs for websites, and placed the features allowing the user to accomplish the task in the context of a standard website.
USER FLOW
The user flows shows how Scott, our user persona, will accomplish the necessary tasks. It is important to understand how the user will experience the site, and to make sure that the site can be navigated in a logical way. I created this flow by using typical flow charting conventions and using the conventions of industry standard websites, applying the features that will allow the users to complete the tasks that were identified.
LOW FIDELITY WIREFRAME SKETCHES
I sketched out the low fidelity wireframes to see the layout of what my website design would look like. This is a rapid way to see what the site will look like, and to make sure that all of the features are included and appropriately arranged. Low fidelity sketches are done with paper and pencil, and the colors, and images and fonts are not put into a low fidelity sketch, because they may distract from the evaluation of the functions of the site.
MID FIDELITY WIREFRAMES
The mid-fi wireframe is a depiction of how the site will look. This level of wireframe lets potential users see how the site will look and feel, but does not distract from letting people try out the functions of the site. These wireframes were created by looking at current industry standard websites, and selecting container sizes and shapes and arrangements to fit the industry standard, while representing the unique aspects of Thai Express, and enabling all of the required features and functions.
MID FIDELITY RESPONSIVE WIREFRAMES
The main pages were formatted into desktop, tablet and phone formats. Responsiveness to the format is important as more and more users are using multiple means, including mobile devices for their primary means of connecting to the internet. Users also still use the larger format of computer screens, and tablets. The sizes of image containers was kept the same to avoid the expensive redesign process, and the information was re-arranged into formats that are suitable for desktop, tablet, and telephone screen sizes..
PROTOTYPE & TESTING
This is a prototype with several active links. A prototype allows users to test the site to accomplish important tasks. A prototyping tool was used to make the mid fidelity wireframes into an active prototype so that user tasks could be tested,
USABILITY TESTING
These are the results of my usability testing. The usability testing is important since it can identify errors, thing that are not intuitive, or problems that users have with the site design. I developed a test plan that included the number and demographics of users to test, and a script for the test moderator, then tested with the users, over Zoom and Skype, recording the tests.
Objective: To determine if people can see the menu, select a specific dish and see the picture and menu, read reviews, and find the story of the restaurant and business information.
Tasks:
Find a link to Pad Thai, and look at the picture and ingredients of that dish.
Find reviews from other people.
Learn about Thai Express.
Participants:
5 Person
19-59 years old
Test Summary::
Task 1: 0 errors, 100% completion
Task 2: 4 errors, 80% completion rate
Task 3: 2 errors, 100% completion rate
AFFINITY MAP
This affinity map shows where several of the testers experienced difficulty or had pain points or comments suggesting improvements to the prototype. This is important, because if several testers had difficulty with some part of the prototype, it is likely that the item should be changed in some way.. I created this map by making transcripts of each interview, including the clicks that the testers made, and placed each comment and significant click on a post-it note with a separate color for each tester, and grouped these in a logical manner into areas of insight into the users’ interactions with the site.
Insights:
The testers wanted reviews to be in the “Our Story” section.
They wanted pictures of food and descriptions including proteins, spice levels, and overall taste.
The testers also wanted to see a colorful website.
Pain points:
Could not find reviews
Could not understand menu items,
Grey scale is boring
Recommendations:
Add some reviews to our story page
Add spice level and maybe choice of meats
Add color to site
MOOD BOARD
The mood board for Thai Express contains imagery colors and font selections for the site. The mood board will be used to create high fidelity wireframes and eventually provide elements for the mood of the site. I examined industry standards and competitor websites to determine current standards in imagery, color and font selection, matching these with the branding of Thai Express.
Imagery:
I chose images that have colorful kind of saturated color because I think it represents something that is very tasty which it goes well with what Thai Express is selling.
Thai food is saturated with flavor, and the images should be saturated with color.
Color:
I chose warm colors schemes for my color palette because it provide visual stimulation for viewer.
Thai Express is fast serving hot spicy dishes. Hot and spicy food is warm.
Also, the family atmosphere of the restaurant is warm.
Font:
I chose Open sans for headline 2 and body text because it has friendly appearance and it’s easy to read.
For big head line I chose Brandon Grotesque because Brandon Grotesque is a bold, distinctive and elegant font. It is also functional and warm. This is a combination that reflects the values of Thai Express. Fast, filling food in a family atmosphere.
STYLE TILE AND UI KIT
The style tile shows the style choices that will be used in a high-fidelity wireframes and the final site, and the user interface (UI) Kit is a collection of elements for the final prototype, and that can be handed of to developers for use in a live page. It is important that they style and UI elements represent the of the actual restaurant, and that users experience the website as an extension of the physical restaurant. I chose industry standard color combinations, and selections for the style of images and other elements of the site so that they would match the style of the Thai Express brand.
Color:
I refreshed the brand color on the logo by searching popular colors on Dribbble.
I tried to get the color as close as the brand color as possible, because the company has recently changed their logo, and it would be expensive to change their signs.
I chose red as the brand color from the logo. Red helps stimulate excite, energy, and it can represent hot and spicy. I also got Yellow from the logo it represent happiness and uplifting. Red and yellow are also very popular colors in asian food culture, and research has shown that they stand out and are attractive.
Instead of using solid black I decided to go with dark brown because it represent comfortable and inexpensive as the restaurant is selling inexpensive food, in a comfortable atmosphere. Since the food is carryout, you eat it wherever you are comfortable.
HIGH FIDELITY WIREFRAMES
High fidelity wireframes put images and text that simulates the actual images and text of the final site, into the page, along with the mood, style and UI elements that have been selected. This high fidelity wireframe will give a solid impression of the final appearance of the app, once the correct images and text are inserted. I did this by applying the mood, style and UI elements, and selecting images and text that match these elements and inserting these in the mid fidelity wireframe with modifications suggested by the affinity map.
PROTOTYPE & TEST
FINAL PROTOTYPE
The final prototype is a a high fidelity wireframe that has had some of the links active. This allows potential users to see what the site may look like, and experience accomplishing some of the important tasks. The final prototype uses the high fidelity wireframe and was made into a prototype using a prototyping tool.
REFLECTION
It was difficult when coming up for interview questions because Thai Express does not have website, only a Facebook page and I could not ask the customers about their experience with Thai Express online. All Thai Express customers either call in, order in person, or order though a third party site, that is not related to Thai Express where the site orders and sends a driver to pick up and deliver the order at an additional charge. The customers I interviewed were at the Thai Express location, so they had not necessarily seen any of the Thai Express web presence, either on Facebook, or the third party system. Since every user expressed how easy and simple the tasks were during usability testing, I had to observe their facial expressions and watch their mouse movements carefully to find the areas that could be difficult for the users, and need to be improved.
NEXT STEPS
To make this site better, I would like to re-test the prototype to ensure that the corrections that I have made have remedied the problems that the testers have identified. The design should also be handed off to coders, and items such as food images, the complete menu, food descriptions and other individual items that will need to be created. Development will also need to link to an ordering system. To launch the product, the customer, Thai Express will need to purchase hardware and develop systems to accept orders from the web. The site will also be able to be improved in the future, by touching base with users to see what features may be added, ensuring search engine optimization, and adding additional value to the users.
