top of page

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.

 

 

 

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.

 

 

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.

 

 

 

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. 

 

 

 

Responsive Design:

TABLET

Responsive Design:

DESKTOP

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

 

 

Anchor 1
Anchor 2
Anchor 3
Anchor 4
Anchor 5
Anchor 6
bottom of page