graze tlv

Website Design and Social Media Branding

CHALLENGE

Graze TLV makes curated grazing tables using the finest of products from local farmers, artisans and gourmet suppliers. They aim to provide their customers with show-stopping products that are just as much a piece of art as it is delicious.
With the ever-changing times in this COVID-19 time period, they are seeking to widen their available products. For example, they recently came out with graze boards, which are made to deliver and are perfect for small events, birthdays, date-night with a loved one, or a pampering pick-me-up.
Graze is a fairly new business and has been reaching clients via word of mouth and social media, and wishes to have a responsive website that displays their brand, as well as allows potential and returning customers to order directly online.

Solution

Design a responsive site that allows customers to purchase Graze products online.

Overview

Client: Graze TLV
Project type: Web design and branding
My Role: User Research, Strategy, Interaction Design, UI Design, Branding, Prototyping, Usability Testing
‍Tools Used: Sketch, Photoshop, InVision, WebFlow

design process

RESEARCH
DEFINE
IDEATE
PROTOTYPE
TEST

Research

REsearch goals

I began the process with research goals to: identify and analyze Graze's competitors in order to gain a better understanding of the graze table industry, and uncover gaps among existing vendors.
‍
I also sought to discover how COVID-19 times has changed people's ways of celebrating special occasions.

RESEARCH COMPONENTS

  • Market research
  • Competitor analysis
  • User surveys
  • User interviews

Research Plan

The Research Plan was created in order to help define the target market and to discover people's behaviors in both purchasing specialty food gifts, along with how they have altered their ways in celebrations during this social-isolating time period.

SECONDARY RESEARcH

I first conducted secondary research to gain a better understanding of other graze and charcuterie businesses, existing services and the market space.
Click to view the research plan

MARKET RESEARCH

I began my research by delving into learning about and understanding the graze and event table market and Graze's target clientele.

COMPETITIVE ANALYSIS

