Role
UX & UI Design / Branding
Team
Responsive Website
Solo project
Duration
80 hours
Tools
Figma / Figjam
Google Forms
Overview
Project Background
A cafe that is well known to locals of Chinatown
Silk Road Cafe is a business that has been located in the heart of Chinatown in New York City for over a decade. It is a casual coffeehouse with a social vibe that offers light bites and various drinks. It is a great spot for both locals and tourists to enjoy food and drinks. Community and game events are also held here.
Problem Statement
A small business that has been affected by COVID-19
Silk Road Cafe is a great spot that I have gone to a couple of times to do work and hang out with friends. I noticed their current website has not been updated for years. With the rise in social media and online platforms, some argue that having a website for your business is standard nowadays, so I reached out to the owner Terry about creating an updated website for the cafe. He expressed his gratitude and interest in the project, so we set up a meeting to discuss the project goals.
Like other small businesses that relied on tourists and locals in NYC, its sales have been negatively affected by COVID-19.
As foot traffic was slowly picking up again, they wanted to improve their online presence and update their website to bring in more customers. We determined the priority was to create a site that allows customers to view the menu, as well as register or schedule events at the cafe.
"
How might we create a seamless online experience to showcase SRC's menu and other features to attract prospective customers and increase online engagement?
"
Solution
Website design: A responsive website to enhance online presence and streamline event registrations
Silk Road Cafe's new responsive website aims to encourage customers to visit the cafe and improve online presence
Overviewing Homepage
-
View important aspects of the website at a glance on the homepage
-
CTA for viewing the menu
-
Easy access to contact information on the header and footer of the page
-
Preview and shortcut to register for upcoming events
Research
Secondary Research
A majority of people view menus online before dining out
Insights from the secondary research showed the relevancy of having a functional website for businesses, as many use the internet to look for menus online or for places to go to based on their current location. It also sheds light on the increased use of online menus post-onset of COVID-19 due to efforts to minimize contact.
Competitive Analysis
Many competitors lacked a clear call to action
For the competitive analysis, I chose businesses that are also located in Lower Manhattan because most of the business Silk Road Cafe gets is from foot traffic. Direct competitors were businesses that provide drinks/food as well as event spaces, whereas indirect competitors only provided one of these services.
Through my analysis, I found that the common strengths of these competitors' websites are straightforward information, simple information architecture, and clear branding/themes. Some common weaknesses are unclear or lack of CTA, inconsistent design, and poor image choice or descriptions.
User Surveys
Most people go to cafes for the food and drinks
Since cafes are such a common place people go to, I decided to conduct user surveys with 20 participants within the target demographic (age 20-30s) to gauge a general idea of the motivations to go to a cafe and to go on a cafe's website.
The main insights from the results show that 55% of participants go to cafes primarily for food and drinks and 45% of participants visit the websites of cafes or similar businesses to see the menu. A common reason to not visit a business's website is due to the availability of other resources such as Yelp or Google. Overall, the participants deemed the menu as the most important information on a cafe's website, followed by its address and hours.
User Interviews
Users are more likely to be vulnerable and share if it is reciprocated
I then conducted user interviews with 4 participants who are within the target demographic and go to cafes at least once a month. I wanted to gauge their experiences with websites of cafes or similar businesses, specifically about what they usually look for and any frustrations that occurred. Some questions I asked were:
-
Can you tell me about your experiences with finding websites for food or drink businesses?
-
What do you usually look for first when you’re on the website?
-
How do you go about choosing which business to go to?
-
Tell me about a frustrating time when you were on a cafe or similar business’s website
Main Insights
All participants valued user-friendly designs, easy navigation, and professional-looking websites. Since the participants go to cafes for pleasure or work, they need to have easy access to necessary information, such as hours, location, menu, ambiance, prices, and seating. However, none of the participants usually look at these business websites to look at or book events. Some common pain points were minimal effort, lack of information, and poor design.
Define
User Persona
Most users go to cafes for work or pleasure purposes
Based on the patterns from my research, I was able to create 3 personas. Anna S. (below) represents a worker persona who frequents cafes as a place to do work. Another persona is Zac E., who represents a tourist persona that goes to cafes for a quick drink or bite. Lastly, Hilary C. represents a social persona, who goes to cafes for social or pleasure purposes.
Site Map and Flows
The goal is to create a site that is easy to navigate so that information is convenient to find
Going off what was learned in the research process, I wanted to design a user-friendly website, with all the pertinent information available and easy to find. After discussing with Terry, he did not want to implement online orders as they are not staffed nor tech-savvy enough to handle that as of right now.
The main tasks of the MVP would be to explore the menu and register for events. As of now, Terry takes phone calls or uses other manual methods to intake registration or sign-ups for events. With the registration online, he hopes this process will become more efficient.
Design
Low and Mid Fidelity Wireframes
Starting with brainstorming for layouts and different sections to include in the design based on the site map, I chose the best-fitting layouts to put together a rough draft of the pages before creating them in Figma. I wanted to create a homepage that gives a preview of different features of the website as users scroll down. Based on the research and the client's requests, the menu is one of the most important features of the website so it is the CTA in the hero section.
Branding and UI Design
Silk Road Cafe gives off authentic, traditional, and cozy vibes so I wanted to capture that in the branding and UI design. I drew inspiration for the color palette based on the atmosphere and furniture of the cafe itself. There are a lot of traditional Chinese decorations in the cafe, which inspired the patterns and elements used in the background of the pages. As for the logo, Terry expressed how the cafe has its current logo printed on its door so we decided it would be best to keep it as is. With the bilingual community in mind, we decided it would be best to include both English and Chinese on the menu, as that is the main feature of the site.
Usability Testing and Iterations
A website is just one part of the solution
Usability testing was conducted with 4 participants (ages 18-32) via synchronous moderated remote testing with a high-fidelity prototype of Silk Road Cafe. Participants were given 2 scenarios with these objectives:
-
To view the menu, find out about the cafe, and find the contact information
-
To browse for events and register for one
All participants thought the tasks were easy to complete, leading to a 100% test completion rate. However, only 50% of participants expressed interest in visiting the cafe based on the website and cafe offerings. The other half thought the site was attractive, but were hesitant to visit based on what was offered on the menu and the ambiance of the cafe.
With the test results, I created an affinity map to reveal the successes, pain points, and suggestions given by participants regarding the pages encountered during the process. I further categorized the data into whether it pertained to the content/design, perception, or flow.
Using the affinity map above, it was determined that common issues that came up during the testing involved content, consistency, and UI components. Based on the results, changes were made for the following:
Final Screens
Silk Road Cafe Pages
Reflection
Challenges
I felt grateful when Terry allowed me to do my project for Silk Road Cafe. I felt a sense of pride knowing that I was helping a small business in a neighborhood that is very close to my heart. Unfortunately, halfway through the process, Terry and another co-owner became too busy and was unable to further collaborate on the project with me. This led to challenges in gathering content necessary for the site, such as detailed information about the cafe, and removed the experience to work with a client from start to finish.
Another challenge was limited resources in content to be used for the site. There were no professional photos available of the cafe or its products, which hindered the possibility of increasing the professional quality and cohesiveness of the brand.
Final Thoughts
Despite the challenges, I tried my best to make a user-friendly responsive website for Silk Road Cafe. Understandably, a small business may not have professional resources available, especially if it is more traditional and primarily rely on foot traffic for the business. I am still extremely grateful to be able to work on this project and hope to use my design to create a functioning website for the cafe when given the opportunity to do so.
Next Steps
If given the opportunity, I would love to work on:
-
Check-out process: although this is not a feasible feature to be implemented for Silk Road Cafe right now, I believe it would be a good experience to include on the site for seamless online ordering as the menu is already on the site.
-
Images: having more cohesive images for the website would add to the brand image and online presence of the cafe. The stock images are okay, but it would be best if the images used are more personalized to the business
-
Design: I believe the design right now is true to the nature of the cafe, but there is always room for improvement. I would make the design look cleaner and slightly more modern to draw more users' attention.