Brief

Create a usable grocery app for busy customers with a special feature that works within the given user research. This app was to be created from scratch with just a bit of user research done.

Winkel
‍
Winkel is a grocery app with extensive filtering. They wanted an app that fits with the users’ busy lifestyles, has a special feature. In this case, I chose to add a filter feature which remembers your filtered options so any products with those ingredients will be filtered out. No accidental allergy attacks here!
‍
Team

Sarah Melville - UX / UI Designer‍
Agnes Godziszewski - Instructor (Client)
‍
Role - UX / UI Designer

As one of the UI designers, my tasks included domain research, competitive analysis, creating a persona, sketching, problem statement, paper prototype, application map, low fidelity wireframes, mood boards, style tiles, high fidelity mockups, and prototypes.
‍
Toolbox

I used a combination of paper sketching, Google docs, Marvel, Illustrator, Sketch and Invision for the design and prototyping of this project. I used Zoom to video conference with the client.
‍
Problem

A busy urban professional woman with debt needs a way to save time and money while keeping to a specific kosher diet because she believes in her religion, doesn't want to be in debt forever, and has an overwhelming schedule.
‍
Project Timeline

The first week, I went through the given user interviews, conducted domain research, competitive visual analysis, sketched some ideas, created a problem statement, persona, and product requirements. 

During the second week, I worked on my paper prototype, application map, and low fidelity wireframes.

During the third week, I worked on my InVision wireframe prototype and conducted a visual competitive analysis.

During the fourth week, I created mood boards and then style tiles.

During the fifth & sixth weeks, I created high fidelity screen mock ups and a prototype. Then I created a user testing scrips, and conducted user interviews for usability.
‍
Research

I put together a competitive analysis. This tool was helpful to focus on what the competition was doing. This allowed me to see holes in the competition what they did poorly, and the elements that were actually working that could be adopted. I also did domain research for the same purposes.

UX Work

After doing research into the existing information, the competition and holes to be filled in the market, I created a problem statement, a primary persona, an application map, paper prototype, and low fidelity wireframes.

‍

Mood Boards

I made 2 divergent mood boards to streamline where I wanted to go visually. My research showed that green as a primary color with white a white background was the most common look among competitors.

Additionally, most of the competitors kept their apps or websites looking pretty clean. I realized that a clean look was very important. The goal of this app is to appeal to busy working professionals who have limited time. That brought me Bright & Bold and Minimalist & Modern.

Style Tiles

After converting the 2 mood boards into style tiles, I then made sure that the two directions would work with our target audience. I had good reception to the modern and minimalist style tile. We decided to move forward in that direction.

High Fidelity Screens V1
‍
I built 11 key high fidelity screens for the app. I knew I needed to make some refinements, especially with the visibility on the splash screen.
‍
I then iterated before presenting the screens further by working to create a clear visual hierarchy.
‍

Prototype
‍
‍After receiving more feedback, I iterated my designs again, added more screens to create a full user flow, and put them into a basic prototype. I then tested my prototype. I got pretty positive feedback after these further iterations.
‍

Logo Design
‍‍
‍I designed the logo, keeping in mind the competitors logos and the user research. I wanted to keep it clean and modern. I also wanted to make it something that would be recognizable in an icon.
‍

Future Recommendations
‍
- Add padding to the buttons.
‍
- Add some animations and microinteractions to make it more fun.
‍
- Make sure all of the elements are spaced properly.
‍