Jow's New Nav

UX Research, UI

Jow is an app providing users with personalised recipes that are easy to get through their favourite grocer. The app is available in France and the USA.

Initial statement

  • Jow had a structure which didn’t enable scaling.
  • Each new feature was added to the homepage.
  • Some users were requesting access to the recipe catalog.
  • It was needed to reorganize our features for the future of the app.
  • Users were often confused about what each tab is.

Solution provided

  • Organised workshops with the Director of Product to define our goals.
  • Conducted 4 internal sessions with 9 people.
  • Presented the findings to the CEO and founders.
  • Created wireframes and iterated on it.
  • Added a label under each tab to help users identify their purpose.
  • Designed the high fidelity screens for the uncovered needs.
Homepage

Initially, the app was divided into 4 tabs: “Shop, cook, notification, profile”.
As the product grew and the features multiplied, we reached issues as to where to display each of them. In many cases, new features would be added to the homepage which drove confusion among users as well as within the team with regards to the navigation and general information architecture.

As many new features were in the pipeline, and Jow’s proposition value was diluted, we needed to take action and solve this issue in order to tidy up the app.

The core idea of Jow is to order recipes effortlessly through your favourite grocer, but you might want to browse ideas (as requested by users), explore current deals, find friends or participate in some challenges to earn money.
All of these feature needed to be dispatched into clear sections to stop them fighting each other for attention on the homepage.

cover

How do we ensure a clear segmentation of the services and offering without impacting our core experience and funnel?

To solve this issue, the director of Product and I, worked together on setting up workshops within the company, by involving people from each business units.
Althought we used known and up-to-date user’s feedback (gathered in Jira), unfortunately it wasn’t possible to involve users, which could have prevented an issue I’ll discuss about later.

Workshop persona

Using persona

In order to help our team members identify with our customers, we used 3 persona which two of them got defined by a previous study led by an external agency.
The last one had to match the usecase of our social users.

Workshop sticky notes

Discover and refocus

To gather everyone’s thought and idea for the future of the app, we decided to do some exercices such as listing all existing and upcoming feature, and then letting the team do some open card sorting to group everything as they saw fit.

Listing all features Current and upcoming ones in order to plan ahead for the better.

Open card sorting To group features so we can dispatch them in different sections.

Prioritisation & known issues Based on the defined Persona, we organised the features by importance, then we wrote down some known issues to see how we could solve them.

Sketches

Sketching

We asked the nine interviewees to draw their ideal core page and experience. Each person was able to provide a constructive reasoning thanks to the previous exercices, which was helpful in defining the direction of our new information architecture.

wireframes

The result

Refining further and further, we ended up with 4 tabs as before, but with a direct access to the notifications as well as the help center, as finding assistance was a key requirement.

We dedicated the first tab to the shopping experience, we opened up the full catalog of recipe in the second one (as it wasn’t easily accessible before), created a new tab for everything related to saving money, and lastly, the most challenging one which is the profile tab, where users can find all the recipes they bought as well as their order history.

Explore wallet

Quick iterations

As mentioned previously, we should have involved users, at least before deploying it completely.
Due to time constraints related to other projects, we decided to deploy the new navigation a bit too quickly, resulting in a backslash from our users.

Thanksfully as the team was very reactive, we managed to quickly iterate on their feedback, ensuring a solid new way of displaying information across the entire application.

Profile

Future proof

Although this exercice has been challenging at times, it came out as really rewarding when thinking of new feature to build and their location on the app.
The team adopted the new structure and seize it to develop further opportunities such as a social feed and more.

cover