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
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.
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.
-
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.
-
The second – design research was conducted to test sketches and prototypes as well as the design system.
-
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.
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.
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.
USER STORY
The next step in the process was to write a user stories to understand how users will use the site.
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.
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
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.
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.
FINAL MOCKUPS
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.