Responsive Web Design

for eCommerce

 

My Role:

 
  • Conducted UX Competitive Audits

  • Prioritized features

  • Sketched out concepts and reiterated

  • Collaborated with the UX team, the visual design firm, and stakeholders using Notable

  • Wireframed lo-fi and hi-fi with Axure

  • Designed responsive interfaces for Desktop, Tablet, and Mobile

  • Built UI components with Axure

  • Coordinated the Style Guide

Process:

Ideation

My Role:

 
  • Conducted UX Competitive Audits

  • Ideated and organized features

 

 

Challenge Addressed:

 
  • For the product details page, integrate subscription orders in addition to one time purchases.

 

 

 

Sketches

Challenge Addressed:

 
  • Added a dropdown category called "Frequency" to address the subscription vs. one time purchase options.

 

 

 

forgot_password_.png
forgot_password_.png

1/14

Lo-Fi Wireframes

Challenge Addressed:

 
  • For this homepage, the stakeholders wanted to see a narrative scroll design that would really tell the story of the product.

  • Strategized feature / content prioritization.

 

 

Buttons with Hover States
Buttons with Hover States

Mobile Accessibility UI
Mobile Accessibility UI

1/6

Style Guide

Challenge Addressed:

 
  • Originally our process did not include a style guide so I spearheaded the production of one so our team could have a reference for how to design out the components. 

  • Took the initial static designs from the visual design firm Ogilvy and added interactions.

  • Enhanced the readibility and accessibility of our UI components.

    • Buttons were at least above a minimum standard for touch screens.

    • Font and background had enough contrast, especially since most of our users are older.

 

 

 

Shopping Basket
Shopping Basket

Product Details Page
Product Details Page

Create An Account Page
Create An Account Page

Shopping Basket
Shopping Basket

1/3

Responsive Design:

MOBILE

Challenge Addressed:

 
  • As the width shrinks, business and design decisions have to be made as to what is the most important information since that will be read top down.

  • We designed desktop first, then tablet, and then mobile. I recommend doing it in the opporsite order and using a "Mobile First" strategy. That way those decisions about what is most important will carry over to the wider interfaces and improve the heirarchy. 

 

 

 

Shopping Basket Page
Shopping Basket Page

Review Current Order
Review Current Order

Product Details Page
Product Details Page

Shopping Basket Page
Shopping Basket Page

1/3

Responsive Design:

TABLET

1/4

Responsive Design:

DESKTOP

1/3

1/2

Accessibility

 

  • Our product is an anti-aging skin care line which means that we have to consider accessbility guidelines for our target user, an older segment of the population.

  • I researched and implemented techniques such as using a minimum font of 16px and touchscreen areas of at leaste 44 px wide or tall.

 

Using Conditionals

 

  • I implemented conditional statements through Axure to generate a robust prototype.

 

 

 

Clickable Prototype

 

  • I built this clickable prototype with Axure, a more complicated, yet robust prototyping tool

  • This video highlights tabbing, dropdowns, make default, delete, and edit content.

 

Prototype video highlights:

 

  • Sticky navigation bar

  • Scroll / toggle menu items

  • Built using conditional statements

 

 

Prototype video highlights:

 

  • Submitting a signature

  • Pop up confirmation window

  • Check boxes

  • Error messages