Visual design of an e-commerce store

BeStylish.com is an online store for shoes and accessories in India. In 2012, they were struggling to create an individual identity in an already crowded e-commerce market. So they approached Design For Use, the design consultancy I was working for then, with a complete redesign project for their website.

4 member team: Project Manager, UX Lead, Interaction Designer, Me

My brief

To create a visual style for BeStylish.com that reflects their brand, and to produce detailed visual mockups for the main website pages based on that style.

Before the visual design stage

Before the visual design stage, the research team had conducted formal stakeholder interviews and user interviews, done competitive analysis and created a functionality matrix. Also, the interaction designer had created clickable Axure wireframes and tested those with users. I was involved during this entire process as an observer and was taking notes in all of these stages and giving my inputs where relevant.

Visual Explorations

The UX Lead and I started the visual design exploration in parallel with the wireframing stage. After going through all of the research documents, we distilled the core ideas for the new visual design:

  • An urban and affordable yet stylish visual appeal
  • A trustworthy and quality-conscious store
  • Feels like a personal stylist

Then I explored different layouts, colors, typography, and image style combinations:

Comparative Analysis of Product Images

As product images were an important part of the entire visual look, I did a comparative analysis of how products were being displayed by various competitors.
08_ProductShoots_Women

Website mockups

Once we finalised the look, I created the mockups from the wireframes for the 20 different types of pages in the website under the guidance of the UX Lead. I also created the mockups for different interaction states on each page. The 6 most important screens are shown here:

Implementation Support

Traditionally our projects at Design For Use used to end with delivering the PSD files. But with BeStylish, the UX Lead and I went a step ahead by getting involved in the implementation phase.

Styleguide
I created a basic styleguide document that contained all the global styles. This acted a visual reference for front-end developers.
07_Styleguide
Sizing Chart
Research showed that many Indian brands did not follow any standard sizing guidelines. To help the users, we came up with the idea of sending a printed shoe sizing chart along with each delivery.
09_SizeChart

Front-end development support
Sitting through multiple calls, I coordinated with the front-end team on the client side to make sure each pixel was coded as designed.