Website and Brand Redesign
05/12/2018 - 05/26/2018
Desktop, Mobile Web
Researcher, Wireframing, Visual Design, Brand Development
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.
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
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.
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:
Small filipino bakery with over 20 years of restaurant success
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.
Lots of return customers from their restaurant business
Increase in interest of non-filipino customers due to new location
Wants to sell more hopia online
Wants to become a staple of filipino-american cuisine
Wants customers to easily order specific items from specific locations
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.
With a solid interview and some scrappy research about the industry, we created the above preliminary personas to help find interview participants.
John Snow - Knows nothing about filipino culture, but has an open mind towards trying new cuisine.
Jesse Vin - A big fan of the previous business who frequently orders catering for his family events
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:
Customer of the previous business (2)
Saw a post about the grand opening through social media (4)
Yelp said it was Hot & New (3)
Walking by and noticed a new place (1)
What were they buying?
Shaved snow halo-halo // The previous business provided Ube, a flavor particularly sought out by this customer
2 Dozen mixed Hopia; 2 Lunch Plates // Purchasing a dozen for themselves and a dozen for their family members; to have lunch.
6 single Hopia // tried one hopia
“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/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:
I need to ship this somewhere
I’m in a hurry so i’d like to place an order for pickup.
I have an event that I need to order food for.
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.
Navigation was the first element we tackled. We used card sorting to make sense of the information architecture and through user testing found that changing the menu title from "Food" to "Order" was more understandable. Some users' first thought was to go through the "Food" menu for Catering inquiries.
Instead, we went with "Order" for any possible purchases which included, "Shipping", "Pickup/Delivery", and "Catering". The "menu" was moved to the "Learn" menu and changed to "Our Food".
We'd refer to our personas and storyboards to conclude that the initial impression should be educational. It also had to be subtle so that seasoned visitors would not feel excluded.
We knew that we wanted to provide a definition of hopia from the beginning, but how we'd present that was less clear. As we progressed, the feedback from user tests revealed that the definition was extremely helpful for newbies and welcomed by repeat customers.
Right below the hero image, we originally had "Ways to Order"; however, we relocated it, instead, to above the hero image in the form of links. We were able to provide a much larger image of the hopia without sacrificing visibility on how to order.
I worked with the same developer that had already built the original Hopia Like it website. With over 30 screens finished, I sent them over using Zeplin. We communicated quicker than what he was normally used to, and I was able to save Hopia Like It! some money as developer fees were significantly reduced due to the provided wireframes.
There are still many parts of the website that could be improved, but the ultimate goal of the redesign was to increase sales and awareness. Since I last checked, sales have doubled and the bounce rate has also decreased so thus far it's a success!