Hopia Like It! Redesign | A UX/UI Project

The Problem: The current Hopia Like It! website does not align with business goals. The owners want to incorporate online ordering, shipping, and pick up options, while maintaining brand identity. They also want to provide information about what the product is, and increase online ordering conversion rates.

I. Research & Discovery

Stakeholder Meeting

I was fortunate enough to be working alongside Hopia Like It!’s Creative Director, and fellow designer, James Aldrin Mercado. We began by conducting an informal interview, which gave me valuable insight into the bakery’s goals and challenges.

The main goal of the bakery’s website is to increase conversions. The team is very proud that they are able to ship fresh Filipino pastries across the country, so giving that piece of the business the attention it deserved is important to them. They wanted to ensure that they were making it as easy as possible for their customers to order and check-out online.

Another challenge facing the bakery is cultural awareness. For example, hopia (the bakery’s namesake) is very popular within the Filipino community, but is not very well-known in American culture. The bakery wants to expand this awareness, and make Filipino desserts a staple of local American mainstream culture.

After our stakeholder interview, we concluded that increasing online conversion was the ultimate goal, but providing their in-store services such as pickup and delivery was also important. They had not created a visual brand guide, but they did have a high-level identity they wanted to emulate.

Goal for Users: Order more product online. Educate and make hopia popular in American culture.

Competitor Analysis, Heuristic Evaluation & SWOT

To begin understanding the market and business, we conducted a competitor analysis and performed a SWOT evaluation to understand areas of opportunity.

Among their direct competitors, Hopia Like It! is the only bakery shipping fresh pastries across the nation. Closer to home, they will be providing delivery using 3rd party services such as Eat24 and Postmates as well as a pick-up option.

In our Heuristic Evaluation and SWOT analysis, we made note of the current experience’s strengths and weaknesses. Overall, consistency seemed to be a big opportunity. The current process is okay, but the UI left much to be desired.

Current System User Testing

We continued our research by conducting user tests of the current website (on mobile) to get a benchmark of the current experience, and how that played into the business goals.

From this test, we discovered a few high-level insights, as well as many detail-focused insight. Overall, the experience was straightforward — everything that was needed was available from the homepage. The checkout experience was smooth, with a few hiccups and confusing terminology. Nothing was “special or fancy” about the site, which didn’t align with the bakery’s hope to be seen as “fun and punny”.

As far as the education piece goes, the user did not know what hopia was, and went to Google to find out (as opposed to looking on the page). She didn’t realize that the bakery was Filipino-inspired until she went back and read through one of the sections of copy about halfway down the page — the bakery is proud of being a Filipino bakery, and this was lost a bit in translation.

II. Definition of Problem & Personas

Problem Statement

The current Hopia Like It website does not align with business goals. Incorporate online ordering, shipping, and pick up options while maintaining brand identity simultaneously providing information about what the product is and increase conversion.

Proto Personas

After speaking with James and getting insight into the client base, we determined that we would focus on three different proto personas: 1) The “completely new” persona who knew nothing about Filipino culture; 2) The “Filipino community” persona who was searching specifically for Filipino baked goods; and 3) The “return customer” who already has affinity for the bakery itself.

User Interviews

James casually spoke to several customers to find out why they were coming into the bakery/cafe, what they were interested in purchasing, their overall experience, and whether they’d be interested in using the website to place orders as well as ship across the nation.

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

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

Interested in online ordering?

8, yes

2, no

Overall we noticed that customers were visiting the bakery/cafe either because they had thought it was the previous business or they wanted to try something new. We wanted to take this information and translate it to the website redesign by offering the same great customer experience and “clean” look.

Instagram Research

We also conducted some Instagram story surveys to get more information about the “completely new” persona. Specifically, this was in regards to the “education” piece of the problem, as we wanted to get a baseline of knowledge on the bakery’s products. The followers on my Instagram account seemed to generally fit the persona’s demographics, mostly young adults, and mostly not exposed to the Filipino community.

The results from the Instagram story were pretty enlightening. Only 4% knew what “hopia” was, which was significant since it’s in the name of the business. Results were pretty split on the color of the coconut flavor (green is correct), which correlates to a 50/50 Guess distribution. Essentially, the baseline knowledge of important information on the website was low, which meant that we needed to make it more “non-Filipino friendly”, while maintaining cultural integrity.

