YIP Hauz Cafe.

SUMMARY

Why: Is it a problem worth solving, can it be solved, and is there a market for it?

YIP Hauz Cafe was founded in 2016 with a mission to introduce unique local taste gelato at an affordable price. They sell different food and snacks with a focus on their amazing gelato. They do not have a website and have been using Instagram to showcase and reach out to the market. Gofood and Grabfood are used as their delivery platforms. With the limited functionality of the social media platform, they could not organize reservations, events, or online orders automatically and had to do those via direct messages. As a growing business, online orders, reservation booking systems, and an e-commerce storefront would help them expand their business. The addressable market is broad, and users demand online food orders to be easily used yet affordable.

How: build, measure, learn.

• Talking to the cafe owner to gain insights into their goals and understand their pain points. Their primary problem is that the online order through 3rd party costs them less profit. They hope they can reduce this cost by having direct online orders from their own website.

• Using primary and secondary research, I identified critical problems and created a responsive website that (1) made direct online orders easy for users with a smooth payment process and (2) showed credible reviews in one section to gain online trust in the market.

• After a discussion with the stakeholder, we prioritized the MVP for the home screen, online order, menu page with details, pictures, prices, payment process, and review section based on the project timeline.

• I sketched a few possible solutions for IA based on what is familiar and most effective from competitor sites. Moderated usability testing via Zoom was conducted, giving valuable insights into some details I missed.

Results

After the creation of the responsive website, I observed improvements in the following:

• The average time of online orders via the website with an easy payment process

• Greater number of potential users

• Ability to check credible reviews from the website

• Clear view of updated promotions and upcoming events

• Clear address that connected to Google Maps with shop opening hours

Key learning points.

• There were many metrics we could consider during the development - online order flows, various payment methods, account registrations, reviews on the website, etc.

• As this project has time limitations, the main learnings were that I did user research diligently and found various valid data. I learned how to use collected data properly and apply them to ideation with the best UI result.

• The areas I need to work on are controlling my calm with overload research findings and trying to prioritize essential points without being too idealist. I also learned to be open and flexible to the outcomes without bias.

Preview of Features

The prototype was based on Macbook Pro 14”

1. RESEARCH

Indonesia's F&B (Food and Beverage) market is challenging and competitive, but it has enormous potential. Hence it is vital to understand the target market and use the best approach to thrive.

I checked Google reviews of some feedback from customers. YIP has excellent feedback online, even without a website, so I believe that YIP can grow tremendously if they have a digital platform to reach a broader market.

Competitive Analysis

Competitors were chosen based on similarities between the target market and the business presence of local cafes in Bandung. I saw that some cafes have weaknesses, such as their websites are not user-friendly, not responsive, and not connected to social media. They have difficulty knowing promotions or contacting the business if they have inquiries. This helped me identify their patterns and to see opportunities for the YIP website.

The main findings from my competitive analysis include the following:

1. Not every competitor has a website.

2. But if they do, they have basic information: Menu, About, Location, and Hours of Operation.

3. Every competitor engaged with 3rd party online delivery companies or used Whatsapp for online orders.

4. Every competitor has an Instagram account with attractive pictures.

5. Some competitors sell a variety of food and drinks apart from dessert and gelato.

6. Most of the competitors have a cheerful brand image.

Stakeholder Chat.

To understand the problem and find the best solution, I called the YIP Hauz Cafe owner before I did the User Interview. Click here for more details. Some essential points are:

User Interviews

I conducted Interviews to empathize with customers regarding online food orders. I was able to complete a successful Zoom interview with this interview guide involving 6 participants around 25-43 years from Bandung, Indonesia, with four males and two females. The following are my findings uncovering their motivations, wants, and needs.

2. DEFINE

Affinity Map

I created an affinity map to acknowledge and target the participants' goals, motivations, needs, and pains. I understand that the needs of everyone can be different. Taking notes and digging more profound during the interview gave me valuable insight into essential points for local market users. Some participants loved online orders after Covid-19 happened, while some still preferred to enjoy the food with the cafe's ambiance in person. But the market is moving toward online orders because YIP cafe owner said that their business has decreased tremendously since the pandemic. Below I gathered valuable insights from the interviews and clarified their expectations for the YIP website.

Persona

After reviewing and summarizing the interview results, I created a persona to guide me, relate to what the user thinks and feels, and help me make the Site Map and User Flow for the website. Focusing on online food orders and payment processes for this project, I created Mawar as a relatable persona. Mawar is a professional who works in a big city and loves to eat and try new food with friends. She also enjoys the convenience of ordering food and drinks online.

Project Goals

I created a Project Goals Map of the business, user, and technical sides. This gave me a clear idea of what to focus on on the YIP Cafe website at a high level.

3. IDEATE

Site Map

After understanding the Project Goals, I could start to map out what pages and features are necessary. I did some sketches while referring to various F&B websites around. However, I focused on what is essential to create for YIP for now. It should be a solid base to develop further later on. I made the main home page focusing on online orders. Still, because I received some insights from the Interviews about promotion, menu, reservation, address and opening hour, and customer reviews, I considered those and placed them all on the home page.

