top of page

ONLINE CLOTHING STORE

INSIDE.OUT is an online clothing store offering modern quality clothing, shoes and other accessories for men, women and children. The selection is made up of only quality brands, including independent manufacturers that are compatible with the store brand's personality, also following the latest trends in snowboarding, free-skiing, skating or surfing.

CHALLENGES:

  • Create an online clothing store – a responsive e-commerce website – with a clear and unique visual system, responsive design and effortless user flow.

  • Create a website that mirrors a hip and modern lifestyle and quality clothing.

  • Provide easy-to-use shopping and check-out process.

ROLE:

Product Designer

RESPONSIBILITIES:

Product Strategy, User Research, Interaction, Visual design, Prototyping & Testing, Pitching

DURATION:

2021

TOOLS:

Adobe XD, Affinity Designer

Project 01

BACKGROUND

A relatively small active lifestyle clothing store offering a wide selection of affordable yet fashionable top brands has decided to expand its business and open an e-commerce store. Their old marketing website was outdated and provided only information about promotions, company background and location. The list of objectives and design goals was almost never-ending. The logo and the visual design system needs an update, the website itself must follow latest web trends and offer a well established shopping experience: browsing, filtering by size or colour, as well as a smooth checkout process.

KICKOFF AND OVERALL PROCESS

As with any process, the first step of the project was a kick-off meeting, where all details related to the project were discussed – who are the stakeholders, what are the specific logistics or needs involved. This is where the relationship between parties and communication rules were set. Also, in order to define the product and its context of existence, business and user goals were clearly stated. Finally all existing or possible future risks were assessed, including main user pain points.

Design thinking.png

The design thinking process started with foundation research, using primary and secondary sources. Market and competitive analysis were important in establishing the overall look and feel of the store as well as understanding the existing user patterns in the industry.

Based on interviews and a field study I created personas representing the main target audience – the user. A customer journey map helped visualize the full purchasing process from browsing to check-out. The ideation stage helped generate ideas and put away unrealistic expectations, while the prototyping and wireframing process turned out to be the most challenging but at the same time most rewarding: information architecture, user flows, sitemaps etc. All design solutions were tested using A/B testing and repeated usability studies.

USER RESEARCH

The project included three research phases.

 

  1. First, the foundation research, including primary and secondary studies, was conducted to understand user needs and e-commerce specifics and how they are different from physical stores.

  2. The second – design research was conducted to test sketches and prototypes as well as the design system.

  3. The final post-launch research included usability study and A/B testing using final designs for desktop and mobile screens. 

Due to the large amount of information and choices in the online store, I also kept in mind various psychological concepts related to user activity and perception. One of them was Hick's Law, stating that the time it takes to make a decision increases with the number and complexity of choices available.

Hicks Law.png

The main user groups identified were young adult professionals and students with available disposable income. Both groups appreciate and follow current fashion trends. They value quality clothing and are willing to pay above the price of the regular mass retail stores. 

PERSONAS

In general, there are at least five main types of e-commerce users with different motivations and habits. Some users visit with a specific product in mind, others are only starting to decide what to purchase. Some users browse stores simply to kill time. So it is important to consider all users when making design decisions that may improve overall site usability. What are the five types? Product focused users, browsing shoppers, researchers, bargain hunters and one-time shoppers.

 

For the purposes of this project a general persona was created comparing the given e-commerce business type (expensive or affordable clothing) with the potential customer base.

Elise persona shop.png

USER JOURNEY MAP

In order to understand the series of experiences a user has as they interact with the product, I created a customer journey map. I focused on the end-to-end use case for one specific use case and one specific user type – based on the previously created personas.

Customer journey map_shopping.png

USER STORY

The next step in the process was to write a user stories to understand how users will use the site. 

User Story Elise_shop.png

HOW MIGHT WE

I also constructed How might we questions to generate creative ideas to try to turn all known problems into opportunities for the design. After generating a list of questions, I used sticky notes to brainstorm solutions. I focused on quantity rather than quality, so nothing holds me back. Here are some of them.

How might we ensure more people purchase seasonal items before the sale ends?

How might we convey trust and safety in a customer shopping experience?

How might we inform a customer that specific products are on sale?

How might we make the checkout process more friendly and hassle-free?

How might we separate men's and women's category pages so they are easily discoverable?

BRAINSTORMING

