uDine

Catering to the needs of spontaneous foodies by providing them with a 2-hour meal kit delivery service.

How it works section preview
timeline

1 week

MY roles

UX/UI Designer, Interaction Designer

In a nutshell..

Uneager for uDine to be a yet another meal kit delivery service, I scrutinized the research findings handed to me in order to find a unique touch that this company could offer. I worked up a simple and intuitive user flow and spiced it up with rich and interactive visuals.

the challenge

I looked into the business goals..

Being a food enthusiast, the company owner set out to reshape the way New Yorkers dine. However, with all the emerging meal kit delivery and grocery delivery services, he wasn't sure how to beat the competition.

..and scrutinized the research findings.

Looking over survey and interview reports, I started to get a sense of what direction to go.

the process

Synthesis

✓ Empathy map

✓ Problem Statement

Ideation

✓ Focus Areas

✓ Mid-Fidelity flow

✓ Usability Testing

UI Design

✓ Brand Assets

✓ Custom Signature Icons

✓ Hi-Fi Prototype

Animation

✓ Hero Carousel

✓ How It Works Section

✓ Specials Section

the synthesis

In an effort to empathize, I found gold.

A quick empathy mapping exercise lead to a few helpful findings.

  • There's a market opportunity for fast meal kit delivery
  • It can be achieved by offering a daily menu
  • The landing page would have to be highly interactive to catch attention
  • 100% of users are looking for pricing info
  • Initial discount could be a nice incentive
  • Most foodies interviewed were using the office computers to order food, so we'd start with a web app.
affinity map

Problem Statement

HOW MIGHT WE help busy foodies cook healthy meals without planning too far ahead?

ideation

I outlined the key areas..

Hero

✓ CTA

How It Works

✓ Visualized process

Menu

✓ Options

Testimonials

✓ Ratings & reviews

..and defined a simple flow

Mid-fidelity prototype, user flow

I added a secondary CTA upon testing.

Usability sessions revealed that the users who skipped the above-the-fold CTA and went onto the How It Works section were undecided on whether to go back or keep on scrolling. The solution was to add a secondary CTA into the How It Works section. I addressed this in the hi-fi prototype.

UI design

I worked up a few things to make the landing page stand out.

  • Designed the logo
  • Crafted a set of descriptive icons
  • Used eye-catching rich imagery
Hi-fidelity prototype preview
best part

I started the interaction with an out-of-the box (pun intended) hero area.

Moved on to my favorite part of the whole process.

I animated the icons in the How It Works section.

Last but not least - the shopping itself.

This last interaction features clicking on the product tile in order to view details.

the handoff

Putting it all together

I annotated the hi-fi landing page prototype and handed it off to the developer, together with the .aep files.

Future Considerations

  • Market analysis to better understand the needs, assumptions and behaviors of the foodies
  • Establish a way for comparing meals
  • Exploring the timing options for orders
  • Researching if mobile app is needed

Let's work together!

I'm open to new design projects and I'm always excited to take on new challenges, so do not hesitate to reach out to me directly.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.