Elevating a vibrant brand for inclusivity

Helping all users to experience the unique flavors of Yardy World with simplified work flows and accessible styling

My Role
UX Research, Product Design

Tools used
‍Figma, Notion, Shopify

Duration
‍‍3 Months

An unabridged PresentationLink to figma prototype: desktopLink to figma prototype: Mobile

the client

A Jamaican Flavored Experience
Yardy world was born of Devon Francis' Jamaican inspired cuisine. Under the name, he hosts pop up upscale dinner events, has created content for Bon Appétit, and most recently launched his own line of snacks in a collaboration with hotels in New York.

opportunity

Yardy officially launched online September 2022. Devon Francis sought UX expertise, and I jumped on the project. Yardy has great potential as a small, niche business in NYC, offering a unique blend of culture, content, and products for sale.

problem

How can we attract new customers to Yardy World with a more accessible design system?
Yardy world, an emerging NYC brand, has an issue with accessibility. From colors, fonts, to motion, the user experience was compromised.

"My eye is staring at this huge image, and I want to click on the banner that’s moving, but then I scroll and the first thing I want to click on are the images below."

Solution

Improving accessibility can be a solution to attracting users
  • I updated yardy world’s design system with new color combinations that are up to the Accessibility Guidelines as laid out in the WWAG.
  • I chose a new font that resembled one they used for headings
  • I updated the Information Architecture to help users navigate more intuitively.

↓68%

30 second reduction in the time it took to find a past event

↓10%

decrease in the time it took users to add an item to their cart

↓45%

11 second reduction in the time it took users to find a specific recipe

A softer landing

Responding to user issues with a redesigned landing page
  1. I took the navigation out of the burger menu and put "Shop" first
  2. A value proposition that rotates with the slideshow of images
  3. I kept the scrolling banner, slowed it down, darkened the green, and changed the font to address user's issues with accessibility.

user journey map

Meet Nadia, a potential Yardy fan
When I began looking into Yardy World, I conducted short usability testing interviews with 6 people who fit into their audience. Through my interviews, I observed some common threads in pain points, and opportunities to meet their needs. Nadia represents a typical Yardy World user, and this user journey map conveys a typical user's experience. I overlayed how a redesigned Yardy Map could modify Nadia's emotional curve.
User journey of a customer of Yardy world buying
Key Takeaways
  • Nadia wanted to scroll away from the excessive motion with the video and the scrolling banner
  • The color contrast was hard for people like Nadia regardless of their colorblindness
  • Nadia wanted easier access to the store, and did not like the hamburger menu
  • Nadia was confused about the language about “Upcoming events” vs “Past events”

Information Architecture

Implementing Calls-to-Action
Sitemaps build a shared vocabulary of terms, and demonstrate how information is reorganized be a bit more intuitive.
I brought the Global Navigation out of the Hamburger menu to put "Shop" out in front. I reorganized the "Cook" into one bigger "Recipes" with secondary navigation to break up the categories.

Proposed Sitemap

Original Sitemap

New shop and recipes

Adding categories to assist users and prepare for scale
I created subcategories within the shop, and the recipes, to respond to user's desire for a more clear organizational hierarchy. The new structure also creates a template for Yardy world to expand, and scale up their business. As their business grows and new products emerge, subcategories will help to organize the content in a way that attracts users who are used having these options.

product pages

Interactions for user engagement
On the product pages I designed new buttons that have an interaction that changes color on the hover, and pressing. WCAG recommends using interaction design to inform users of the presence of the button.

reflection

I began this project right after finishing the User Experience Design immersive bootcamp in December 2022. It was a great way to continue practicing the skills I learned in the course, and to experience working on my own on a project.

After presenting the project to Devonn Francis from Yardy World, he loved seeing the research that I presented, and we agreed to revisit the project again in the future and loop in his design and developer team.

Design Systems with an Emerging Magazine:
Pinko Mag
‍→

Creative workflows for a Media Production Portfolio:
Fathead
→