User Flow

I imagined myself as Mawar ordering food online via the YIP Hauz Website. I made different flows, but some of them were not that simple and I believe the most effective and straightforward way is the best approach, especially for hungry users ;) Instagram in Indonesia has huge users, so starting the flow from social media makes sense here because it lures potential customers to the YIP website.

Low-fi Wireframes

While referring to the site map, I sketched some wireframes. I made two options for the home page because I like both layouts, but I made some changes here and there after getting feedback from people. I tried to make four main screens: the home page was created to be easy to use with online order CTA in the hero section, promotion below it, a gallery for the ambiance of the cafe and review section, a pop-up box for pick-up or delivery to provide options of delivery method and address, delivery menu page with pictures and detail of the menu, and check out page in one page to see in brief how many steps users need to finish the process. The sketches were based on a combination of patterns I observed from the best cafe websites on the internet and Pinterest. One interesting thing is that many websites use the pop-up box as the opening, and later I realized that many users dislike it.

Mid-fi Wireframes

Referencing the sketches and considering possible alternatives, I created a mid-fidelity design. The wireframes included the Home Page, Menu Page, Pop-up Box for Delivery Page, Detail Menu Page, and Checkout Page. I created two home pages and asked for feedback from people. They gave valuable insights, and I realized that the best is to combine both options for a better user experience. I created mobile wireframes and tried to give the same experience with a desktop view. I want to provide precise detail on mobile view while not missing any element.

Moodboard & UI Kit

Next, I created a mood board for design inspiration together with UI Kit. During this phase, I discussed and asked the owner what direction and inspiration they like to have. I consider their request to have a neutral and inviting image with primary green as the main vocal color. Green also conveys stability, endurance, and approachability. I chose the combination of Playfair display and Avenir fonts because they are easy to read, considering some target markets can also be from the older generation.

4. PROTOTYPE & TEST

Responsive Prototype

I created Hi-Fi Wireframes while remembering the flow, the goal, and the essential points without making them too complicated, clear with fewer clicks, and keeping it simple. I want to promote online ordering as the vocal point, which will boost YIP Hauz business. I made some iterations for the Home page. For the first version, people said it was not attractive, the color was too soft, the color contrast between background and text was not that great, the menu section was quite stale and not inviting, and the review section was a bit vague. After two iterations, I was happy with how it looked and received great feedback. Even though it is a lot of work but I am open to any feedback to improve the User Experience. I believe it is necessary to focus on the user to build the best platform. After some fruitful feedback and numerous iterations, below is the result.

Usability Test

I tried to recruit a wide range of participants within YIP target market to bring various insights into my design iterations. I have recruited 5 participants who align with my provisional persona from both genders. Different participants were chosen than my first interview to gain more insights from different perspectives. I conducted a remote test via Zoom. View Usability Test Planning

The goals for the usability testing:

1. To evaluate how good is the usability rate of the YIP cafe website ( if users can navigate everything smoothly).

2. To understand the potential pain points of users during the task.

3. To see what users think of the website's overall design. Is that attractive and engaging them to order online?

4. Define whether the checkout and payment process are smooth and clear.

Usability Testing Summary

The usability testing and the prototype were successful, with a 100 % completion rate with minimum delay or confusion to finish the tasks. They like the overall design and flow; I have gathered the priority iterations note. Check the full report of User Testing Findings here.

Priority Revisions

After learning the pain points and feedback from users, I made the necessary changes to the prototype.

The Final Product

After the iterations, the responsive website project is completed!

5. REFLECTIONS

What I learned

• Always ask “WHY” before sketching and designing

• Business Knowledge : I learned deeper about the F&B Industry ( Food & Beverages Industry ) and the possibility of utilizing digital technology for customers’ convenience. It is challenging for local businesses to compete with big chains that can afford more expensive apps with massive promotions and offers.

• Iterating: I learned to be more open and flexible with feedback and iteration. I should focus on the overall user experience.

• Time Management: I realized that sticking with the timeline is essential, but learning to let go and deliver a minimum viable product (MVP) is part of being a UX Designer.

Challenges I faced

• I started this YIP Cafe Website project with the full awareness that Bandung, Indonesia, has a different time zone from the US. It created complications with planning interviews and usability tests because I needed to adjust to participants’ and stakeholders' time zone. However, I tried to approach them in advance and followed up with some texts that helped me solve this problem.

• When I approached YIP Cafe's owner, they were hesitant to make a website because they were scared of the high cost. However, after some discussion and understanding of their worries, I convinced them to start with the research, and she was excited about the findings. I was surprised that the market demand for in-house online orders was not high because it is cheaper than online food delivery apps.

• Understanding that I need to empathize with the client, sometimes it is complex when I have done the UI based on the chosen inspiration from stakeholders, but they changed their mind while I had my deadline to meet. But the moment I realized that is for the best result for stakeholder and users, it was much less stressful, and I could perform better.