Website and Brand Redesign

Project Timeline

05/12/2018 - 05/26/2018

Platforms

Desktop, Mobile Web

Role

Researcher, Wireframing, Visual Design, Brand Development

Summary

Hopia Like It! a family-owned bakery/cafe with over 20 years of restaurant experience. They specialize in Filipino baked goods and are known for their hopia--a flaky pastry filled with delightful fillings. They want to become a staple in Filipino-American cuisine and ship their fresh goodies across the nation.

Brief

Improve the online customer experience by adding pick-up and delivery options to the website. Create a new brand identity that matches Hopia Like It!'s personality

Introduction

Hopia Like It! is an extension of a family-owned restaurant with over 20 years of experience. The family has expanded to a bakery/cafe in the past year with strong success in a particular product--Hopia. Hopia, the bakery's namesake, is a flaky pastry traditionally given as gifts to friends and family. Our job was to improve the online customer experience by adding pick-up and delivery options to the website. Additionally, create a new brand identity that matches Hopia Like It!'s personality.

Discover

Laying the Groundwork

Before simply sticking components on the current website, we needed to understand what problems they were trying to solve. Why doesn't the current solution already do that?

Understanding Business Perspective

We conducted a stakeholder interview to get an understanding of their perspective in their space:

  1. Small filipino bakery with over 20 years of restaurant success

  2. Hopia, the company’s namesake, is their most popular product--It’s very popular. In fact, they’ve needed to increase production and open a second space in Feb 2018.

  3. Lots of return customers from their restaurant business

  4. Increase in interest of non-filipino customers due to new location

  5. Wants to sell more hopia online

  6. Wants to become a staple of filipino-american cuisine

  7. Wants customers to easily order specific items from specific locations

  8. Wants to incorporate catering orders on the website

Through Google Analytics and Yelp Statistics, we identified that the majority of users were visiting the website via mobile.

At this point, we decided we would design mobile-first and expand to desktop in the next sprint.

 

Proto-Personas

With a solid interview and some scrappy research about the industry, we created the above preliminary personas to help find interview participants.

 

  1. John Snow - Knows nothing about filipino culture, but has an open mind towards trying new cuisine.

  2. Jesse Vin - A big fan of the previous business who frequently orders catering for his family events

  3. Tita Vynessa - An exuberant nurse whose very familiar with filipino culture. Wants to be able to share food with her friends nationwide.

Understanding the Users

We then conducted a non-formal heuristic evaluation on the current website and asked ourselves how it felt to be on the site. Do I know where I am? How do I find their menu? Is it pick up only or can I order online?

We also user tested it.

In short, lots of confusion, unexpected interactions, and failure to complete tasks confirm many of the heuristic failures. Implementing best practices and building the landing page with target audience in mind is key.

For user interviews, I went into the bakery to have conversation that can be summed up below:

 

Reasons for coming in:

  1. Customer of the previous business (2)

  2. Saw a post about the grand opening through social media (4)

  3. Yelp said it was Hot & New (3)

  4. Walking by and noticed a new place (1)

 

What were they buying?

  1. Shaved snow halo-halo // The previous business provided Ube, a flavor particularly sought out by this customer

  2. 2 Dozen mixed Hopia; 2 Lunch Plates // Purchasing a dozen for themselves and a dozen for their family members; to have lunch.

  3. 6 single Hopia // tried one hopia

 

Overall Experience

“It looked totally different a month ago. it’s a cleaner look and [the previous business] had much less space.”

 

Interested in online ordering?

  1. Yes (8)

  2. No (2)

 

8/10 people were visiting the business because it was new. This makes sense since it is a brand new location. 7/10 were visiting the new location because they saw something they were interested in. Because many of the customers felt the overall space was warm and welcoming, we also wanted to translate this to the design of the website.

Understanding the Landscape

To get an idea of how other businesses were achieving similar goals, I took a look at direct and indirect competitors. There were no companies that were shipping fresh pastries across the nation**(this has changed since the time of writing). Along with the SWOT analysis, we identified and confirmed that shipping fresh pastries presents an enormous amount of opportunity for a small business to generate sales.

Putting it all together

For the purposes of the sprint, we wanted to focus on the John Snows (renamed Noah here) and Tita Vynessas. Because although people like Jesse are important, solutions for the aforementioned personas should also be beneficial for everyone else. That is, we were separating people who are familiar with filipino cuisine and those that are not.

The first iteration of the user flow is below.

It’s broken down into 4 different situations--as if the user has landed on the home page:

  1. I need to ship this somewhere

  2. I’m in a hurry so i’d like to place an order for pickup.

  3. I have an event that I need to order food for.

  4. I’m not even sure what Hopia is.

 

Having these situations in mind gave us an idea of what questions might come to the user’s mind. In situation 1, shipping hopia across the nation might have one wondering if the pastries will make it safely; or in 2, “Will my food definitely be ready by the time I get there?” We’d make sure to keep these in mind when making our wireframes.

Wireframe Evolution