Afterwards, I conducted a competitive analysis of similar vendors, both in and out of Israel. To the best of my knowledge (and my client's), upon starting this project there was no local (Israeli) vendor that provides what Graze TLV does.
The strengths identified across the various platforms included:
Opportunities discovered based on my competitor analysis:

Primary Research

To better understand the pain points and goals of those who use gift delivery services and other parts of my research questions that the secondary research was unable to answer, I developed an interview script and conducted user interviews with participants both in-person and over the phone.
“When I order, the most important thing for me, is that I don’t want it to be a surprise - I want to know what it’s going to look like. A lot of times, you see photos that don’t represent what the [gift] will look like, so that is really important to me."
I also created and distributed a questionnaire to 48 participants via social media networks (Slack, Facebook, Whatsapp).

QUALITATIVE TAKEAWAYS from questionnaire and interviews

  • When purchasing gift packages, people shop almost entire visually.
  • Delivery availability for specific dates is critical.
  • People like personal recommendations from friends and figures they trust
  • Users expressed concern for safety and hygiene protocol during COVID-19 times
  • Most often order baked goods, fresh fruits, flowers when ordering deliverable gifts
RESEARCH
DEFINE
IDEATE
PROTOTYPE
TEST

Define

Empathy and PERSONA DEVELOPMENT

After going through my interview transcripts and identifying behavior and need patterns, research was synthesized into a set of deliverables, to guide me in keeping the users as a priority in the  design process.

In order to understand my key users better, I created two personas and empathy map.
I created the persona, Lauren, using my research, namely that from the 1:1 interviews.
Click to enlarge the persona
To further explore relationships and develop the persona that emerged from the data I’d gathered and mapped, I created an empathy map made up of observations and statements from my user interviews and diving deeper into Lindsay's mindset.  This helped me further understand the emotional state of the user.
Click to enlarge the empathy map
These deliverables served as a continuous reminder of the characteristics of the kind of people who may visit Graze throughout the design process and made it especially helpful for designing with a "real user" in mind.
RESEARCH
DEFINE
IDEATE
PROTOTYPE
TEST

Ideate

SITE MAP

Now that I had a better understanding of our users and really honed in on the specific pain points, it was time to focus on creating solutions. In order to start working towards solution-focused designs, I developed a site map to solidify the organization of pages within the site, whilst referring to my research takeaways.

USER FLOW

Using the sitemap, research findings and developed persona, I was then able to chart a user flow. The flow below shows several main paths for a user:
Click to enlarge the user flow

WIREFRAMES

I took to pen and paper to start with hand sketching to wireframe key pages informed by my task flows. In these initial sketches, I was able to quickly brainstorm and come up with alternate ideas, building on each of them in order to move on to mid-fidelity sketching. During my research, I found that a common pain point for users was when images were misrepresentative of how they actually look. I therefore included sketched the product pages including alternate views of the products, also including a disclaimer that products are dependent on seasonal availability.
Click to enlarge the low-fi sketches
I then moved to Sketch to create mid-fidelity wirefram. I created a mid-fidelity desktop prototype of the main user flow using InVision. This enabled me to visualize the early designs more concretely, see how the interactions flowed, and to be able to have users test it out. After receiving feedback and implementing changes to the wireframes, I moved on to the visual design phase.

VISUAL DESIGN

Click here to skip to the final product
UI KIT
The client had a logo which she was keen to keep, so I made some minor edits to ensure that it was readable for various screen sizes.
Bohemian, Anthropologie, Light, Airy: These are the words my client used to describe her product. Additionally, she pointed out some brands she admires. I put together a mood board and shared it with her to help guide us.

Keeping in mind that the photography should take the stage, I designed a clean and minimal interface with subtle flares of light and pastel colors in the UI elements. I also referred back to my research, and users expressing the importance of photos being true to real products, I kept this in mind for the UI of the product pages, including a variety of photos, implementing a consistent hue using Adobe Lightroom Mobile.
I also designed branding for Graze's social media platforms, utilizing a more extensive color palette for social media posts and story highlights on the company's Instagram page.
RESEARCH
DEFINE
IDEATE
PROTOTYPE
TEST

Prototype

Due to the budget of the scope of this project, the client was unable to hire a developer. Instead, I developed the site using Webflow. I incorporated some of the branding and UI into the wireframes, making significant revisions based on feedback and testing. I then implemented this and more into Webflow so I could best understand any constraints.
Samples of the screens can be explored further via the prototype
RESEARCH
DEFINE
IDEATE
PROTOTYPE
TEST

Test

USABILITY TESTING

overview & Goals
I tested the usability of the main user flow using the high-fidelity desktop prototype.  My main goals were to:
I had users conduct 4 different tasks:
  1. You can’t decide what to get your friend for her birthday so wish to order them a gift card so they can choose what they like. Please add a 200 NIS gift card to your cart.
  2. You are in search of a gift platter for your friend’s birthday and have been recommended Graze TLV.  Your friend is obsessed with cookies and you’ve heard ravings about Graze’s edible flower cookies. Add a box of these cookies to your cart and schedule delivery accordingly.
KEY FINDINGS
My analysis via the affinity map below focuses on patters, wins, pain points and next steps of the four participants that conducted usability testing.
Insights
Recommendations

Reflections & Looking Ahead

Designing the Graze Tel Aviv's website was a very rewarding and challenging experience. It gave me the opportunity to design and develop a responsive site from start to finish. It also challenged me to deliver within the client's budget, needs and timeline, using Webflow as a tool. With a greater budget, we would have been able to hire a developer to fully implement all designs from the wireframes as well as customize some UI elements that go beyond Webflow's customizability. 

Other areas for exploration include:

see more of my work

MIRROR

An e-commerce site

TAL TOURS

A redesign for a boutique travel agency

Netflix

Adding a feature to an existing app
© 2022 Adina Katz