Close

Zestly

anti

Portfolio

Heath

hello@harrisonmilne.com

Digital Design

Client Project

Zestly

Research & product design, 2018

Problem

Young people struggle to meet like-minded vegan and vegetarians.

Assumptions

People want to meet others that share vegan and vegetarian lifestyles.

Questions

How do people feel and behave when using online meeting services?
What do people think when using these services?
Why do they use these services?

Solution

A web-app that brings like-minded people together to enjoy great food within their areas while meeting new people that share similar values.

Involvement

Research, Interviews, Data synthesis, Wireframing, Visual Design, Illustration and Motion.

Overview

Zestly is a web app that brings like-minded people living a vegan and vegetarian lifestyle together. It is a place to meet new people, enjoy great food and share their experiences. This project came about when Jonathan felt that it was difficult to meet people living these lifestyles. With this, we sent out a survey that got 500 respondents expressing difficulty in meeting like-minded individuals and groups. This survey resulted in validating our assumptions, so we began digging deeper into what Zestly can offer this community.

Research

Although we initially used surveys to scope possibilities. We organised interviews with people aged between 18 to 25 for a greater understanding of their behaviour with online services such as Tinder, Bumble and Meetups.

These personal conversations with 10 participants accompanied with over 600 responses across two surveys gave us a great understanding of our users. With a large amount of data to sort, I worked with Jonathan to affinity map the interviews then took survey data into consideration to discuss ways of meeting points of friction and desire for our users. Once we had done this we worked together to put these ideas into flows for each section or functionality of our interface.

Interview affinity mapping

Affinity mapping interview findings

Interview affinity mappingInterview affinity mappingInterview affinity mapping

Main user flows determined by research

Home of feasts

The home page was designed for user types that were identified through our interviews. These types are categorised as; The unorganised, the organiser and the organised. With these users identified, I designed sections to help these users based on their style of use.

Whiteboard session
Home of feast wireframing
  1. Unorganised
    A section for feasts happening that day.
    This is to satisfy a user that wants something in the spur of the moment.
  2. Organiser
    A section promoting a local restaurant.
    This is to entice the organiser to start a feast in their area.
  3. Organised
    And finally, a section that displays feasts that are happening in the next 7 days.
    For the user that wants to stay on top of their schedule.
Feast information

For the feast detail page, we decided to keep the info in small digestible sizes with sections displayed in order of importance to our user base. Which is laid out as:

  1. Restaurant and cuisine
  2. Location and distance from the user
  3. Users that are already attending
  4. What makes the restaurant special
  5. What the restaurant offers
  6. Map location including directions and restaurant contact
Interview affinity mapping
Have a feast

Search
To organise a feast, you are faced with a search page. This interaction was designed with search best practices applied. It displays suggestions which are based on previous searches and previously viewed or attended feasts. Then recent searches are displayed for users that are coming back from a previous search.

Options
When searching we considered and observed ways that people decide on a restaurant to visit. This is when we decided to break our restaurant categorisation into three groups. These groups are based on the restaurants name, cuisine and suburb.

Organise
Once the user finds the option that interests them. They can get information about the restaurant such as, what they're know for and where they are located before deciding on a date, time and to publish it to the public.

Interview affinity mapping
Your profile - Hub

Your personal profile is tucked away behind a hub style interface. We decided to go with the profile hub interface because it allows for space to access profile settings, edit profile as well as room for “profile tips & tricks” cards. These cards are displayed with information as a result of our interviews and if taken into consideration by the user, their Zeslty experience will be far more positive.

Interview affinity mapping
Your Profile - Page

Placing constraints on the content in your profile was a consideration that goes much deeper than design aesthetic. From our research, we found that people are more likely to meet you if you have shorter and more creative content about yourself on your profile. This same insight also goes for your profile pictures and Instagram connection. Your chances of getting people to meet increase with 3 or more photos and get much more likely if you have a connected Instagram account which is something our participants would use to prove you’re a real person.

Interview affinity mapping
Increasing the feasts

We included a little quirky optional feature to clear up intentions. The intention of another user is something our participants were all concerned by, so with the power of two little-coloured buttons. We created a section “open to: relationships and friendships”. This decision was made in the hopes that users will all feel more comfortable knowing exactly how the other user feels before attending a feast.

Home of feast wireframing
The identity

Armed with an understanding of our users I was responsible for creating a brand that took its self less seriously. This meant that we wanted to avoid cliches associated with vegan or vegetarian lifestyles. This was something that we discovered to have negative stigmas from our interviews.

For the design of Zestly. We covered the basics along with illustration style and motion.

Whiteboard session
Home of feast wireframing
Whiteboard session
Home of feast wireframing
Illustration process and direction

As part of the visual direction for Zestly, I wanted to incorporate illustrations and motion to improve the experience and inject delight where relevant. Some illustrations include, null states for no feast available, null state for search results and an arriving notification graphic.

Whiteboard session
Home of feast wireframing

Sketches for the "No available feasts" illustration

Interview affinity mapping

Digital progression of the illustration style

Whiteboard session

Null state for search results

Home of feast wireframing

Arriving notification motion illustration

Future considerations

Although the interviews and surveys were insightful and helped guide the design decisions the whole way through the project. There are a few things that I want to reconsider in future projects.

Interviews

  • In future opportunities, the respondents of the interviews should be a little more hyper focused.
  • For this project, we targeted a broader audience and weren’t entirely prepared for what we were faced with in regards to interview guidelines

Surveys
I learnt the importance of piloting a survey with a small sample of participants so that:

  • I get feedback on ambiguous questions and/or answers.
  • Have the chance to edit the questions without skewing end results
  • And perfect the way that the survey is introduced so that people don’t misinterpret the requirements of the survey.

Login flow and it's timing
On review of this project, I have now began to question the effectiveness of the login flow. Login/Sign up functionality is always a grind in a world were we are all used to instant gratification. With further research into this I would be interested in redesigning the login flow and its timing by applying and testing the Fogg Behaviour Model. I believe if tested, the users might be more incline to explore the app and learn about the value it provides before committing.