During the ideation process I started a brainstorming session to better understand how to improve the experience for users. I started looking at all the information gathered in the research stage and tried to come up with various themes.

IMG-7240.jpg

SITEMAP

I decided to divide the sitemap creation process into two stages. First I used a pen and a paper to draw all the combinations I could imagine as well as those found online. When the sitemap finally looked realistic, only then I moved to my digital tools. I also did extensive online research and updated my list of most essential pages an e-commerce website must have.

  • Homepage

  • Category overview page

  • Category page

  • Product page

  • Search page (with listing results)

  • Log in / Guest Checkout

  • Mini Cart

  • Cart Page

  • Shipping page

  • Payment page

  • Checkout review

  • Order Confirmation

  • Order History

  • Individual Order view

  • Profile / Account Settings

  • Payment Settings

  • Saved shipping addresses

  • Email and SMS Sign up

  • Returns page

  • Shipping page

  • Help/Contact us

  • Store locator

  • Store details page

  • Terms and conditions / Privacy policy

sitemap.jpeg
SiteMap Shopping.png
01s.png

INFORMATION ARCHITECTURE

I also focused on the information architecture and content audit, so the users, browsing the website, can easily find what they are looking for. It was important to think about users' existing mental model as well as a possible cognitive load, and make sure the content is relevant and not overwhelming. In order to limit the information, I included filters, sorting options, saving or comparing items possibilities.

I created a visual hierarchy by grouping elements and building patterns, using Gestalt principles: similarity, proximity and common region.

Nielsen Norman Group: Design elements that appear similar in some way — sharing the same color, shape, or size — are perceived as related, while elements that appear dissimilar are perceived as belonging to separate groups.

SKETCHING LOW-FIDELITY WIREFRAMES

In the design stage I followed the so called KISS (keep it simple and stupid) mind-set. I started by sketching ideas on a sheet of paper. Then after selecting most realistic options I moved to the digital wireframing. 

sketch.png
banner_mockup.png

DESIGN SYSTEM

It was decided that the design system of the website will consist of light colours and a white background. HK Grotesk, a sans-serif typeface, was used for general headings and body text, while Helvetica Neue font was used to catch attention, for example, in advertisements. Both typefaces gives the website a clean and modern look as well as providing effortless readability.

The 8px grid allowed for more flexibility when working with spacing, while the chosen type scale brought a harmonious design that was pleasing for users and scalable for web developers.

1.png
3.png
2.png

FINAL MOCKUPS

shop4.png

ACCESSIBILITY CONSIDERATIONS

Along the way I followed the Web Content Accessibility Guidelines and made sure I design in a way that is more usable for all users irrespective of their situation, abilities or context. Here are some of the many considerations I included in my designs:

1.

Provided access to users who are vision impaired through adding alt text to images for screen readers.

Benefit: Useful for users who are vision impaired.

4.

Used increased space between lines, words and letters as well as a good amount of white space between blocks.

Benefit: Helpful for users with low vision and dyslexia.

2.

Used icons to help make navigation easier.

Benefit: Useful for users who can't read.

5.

Used adequate colour contrast ratios for text (4,5:1), icons and other graphic objects (3:1) – against background or adjacent colour.

Benefit: Useful for users with low vision.

3.

Used logical keyboard navigation order, when using the Tab key.

Benefit: Useful for users with disabilities who rely on assistive technologies that read content aloud.

6.

Ensured that touch targets are at least 9mm high by 9mm wide, as well as left enough inactive space round controls, so they don't overlap with other touch targets.

Benefit: Useful for users with mobility impairments or simply large fingers.

TAKEAWAYS

Designing an e-commerce website is not an easy task. Although there are many well established industry standards that can be helpful in the design process (creating user flows, information architecture, etc), it is very crucial to speak to those who actually work in retail. Interviewing employees who work for physical clothing stores as well as those working in the online environment, helped me understand many processes involved in the business – from communication to purchasing and shipping specifics.

I am happy I was able to meet the set challenges by creating
 a hip and modern e-commerce website design with a clear and unique visual system, responsive and effortless user flow. A store that offers an easy-to-use shopping and check-out process.

When thinking about the overall design, I considered many aspects related to good user experience, for example: strong branding, operational simplicity, effective use of visual elements, clear menus and navigation, easily available contact information and others.

bottom of page