E-Commerce Website UX Optimization

BACKGROUND

Nowadays, user experience is becoming a key to business success. Pactera UX team was invited to help client build a user-friendly e-commerce website.

The website is required to:

  • Provide diversified categories of products, each category has a unique page that offers the best value products to customaers.
  • Different campaign pages such as group buying and time-limited buying are designed in order to attract more customers.
  • For the need of gift redeem, they would like to have a trouble- free process for gift redeem, so users won’t give up due to the complicated process.
  • A responsive design to make sure users have best experience. They also would like to have a dedicated mobile version. So even in a small mobile device, users could complete complicated tasks.

Understand Competitors, Understand Customer

It is important to know how your competitors do, and learn from their strength. We analyzed more than 20 e-commerce website including foreign websites, famous domestic websites and direct competitors. However, it is not enough to know your competitors, but also important to know yourself, know whom we are designing for. We created personas and scenarios to help us get an insight of our users.

  • Competitive Analysis
  • Personas & Scenario

Rapid Prototyping

Wireframes helps us quickly show our conceptual ideas and present to the client. We are able to quickly receive feedbacks and optimize. At the end, we provided a HTML file generated by Axure that shows the layout, feedback of the system and interaction descriptions. This was delivered to the development team and visual designers later.

E-Commerce Website UX Optimization

Pixel Perfect Design

Once the conceptual interaction design was confirmed with client, we started creating conceptual visual design and got it confirmed. Visual design production starts when each part of interaction was finished, so it was overlapping with interaction design. The deliverables of this stage was psd files, red-line PNG.

Front-end Development

Our designers were working closely with developers to make sure the actual product looks the same as we designed. The front-end developers work was to code the actual website using HTML, CSS, Java Script and JQuery and cooperate with designers and Back-end Developers.