Aisle

Mobile Application Design

Branding

This mobile application was designed to help customers navigate a concept store that speeds up a customer’s purchasing process while simultaneously helping store owners save space and increase customer engagement.

Team Makeup: Developer (Backend), Developer (Frontend), Product Owner, Project Manager, Stakeholders, UX Designer (Me)

Project Duration: 6 weeks

Tools Used: Figma, Illustrator

Project Overview

The Aisle: Where shopping carts are a thing of the past

Save space: No physical products, just digital displays. Scan an item, pay by phone, pick up in the Dark Store in 15 minutes
With no physical products, it’s easier to update inventory
Personalization of product details
Increases engage with your customers

The Promenade: Where stores set themselves apart

Designed to allow for continuous reinvention of store space, such as tailored shops and spaces
Allows for greater accessibility with no need to push a cart

The Dark Store: Where you can see tomorrow in action

Robotic-powered automated mini-fulfillment center lessens manual labor and shortens wait times
Allows for customers shopping from home to get their orders faster

The Ask

The Aisle Mobile Application

Create a design using company’s existing brand as a base for users to navigate and purchase products from The Aisle.

Requirements:

Deadline: 6 weeks
Use company’s internal branding elements
Design for iPhone only
QR scanner for products
Users need multiple fulfillment options
Cross-sell opportunities
Clean, simple design with limited animations

Experience Flow

Considering the project’s expedited timeframe, the first logical step was to draw out a user’s ideal experience flow to give my designs a map to follow.

Brand Elements

Based on this company’s existing brand, I was tasked with creating a mini brand, including creating a name, a logo, and making decisions on how we could implement the company’s colors and iconography across this concept application.

QR Scanner

Needed to be accessible at all times through the user experience
Interactions and animations teach user how to use the scanner upon opening the application
Color of scanning button mimics clickable elements used later in the design

01 SPLASH SCREEN

02 HOME PAGE

03 QR SCANNER

04 PRODUCT PAGE

Product Pages

Four products selected, each were designed to showcase specific application experiences.

ADD TO CART EXPERIENCE

Unobtrusive Add to Cart experience makes it easy for a user to add an item to their cart
Post-product “We Also Recommend” cross-sell feature
Adding recommended product mirrors UX of main Add to Cart navigation

User lands on PDP page

User adds item to cart, selects delivery or store pickup

Product coupon feature

Cross-sell populates

Pre-product “New from Yum!” cross-sell

Cross-sell added to cart

“Added to cart!” success message

User automatically returned to splash screen, new cart total populates in righthand corner

ADDITIONAL PRODUCT HIGHLIGHTS

In-product “More to Try” cross-sell

Product story: “Sustainability Matters”

Checkout Experiece

Fulfillment method reflected; in final concept, this would be editable
Coupon reflected
Only credit card was asked to be selectable; in final concept, new credit cards would be able to be added
Collapsing order summary to give cart future payment fields more real estate
Order confirmation screen shows how many items will be delivery / pickup and how long fulfillment will take

MY CART VIEW

PAYMENT SELECTION

ORDER CONFIRMED (COLLAPSED)

ORDER CONFIRMED (EXPANDED)

Leave-Behind Digital Playbook

This digital playbook was created as a project extra to help stakeholders navigate through the prototype. Additionally, it helped future developers and product users understand how each of the components function