E-commerce

Books Island

An e-commerce website that offers books of all the categories for all the age groups with a modernized UX.

This project is an e-commerce website that offers books of all the categories for all the age groups. Due to confidentiality, a product name won't be disclosed.

My Contribution

I was hired as the first and only designer on the team to work closely with developers and domain experts. My work consisted of research, designing and prototyping for the main product as well as working on support materials, such as building a website and designing features for possible platform expansion that was not on the main roadmap.

Design Challenges

We had lots of assumptions that we were not always able to test and validate due to time and finance constraints. The lack of usability in ecommerce platforms which led us to rethink and adjust our product during the design process, adding up to the development time and cost.

Collaborative & Lean

Initial ideas are generated using various creative methods, which are then implemented in sprints to form prototypes and MVPs (minimum viable product). The MVPs are tested and validated with customers and external colleagues. The implementation takes place in cross-functional feature teams. A team consists of a product owner, developer and designer, is self-contained and fully capable of acting.

Project Type

E-commerce application

Project Duration

Dec 2020 - June 2021

Team Size

4

Responsibilities
  • Research & Competitor analysis
  • Information Architecture
  • Wire-framing: Paper and Digital
  • Low & high fidelity wireframes
  • Prototyping
  • Accounting for accessibility
  • Usability testing and validation
Design Tools

Adobe XD, Figma, Photoshop

The quantitative and qualitative data collected informed a successful design process that reduced 200 unique screens to a mere eleven templates.

The Process

Identifying the problem

Identifying the problem

The team and I spent an iteration exploring problems within the e-commerce market. Due to my decade journeying in the designing and branding sphere, I was able to guide the conversation professionally.


  1. Design a responsive website that is easy to use.
  2. Give a customers an easy and inviting way to buy or rent book online
  3. Design the overall flow of the site as simple as possible
  4. Create a site that client can proudly showcase and use as a viable marketing tool.
User Research

Research Goal

Our primary research goals were born out of ideation around our main interest of disrupting books selling e-commerce industry


During this stage, we went through a dozen ideas, accepting and rejecting them based on asking the following product thinking questions.

Sample interview questions
  1. Pinpoint demographic of target audience and psychographic information like values, interests and stories
  2. Find out how people prefer to buy books and why.
  3. What motivates people to go to a books selling website.
  4. What kind of information people look for on a books selling website
  5. Find out more about the industry and industry trends.
  6. What are some of the pain points people experience on a books selling website
  7. What are your general criteria for choosing a particular book? Is there anything specific reason that makes you reject/accept a book?
  8. What are your frustrations while selecting books?
  9. What price range is affordable to you?
User Research

User Interview

In the empathize stage, I conducted initial individual user interviews to understand what my users really wanted, and why. I choose a series of few questions both qualitative and quantitative in nature.


Style

Guerilla Interviews

Number

8 people interviewed

Duration

15 minutes each

Interview Type

Contextual Interviews

Summary of User Interviews
  1. All had some experience with online shopping.
  2. Half those interviewed preferred the phone for online shopping
  3. Teenage customers prefer cash on delivery then online payment
  4. Established clients prefer to buy book online with pre-filled data
  5. Found descriptions of book difficult to understand
  6. Ratings weigh heavily in decision to select book
  7. Discounts are motivation especially in teenage customers
Define Problem

Personas

With the insights from the interviews, two major personas were prepared in order to frame the general user type.


Here are the details of the personas

Define Problem

Empathy Mapping

The empathy map created helped us to understand the user needs and develop deeper & unexpected insights.


Divided personas inputs by using empathy mapping method

Ideation

Comparing User journeys

Comparing user journeys of the retail and digital shopping, helped us to draw parallels between then in order to fill gaps and identify opportunities to improve the experience.


Here, two types of journey maps based on personas we created.

  1. Demonstrating the way user currently interact with retail shopping.
  2. Demonstrating the way user currently interact with a typical e-commerce site for book purchasing.
Ideation

User Stories

As a user, I want a feature, so that I can goal


By jotting user stories, I was able to come up with features that would be essential to them and enhance their experience. I also recorded details about the feature like requirements, priority & value added.

Ideation

User Flow

From the user journey, the path in which we wanted the users to move in order to achieve their goal quickly with the best experience was defined.


Here is a simplified user flow.

Ideation

Information Architecture

From the user flow, the structure of the website that is most logical to the users and their navigation was defined.


We identified three main areas of the buying experience 1) Community 2) Products 3) Book Assist. Here is a simplified information architecture for buying by products.

Prototyping

Paper Prototype

Paper prototyping helped me to visualize early the layout and content of screens and their ordering.


I sketched out screens and figured out the basic interactions between them.

Prototyping

Low Fidelity Designing

After reviewing the sketches with the client and a couple of iterations, it’s time to start refining in the form of a low fidelity wireframe.


Utilizing wireframes in the beginning phases of design, is an efficient way to communicate placement of elements without getting too bogged down in minute details. A huge benefit and timesaver is that the layout can easily be changed.

Home Page

Books Listing Page

Sign Up

Book Details Page

Contact Us

Prototyping

Usabililty Study

In the testing stage I focused on the Usability Study parameters, and followed with an in-depth research study plan.


Length

10-15 minutes

Participants

5 participants

Location

Remote

Study type

Unmoderated usability study

UI Designing

UI Designing

To start the UI Design, the most appropriate styles to convey the mood of nature were chosen.


I sketched out screens and figured out the basic interactions between them.