Question 3 seemed consistent with the first two, as the self-reported baseline was less than 10%. Additionally, affinity to learning more about Filipino cuisine was around 65%, so the desire is there, which validated our theory that education would be an important factor for the “completely new” persona.

James conducted a shorter survey of his followers — which better represents the “Filipino community” persona. Most of his responders knew that was represented in the photo. This showed us that not everyone needed the educational piece, but we concluded that it wouldn’t hurt to have something explaining the product for all users.

User Personas

After doing our research, we realized that, for the purposes of our project, there were only two personas we needed to focus on: the “completely new” persona, and the “Filipino community” persona. The other proto persona we created (“return customer”) would be benefitted by improvements to the other two.

In this iteration, we also looked at James’ current customer data. Currently, most orders come from the “Filipino community” persona, and those mostly happen to be middle-aged females, or “titas” (aunties). The “completely new” persona tended to be younger, so we flipped the age demo in our iteration.

III. Development of Solutions

User Flow

We created a user flow to visualize how our personas would browse the site

While the Noah would more likely want to find out more information about Hopia Like It!, both Noah and Tita Vynessa would eventually converge once they entered their desired menu to add to cart and checkout. For this reason, we wanted to focus on this flow for the rest of the sprint.

Iteration 1

This iteration focused mostly on trying to get the information architecture correct. We used a cardsort to figure out where things should fall in relation to the others. This was a bit of a struggle. One main issue of debate was how to differentiate between the delivery methods (shipping, delivery / courrier [i.e. grubhub], pickup, catering). Ultimately, we decided that, for this project, we’d have catering as a separate tab, and leave the third-party delivery as an “FYI”, but not an actual integration. This allowed us to focus on the bakery’s priority of increasing orders for Pick-Up and Shipping.

Additionally, we attempted to use cards for the menu and the item pages. Feedback from user testing gave us some insight that the card menu was a bit confusing and unexpected. It also let us know that the buttons to add items to the cart were pretty small and close together. It also appeared cluttered.

Style Guide

The Style Guide was iterated throughout the process. Early on, we determined the brand voice to be a “tito” (a Filipino Uncle). He’s someone who has all the puns, and tries to stay young. However, he is also very proud of his Filipino heritage and wants to share that with anyone who will listen.

The visual elements of the style guide had mostly already been established by the bakery. We liked a couple things:

• Logo Mark was simple yet powerful. It pays homage to the hopia’s origin where this literal “good pastry” was given as gift to friends and family.
• Primary Colors were home-y, yet energetic(more on this later)

One slight change was moving away from the black, and toward a brown. This was to give the bakery a warmer feel, and to give the color scheme more cohesion. The black stood out like a sore thumb, as it’s not a very appetizing color in food. Brown, on the other hand, is reminiscent of chocolate, and ingredient used heavily in baked goods; so this was a good compromise to get some dark tones, but to make it more appealing.

Photography

James coordinated the shoot with hisamazing photographer friend, Sam Rebuyaco (check her out) to take new images that aligned more along the brand’s visual identity — warmer colors and detailed images. Overall, we were able to generate over 30GBs of content that will allow Hopia Like It! to use for future website images, social media posts, and print designs.

Iteration 2

This iteration focused more on the UI. Quickly, we determined that, since we are shipping and offering pick-up, we should follow more of a “retail” pattern as opposed to a traditional “food” pattern (Nike vs. Dominoes). This allowed us to focus more on the product itself. The business wanted photography to be a main form of communication for their products (especially since baseline knowledge was low), so we knew that imagery had to be a focal point.

For this prototype, I decided to try my hand at showcasing the interactions, specifically of the menus, using Proto.io. Because there are different menus and categories, we needed a way to easily communicate the differences (shipping vs. pick-up, and the different categories that fall within those). We decided to use a pattern used on the Nike site, which is to have a horizontal scroll for categories. The header would serve as a tab for swapping between the Pick-Up and Shipping profiles.

IV. Next Steps

There is quite a lot of work to do moving forward, since this was only the first sprint of a major website overhaul.

1. User test iteration 2
2. Work on other flows (Catering, Delivery, etc.)
3. Begin mocking up desktop experience
4. Apply style guide to all pages (example below)