GRAZE htx
Website Redesign
Role: UI/UX Designer — Timeline: 2 months
About
Picture from GRAZE htx website
A charcuterie board - an assortment of cold cuts, cheeses, artisan crackers, olives, nuts, spreads, fruits that is artfully arranged on a wooden board - has been a go-to finger food among my millennial friend group, who grew up eating lunchables. We became experts at making it over time so we (half-jokingly) thought about starting a business together and did a competitive market research. During our research, I came across this local charcuterie board business called GRAZE htx and had a strong desire to re-evaluate the user experience and redesign their current website.
Project Overview
A charcuterie board has gained its popularity in recent times, as it is eye-catching and opens the door for interesting conversations. Many people say they want to try it but do not know how to put together or find time to make it in their busy schedules. There are businesses that help bringing this to the table, and GRAZE htx is one of them.
The purpose of this redesign project was to improve customer satisfaction and loyalty through the utility, ease of use, and pleasure provided in interaction with a website. The scope of the project was to identify the pain points experienced by potential users and provide a suitable solution based on research and experience.
Note: I wasn’t hired for this project. This is only a concept project, designed by me to exercise my UI/UX design skill.
Current website created by the owner in 2019
Research & Insight
Target Users
A hyper-specific focus group of this user research was millennials who are hyped about charcuterie boards and interested in using this service.
Pain Points
When you browse the website, it is apparent that the current website is outdated and needs a major visual refresh, visual hierarchy, brand identity, consistency throughout the website, and usability improvement.
In order to evaluate the user experience part of the website, I conducted user interviews with 7 potential customers and learned what their pain points are while interacting with the current website.
Pain Point 1: It does not reflect what is seen on the Instagram page thus a bit skeptical to order.
Pain Point 2: Inconvenient to navigate from page to page using the laggy hamburger menu.
Pain Point 3: Hard to discern and make decisions without any visible customer reviews.
Pain Point 4: The website is not mobile-friendly.
Competitive Analysis
After validating and understanding the prospect users’ pain points and needs, I performed a competitive analysis to asses where the product or design of GRAZE stands in the market and identify the strengths and weaknesses of the direct competitors - local charcuterie board businesses based in Houston, TX.
Competitor 1: Eat Pray Charcuterie
Competitor 2: Grazeables
Competitor 3: Cultured Boards
Competitor 4: Legendairy Katy
Conclusion - While GRAZE htx provides quality products and attract customers through consistent and active social media postings, the actual ordering website lacked the overall user experience and usability compared to its competitors.
Define
Goals
Improve the overall user interface and branding
User Problem: I want to see clearly defined brand identity and high-quality pictures throughout the website.
Observation: Inconsistent UI elements and low-resolution images can cause a loss of trust and drive users away. There is no clear CTA and hierarchy.
Hypothesis: Incorporating high-resolution images, clear CTA and visual hierarchy, and redefining the brand with consistent UI elements will give more professional and trusted look to the users.
Design a better navigation
User Problem: I want to navigate from page to page without hassle, but it takes two-clicks every time.
Observation: While the hamburger menu takes up less space and removes distractions, the loading time and one extra click can frustrate the users.
Hypothesis: By replacing the hamburger menu with a standard navigation bar on top to optimize the speed and load times of the interaction, the users would be able to conveniently navigate from section to section with only one-click.
Add social proof
User Problem: I want to make decisions based on the customer reviews, but I can’t seem to find any.
Observation: There is no review section on the site.
Hypothesis: Adding testimonials will affirm the value of a product/service and influence the user’s decision.
Incorporate adaptive design
User Problem: I want to browse the website on my phone, but some of the contents get cut off.
Observation: The current website is not well optimized for mobile screens, which gives the users hard time to read and miss important content - this could affect bounce rate.
Hypothesis: Making the website mobile-friendly will provide more seamless user experience.
Ideate
Information Architecture
In order to provide easy navigation and seamless user experience for the users while they browse the business website, I reorganized and restructured their short content multiple-page website into a single-page marketing website as follows:
Low-Fidelity Wireframes
Based on all the insights collected from different research methods, I mapped out the content and layout of the new single page marketing website on my notebook.
Mid-Fidelity Wireframes
After sketching out the low-fidelity wireframes on my notebook, I created the following mid-fidelity wireframes using Figma to give more accurate depictions of the layout and detail around how things will look and work.
User Flow
I created the following user flow to show a visual representation of how the product will flow when using this new single page website. (Note: Due to the lengthiness of a single page website, it is broken into three sections - makes it easy to see the whole flow)
Moodboard
When the wireframes were tested and finalized, I created a moodboard to explore all the ideas and possibilities of the visual direction. I believed that the colors used (picked by the owner) in the current website represented the brand so having that as constraint I used the same color palettes and assigned each with a clear visual hierarchy: yale blue (primary), hunter green (primary), orange (secondary), and black/off-white (tertiary).
Style Guide
After creating a moodboard, I made a style guide to document all the fonts, colors, buttons, and icons that will be included in the newly designed website.
High-Fidelity Wireframes/Mockups
Using the moodboard and style guide that I created, I designed the hi-fi wireframes as shown below. Throughout the process, I made sure the components in the newly designed website matched the potential users’ needs and wants.
Prototype
After I finish creating the mockup, I built clickable desktop and mobile prototypes using Figma. All of the user research participants were satisfied with their experience when they tested out the prototypes and that brought me a huge sense of accomplishment!
Desktop View
Mobile View
Takeaways
Through this project, I learned that:
Having a design system is important because it speeds up the work and creates consistency and harmony within the product and brand.
While it’s valuable to identify what existing users like and dislike about a product, it’s important to collect insights from potential users because they are positively biased.
Potential users can turn into loyal users of your brand if you listen to them.
Collecting insights from both potential and existing customers would have been more affective and helpful in making my design decisions overall.
In order to see what the success look like and to measure it, I need to work directly with the client.
Great experience can build brand advocacy and loyalty.