VIVA – Marija Jovanovski

My role

Responsibilities

Conducting interviews, research, competitive audit, user flow, paper and digital wireframing, low and hi-fi prototyping, usability studies and design iterations.

Duration

Overall: 8+ weeks
Discovery & Research: 2+ weeks
Design & testing: 6 weeks

The product

Viva is a fictive grocery store chain, as a project for the Google UX Design Specialization program. Viva strives to have excellent customer service and competitive prices. Viva’s online target customers are busy, multitasking, working people, with or without families.

The problem

Busy working adults need a more efficient way to get groceries.

The goal

Design an app for Viva that allows users to make personalized shopping lists that can be reused to easily order groceries.

The Design Process

Empathize: Understanding the user

Personas

I created personas in my design process for the grocery store app to develop a deeper understanding of the target users, their goals, behaviors, and needs, which helped me design a more user-centered and tailored experience.

User Journey Map

I wanted to understand the end-to-end experience of the users, identify pain points, and make informed design decisions that prioritize user needs. Mapping Anna’s user journey revealed how helpful it would be for users to be able to place grocery orders in a quick and easy way.

Define: Translating results into insights

User pain points & Problem statements

In my design process for the grocery store app, I focused on identifying the pain points experienced by users and formulating problem statements, which allowed me to prioritize user needs and develop a solution that effectively addresses their challenges and enhances their overall experience

Ideate: Brainstorming solutions

Story board

By creating close-up and big picture storyboards, I was able to visualize and map out the user journey and flow of the app. The big picture storyboards gave me a holistic view of the entire app, enabling me to identify any gaps or inconsistencies in the user journey and make necessary adjustments.

Wireframes

In my design process I used both paper and digital wireframes to help me create and improve the look and feel of the app. Paper wireframes allowed me to quickly draw out different layout ideas. Once I had a better idea of what I wanted, I moved to digital wireframes to fine-tune the design details and see how everything would work together.

User flow

I created a user flow to outline the step-by-step navigation and interactions for the main task within the app, ensuring a logical and intuitive user experience.

System Design

Usability Testing

It was observed that some users struggled to recognize the ability to scroll down on the page, leading to difficulty in locating the checkout button. This issue resulted in users being unable to complete their orders. To address this, I added a scroll indicator, with the aim to help users navigate the page more easily and locate the checkout button without any obstacles.

I implemented a continue shopping button in the checkout and payment pages of the grocery store app. This addition allows users to seamlessly continue their shopping experience without having to start from the beginning, even if they have already initiated the checkout or payment process.

To address the need for reassurance during the ordering process, I added a cart preview window on the checkout page, allowing users to double-check their items.
Additionally, a shopping cart item number with the price was included at the top right corner for easy reference.

Furthermore, to meet the request for visibility on delivery details, I incorporated a section displaying the delivery information before users submit their order, so they can make changes if needed.

In the design revision I made updates to improve the visual clarity and usability. Firstly, I replaced the grey buttons, which appeared disabled, with primary and secondary color buttons to clearly differentiate between primary and secondary actions. Additionally, I replaced the progress line with colored symbols to represent the completion of each step, providing a more visually appealing and engaging experience. I added a colored dot to indicate the current step the user is on, allowing for easier tracking of progress.

In the latest iteration of the grocery store app, several features were introduced to enhance the post-order experience. Firstly, a symbol was added to indicate a successful completion of the order, providing users with visual confirmation. Additionally, an order number and a link to track the order were incorporated, allowing users to monitor the progress of their purchase. Furthermore, a continue shopping button was included, enabling users to easily navigate back to the shopping page and explore further options.

Prototype

Takeaways

Impact

In the usability study, participants expressed their enthusiasm for using this app, particularly highlighting their strong liking for the personalized shopping lists feature.

One quote from the participants:

„It’s great! It is very straightforward and intuitive to use, the design is clean and minimalistic and has a nice element arrangement.“

What I've learned

Throughout this project, I have come to realize that the design process is not solely based on a designer's preferences, style, and skills, but rather it heavily relies on user research and usability testing. Understanding the needs of the users is crucial, and the design should always be driven by and in serve to the users. Additionally, I have learned the importance of considering accessibility in design, as it is not only significant for minority groups but for all individuals interacting with the design.

Next steps

Thank you for your time checking out my work on The Viva Grocery store app.
Feel free to contact me if you are interested in collaborations! 🙂

ALTRUISTO

CRLJEN

ARTIUM