Published on | Prototyping: From UX to Front End — Medium Mj

Objective: To add a new feature that would increase user engagement with HelloFresh app while keeping the user experience simple, intuitive and engaging.

About the HelloFresh

HelloFresh is an international meal delivery service with a presence in several Western European and North American countries, as well as Australia. The company was founded in 2011 in Berlin.

HelloFresh delivers weekly recipes and fresh ingredients straight to your doorstep, so you can cook delicious, quick, and healthy meals at home.

They have given me a task for adding a new feature to their app for increasing user engagement.

Know more about HelloFresh here http://ift.tt/1kg9GRJ

In today’s growing app economy, user engagement is very important to the success of a business since it helps you to retain your hard-earned users. It is getting more and more apparent that brands need to build long-term customer relationships and hence engaging and retaining customers is top of mind in addition to top of the funnel marketing tactics for acquiring new users. Also it is almost twice as expensive to get a lost user back compared to acquiring a first-time user.

And the new feature is “Food Community”

After getting the task for increasing user engagement of HelloFresh app, I was thinking that how can i add a feature which will not only increase the usability but increase the engagement also to the app. I mean I wanted to add a feature which user can enjoy and keep using for a long time with trust.

I started spending my time to using HelloFresh app and after few minutes i decided to share a recipe with one of my friend, I looked out for the option to share the recipe in the app only but it was showing another platforms to share like Facebook, email, etc. dada! I got the idea! it was the social factor which is missing currently in the app.

Food community

What is food community?

The food community is a social thing which will help our users to interact with other real personality, friends etc. The user can add friends, chat with others, see what others are liking or buying from HelloFresh.

show how many people have performed the action, create expectations or obligations from a real person or friend, or reference a person’s face or name.

This is more marketing than product, but it’s smart to build a social platform into the product.

The idea

The idea is to create something that is fun to engage with to pass the time, freedom to explore more, build a community, and keep interacting with HelloFresh app on a regular basis.

Understanding the problem

To design a solution, you always need to understand the problem first. Although, the task was to add a new feature to increase user engagement with HelloFresh app, it was very essential to research about to keep customers entertained while they wait or searching something relevant.

The users of this era are very smart and they buy things after so many researches and comparisons, and see if the product or plan is popular or not, is anyone else interested in that or not, who else commented or rated that thing etc. All these functions are missing in our current app(HelloFresh).

Few days back i was reading an article about HelloFresh on medium, The user was a very frustrated who wrote this article, you can see his experience here, it also made me feel that why users are writing outside the app or on other platforms it also insults the brand, so by making a community in app only will helpful where all the users can comments about their feelings and emotions.

let’s discuss the things first which we need to include in our app:

elements in our app

Explanation of new features

Comments: Users will be able to comment on plans and recipes in our app, it will make a huge impact to build trust among other users to see how the plan is, they can easily decide which plans they have to buy.
Likes: With the help of likes we can show the users our top selling & popular plans and products.
Recommendation: User can recommend the plans to their friends and loved ones. Anyone can see that how many people recommend a product as well.
Ratings: Ratings are very unique to show the popularity of plans and recipes.
Feeds: Feeds would be posted by the users using our app, they can post how they made a recipe in their own way and what special they added into it to make delicious and so many things. they can express their happiness and emotions related to recipe and HelloFresh.
Friends: The users can add new friends to have a better experience and to see their posts and favourites recipes and plans.
Chat: people can chat to each others to clear any confusion about how to make any recipe step by step and also get to know what they say about HelloFresh and it’s services and much more.

Brainstorming & user personas

I just started making a mind map, I used my colorful pens to get the creativity going.. Stimulated my brain, nothing is wrong every thought is just a process and might contain a good lead to my next idea!

Brainstorming

User Persona

Prior to designing UX and UI, I developed a user persona to better understand the target users of HelloFresh’s app. This process helped me get into the mindset of the users, thinking in terms of their contexts, needs, and goals.

User persona, credit source:http://ift.tt/2tWhiVl

Platform used for task

I have used pencil, paper, stickies & color pens for low fidelity wireframes. For visuals I used sketch for mac and the Invision online tool for creating the prototypes.

Number of users in the test

I prepared a list of 8 users. Picked up 3 randomly for prototype with social community highlighted and the other 5 for existing app.

Task given to users

“It’s a meal kit delivery app prototype. Order your favorite plans from the app!

Wireframes

I created a low fidelity wireframe for this task as i had only one feature to add and not much time to do in high fidelity. I generated stacks of ideas about the arrangement of UI, functional and data elements, and interactive behaviours to get a perfect concept.

Low fidelity wireframes

Visual Design

Having a clear vision helps with streamlining the design process, After getting the idea that how to place UI elements and how the feature will work I jumped to visual design to transform my concept into beautiful UI.

Visual screens

Mobile Prototyping

Please find below the embedded prototype for the visuals. For a better experience, you can open the prototype in another tab. Feel free to play around with it to experience the entire flow.

<a href="http://ift.tt/2uUWtGW">http://ift.tt/2uUWtGW</a>

You can also view the prototype on Invision: See here

Conclusion Note:

It’s important to understand what matters to a user when he is on your app. As we understand from the usability test data, in this era of always-busy-users, user engagement plays a larger role than the other things. Delivering a solid and differentiated user experience is a critical part of survival for the food related apps.

There are also some other features out there which can really help an app to grow and increase engagement with users some of them i already suggested in my previous article for you, some of them are below:

Mobile personalization
Advertise and share your latest deals
Reduce barriers — lower the cost of using your app by addressing bugs, usability, and points of confusion
Reminders and external notifications
Easier Onboarding
Let them “Try Before They Buy”
Keep Your App Updated

It was a really interesting task and I thoroughly enjoyed working and researching for it.

Hope I was able to add some value to the assignment.

Source files link:

Download the app sketch file,

Download the presentation(sketch)

Styles and uniformity presentation

Presentation

A new feature to HelloFresh was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

A new feature to HelloFresh

Cool stuff, every week

More Articles