Creation of an inclusive concept e-commerce website
A gender-fluid expression is no longer a trend, but a movement, and retail is catching up.
The Forumist keeps all its platforms and retail space without the gender elements, creating an inclusive experience for a new generation of gender-nonconforming visitors.
The challenge was to transfer that experience to The Forumist first e-Commerce site.
The work below shows the research and user testing process of a project I pitched to the client that soon after turned into a full-time job and co-ownership.
I am currently the project lead and the site is planned to in September 2021.
I will update the process accordingly with the final product once launched!
The Forumist, a creative agency and a free distributed magazine in Europe. Opened first retail/ showroom space in Stockholm and now they are embarking on an online
e-commerce site to expand on its reach.
UX Design, UX Research, and Interaction design.
Market Research, User Research, Information Architecture, User Interviews, Prototyping and User Testing, Interface Design, Low to Mid-Fidelity Prototype, Final Presentation Layout
Pen and paper: Wireframe
Sketch App: UX - UI Design
InVision App: Rapid Prototyping
Adobe Illustrator: Visual Design
Marvel: Prototype User Testing
Miro: Collaboration Platform
The opportunity was to design a brand new e-commerce website for The Forumist, a creative agency, and a magazine that is distributed in Scandinavia and Germany with over 100’000+ readers.
Founded in 2013, the aim of The Forumist is to bring together creative talents from all over the world, focusing on inclusivity and creativity. The Forumist expanded into their first retail space end of 2019, a pop-up store that would last 4 weeks that turned into a year and a half. Despite the pandemic, the store turned out to be a successful platform and showroom where creatives had a space to showcase their products and creatives to meet in person.
While the face-to-face experience for customers was the business’ priority, the client wanted to enable customers to purchase products online for delivery or collection in-store.
The site needed to encapsulate their business model;
Gender-neutral product focus, customer relations, the discovery of designers, and keeping it aligned with their brand identity.
It was first important to understand the difference in behaviors and shopping patterns between retail and online customers. This involved starting with observing customers in The Forumist retail space, researching the different shopping types, data gathered from market research, user interviews, and user testing.
The decision was made to get an MVP to the market ASAP with a longer-term vision to integrate the ‘gender-neutral’ as a feature of the existing brand identity. Different concepts were then explored through sketches, whiteboard workings, and interactive prototypes with constant feedback from stakeholders and developers.
This iterative process ensured a viable product could be delivered on time.
I began the process by identifying the main three competitors in the concept store market and comparing their online offerings. I was keen to identify common features across the sites and spot opportunities for The Forumist to be unique.
The competitors I decided to focus on were Dover Street Market, 032c & Hypebeast. Similar to The Forumist - 032c and Hypebeast use their platform primarily as a magazine and editorial content, with the shop button as a link in the primary navigation bar. Each competitor targeting slightly different customer demographics due to its product selection and price point.
Product recommendations, inspiration, and the latest news on the homepage were common features on all three sites. In addition, they all included designer profile stories, store information, and opening times.
I decided to combine my user interviews with contextual inquiry to get a sense of how people would go about using The Forumist concept store.
The purpose was to observe the shopper's habits and the store’s functionality. This was important as what users say and do, doesn’t always correlate.
Brand — Items were categorized broadly by brand, then by topics.
Customer Service — Shoppers heavily relied on shop assistants to find out about the brands and the background story of The Forumist.
Real-life product experience — Shoppers liked picking up the items, to touch and look at them 360°.
Save Function — Some shoppers mentioned they would browse and return another day.
I interviewed 7 customers, who frequent concept stores, to find out about their shopping process. In particular, I was keen to understand their goals and frustrations.
The majority preferred buying home and interior items in store.
Many didn’t trust the images to give them context for quality, size, and fit. Especially garments.
‘I like to touch and feel the items’
They all wanted products to see new products and the latest arrivals but wanted also to look through the sale.
The majority liked browsing by brand.
The majority were heavily persuaded by influencer posts on Instagram and were keen to share their own posts of their purchases.
Source of Inspiration
Instagram social media was the #1 choice when asked where respondents went online to get inspiration for purchases. The majority mentioned they preferred to go via Instagram Stories link to the official webshop than finding items posted as images in the feed.
This sparked some initial ideas for potential features for the site, such as including clear product pictures without distractions such as background colors or models faces or hair colors. Also clearly differentiating categorization of products.
The next stage was designing the navigation system. I was given an inventory of 30 of the store’s top-selling products as a guide. With such a large inventory of unknown brands and designers, it was essential to organize the information in a clear and understandable way.
I conducted a number of card sorting exercises with users.
Open Card Sort: Here I asked participants to organize the 30 products into groups that made sense to them, then name each group with titles they felt accurately described the content. This gave me an early indication of potential ways to group items and label the groups.
Closed Card Sort: From those results, I conducted a closed card sort. Selecting the most common group labels and presenting them to users to select where they felt the individual products would fit under these labels. This helped clarify whether those label categories would work for the majority of users moving forward with the designs.
Most users found staple products such as clothing and jewelry easy to categorize. However, with more specialist items such as pottery and art pieces users struggled to establish universal headings for these. Some wanted to categorize them into materials such as porcelain, metal, and wood. As the majority of the items were handmade, not all worked with traditional materials, which would mean that the categorization would become broader than the actual product offering.
From the results of the card sorting, I created a site map and navigation. With the site map acting as a visual representation of the website layout and demonstrating the global elements, as well as primary and secondary navigation.
Having been assigned a task for users to purchase a white shirt in the brief, I added an extra primary navigation label ‘View all news’, which hadn’t yet been tested in the card sort. I wanted to see if this product overview would be used as an option as a quick view before going back to look into individual brands.
Due to the number of products, without differentiation of brands, it made users frustrated as they expected to see more product info than offered and the majority felt this page was overwhelming and unclear if you cant zoom in on the products.
This allowed the potential for a news section in addition to a search by-product, which was supported by the competitor research and contextual inquiry. As I learned, later on, it was important that this label be tested.
Those items that users struggled to categorize, went under the heading ‘Home’’.
5 / 7 users mentioned they preferred to shop using Instagram Stories rather than a companies feed.
Desktop wireframes: from left to right, A B testing two homepages. Editorials from The Forumist magazine site was a 'distracting' part according to users, seen on the left wireframe. The shorter length of the homepage on the right was perceived more positively by users, seen on the right wireframe.
I then designed for user flow for the main task to map out how many steps would be needed to conduct it.
Following testing my paper prototype, I created digital wireframes using Sketch and conducted usability tests with 7 users, using a clickable prototype on InVision.
I conducted three rounds of usability tests, tasking users to complete the scenario from the brief.
Index — None of the users utilized the View all news category to find products as they preferred to use the alphabetical index, gender first followed with the product.
Instagram —I added an Instagram sharing option on the homepage based on user research. Generally, users liked this but found it distracting unless it led them to shop the products in the images.
I also made changes to the product list page.
Filters —I included a sort by price option, and the ability to filter by brand based research showing users were influenced by price and brand.
Sale —I included a Sale link at the bottom of the index in a contrast color, something the majority of users appreciated as the only pop color besides the images.
Why reinvent the wheel?
The limitations when doing a direct translation of The Forumist retail to online, became evident when the same customers that visit the physical store changed behavior when shopping online. Gender plays a role in online retail behavior, as half of the users explained it as a habit that “saves them time” when starting their journey by selecting a gender first.
To tackle the challenge of the two audiences' tiers, I created an information architecture based on everyone’s needs. The primary audience’s key actions are featured in the primary navigation, gender, and the main categories supported by subcategories.
The Index with designer names and brands
"If I would select a brand it would show the brands both men and women's collections? "
Product List Page:
Product Images — People liked that there were multiple images showing different angles and zoomed into details. They also liked that the images were all about product focus, without showing models faces which could be a distraction for some users.
Brand info — Users found artistic written text about the brand to be annoying and ‘too fashion-y’, and preferred facts or straight to the point short paragraph with a maximum of three sentences to be enough.
Get the whole outfit — Users preferred this from ‘You may also like’, as they are most likely to purchase items that are styled by a professional and that look nice together. Reason being that it saves them time to browse further to create an outfit themselves without having to see it assembled together.
Still need help — Users liked the placement of the email for additional help or questions, it added a personalized touch and made them feel special to have access for direct contact.
Users preferred this from ‘You may also like’, as they are most likely to purchase items that are styled by a professional and that look nice together. Reason being that it saves them time to browse further to create an outfit themselves without having to see it assembled together.
Product Images not showing model's faces
"I like that you don't see the faces, it makes it less distracting and more focused on the clothes."
"I didn't realise it was both male and female model's in the images."
I found through testing different types of product shots (professionally styled outfits, full-body photos, lifestyle photos, and product laydowns) that users responded the most positively to cropped photos where the model's face was not shown.
Regarding Visit Us
"I would think one of the images would show a map of where the store is in the mall. I would be helpful."
Regarding Follow Us
"Its a nice touch to see how it looks on in a noneditorial way."
Adding ‘Visit Us’ and 'Find Us' below the fold on the homepage of the site wasn’t part of the initial brief, however, I wanted to add them to test the user’s reaction.
During the user testing, it became a real focal point of the shopping journey in connecting their physical presence with their online shop. It took several rounds of usability tests to get this right, as I needed to uncover users' motivations and frustrations through testing rather than initial research. Yet, in doing so I uncovered a real potential USP and selling point for the product.
The solution came in the form of a ‘gender-neutral’ shopping experience where the prime focus is products and brands first hand with the gender filter option visible throughout the product selection journey.
The plan was to work on a mobile responsive website. This is particularly important, given the majority of The Forumist customers stated that they start their online shopping journey using mobile before finalizing their purchase on their laptop. Designing with clear product images and easy navigation being the two priorities rated by users.
Currently co-founder and the site is planned to be launched in September 2021.