Levie's - eCommerce UX-UI Design
Responsive Prototyping

Project Type

End-to-end product design project for Shopify Core Platform

eCommerce website front-end development and UX Research.

Contribution

- User Research

- Stakeholder interview

- Wireframing

- High-fidelity prototype

- CSS/HTML prototype

My role

UX Architect

Lead Front-end Developer

Scrum Master

Outcome

Rolled out 100% globally 🎉

Target users

+ 35 million Online users

Duration

13 weeks

Visit Website

google-playstore BP BP Oil - Pay for Fuel From Your Car | Ravi Nakum

Project Overview

I was hired to initially design a Fit Guide for Levi.com. After some quick initial concepts I created prototypes in CSS and HTML to communicate the idea. After this work, Levi's wanted me to work on redesigning some key templates for Levi's, including the Category and Product pages. I worked on solving some of the biggest issues on the Product page around all the detail and variations for 501s jeans, including designing a notification system with five different levels of notifications about stock.

I finessed the designs in CSS and HTML to work on interactions and ensure that the page worked responsively. Initial sketches Taking into account all the fit types and styles that this Fit Guide needed to be populated with, I started sketching, then making wireframes in Sketch.

Wireframing

When I had come up with a clear direction I presented this to Levi’s in a Keynote to make use of some of the animation tools to quickly and clearly communicate the concept. My idea was to put all the styles on one long “film-strip” that would enable to user to understand the range of styles and to be able to compare easily. I concluded this by saying that to prove this concept we needed a prototype to see how this feels to use and works in the browser with all the content.

I concluded this by saying that to prove this concept we needed a prototype to see how this feels to use and works in the browser with all the content. The prototype quickly became high fidelity with styles, interactions and responsiveness all incorporated into the detail.

HTML / CSS

They liked this and it enabled them to focus on the content. They mentioned that they had had all new images shot in dark so wanted to see if they would work as they had doubts. It was easy to swap in the new dark images into the HTML and change the text.

* All information in the projects are my own and does not necessarily reflect the views of respective companies. All the projects complies to the NDA