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



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.





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:


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:


Responsive Design:




  • 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