It all started when…

ABC Go is an online grocery app for ABC Grocery a regional brick and mortar premium grocery store. This app saves time for users with a busy lifestyle by ordering high quality groceries, and fresh produce online for delivery or pick-up at their fingertips.

 
 

Client

Their target audience are tech savvy, loyal local customers value premium products and experience. This would include busy millennials that currently shop online for groceries.


Problem

ABC Grocery currently have no online presence, and needed to reach their customers who shop online with other grocery stores and new customers. ABC Grocery’s Management are worried that they are losing market share to other online grocery services, and wanted a digital solution to address the needs of those users.

 


                                                    USER RESEARCH

Quantitative            Data

After conducting 50 surveys, my data showed that almost 50% of users use online shopping for groceries to save time. The biggest percentage of online grocery consumers purchase gourmet products over any other type (42%). About 25% of users would like to spend the least amount of time possible in the supermarket, while 25% would like to spend more time. 

Qualitative          Data

I took notes in order to collect data for the UX process. 

Affinity Diagram Insights

Quality, time, and convenience and are some of the biggest concerns of the users. The pain points that the users experienced were: A busy lifestyle doesn't accommodate a regular shopping schedule, waiting at the grocery store to pay, and realizing that something was forgotten off of the list. 


Updated Overworked Orville User Persona .png
 

User Persona

 

Overworked Orville Current user map JPG.jpg

User Journey

 

Concept Sketches

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Mauris egestas at nibh nec finibus. Aenean eu justo sed elit dignissim aliquam.

 

Concept Testing

After testing the lo-fi mockup, it was clear that while the app seemed easy to use but the main feature still confused many users. So we made a few more pages and made the features easier to use and understand.I made design decisions, based on research in order to create the mid-fi prototype

                                               INTERACTION DESIGN

Mid-Fidelity Wireframe

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Mauris egestas at nibh nec finibus. Vivamus a ante congue, porta nunc nec, hendrerit turpis. Vivamus a ante congue, porta nunc nec, hendrerit turpis.

Summary Block
This is example content. Double-click here and select a page to feature its content. Learn more

                                                     VISUAL DESIGN

Mood Board

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean eu justo sed elit dignissim aliquam.

 

Style Tile

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Maecenas non leo laoreet, condimentum lorem nec, vulputate massa. Phasellus sodales massa malesuada tellus fringilla, nec bibendum tellus blandit.

 

Style Guide

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Phasellus sodales massa malesuada tellus fringilla, nec bibendum tellus blandit. Donec eu est non lacus lacinia semper.

                                                        PROTOTYPE

High-Fidelity Prototype

I  designed and mocked up the checkout process to complete the Hi-Fi Prototype. When testing the checkout screens, I made two versions, and decided through testing that one screen could be combined and thus streamline the checkout process. It was the best decision.

Summary Block
This is example content. Double-click here and select a page to feature its content. Learn more
 

User Testing Results

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Sed a ligula quis sapien lacinia egestas. Sed a ligula quis sapien lacinia egestas.

 

High-Fidelity Prototype Version 2

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Aliquam bibendum, turpis eu mattis iaculis, ex lorem mollis sem, ut sollicitudin risus orci quis tellus. Phasellus sodales massa malesuada tellus fringilla, nec bibendum tellus blandit.

Summary Block
This is example content. Double-click here and select a page to feature its content. Learn more