In early 2017, Société hired us to design their new e-commerce store where users could browse and buy collections of selected contemporary designer brands. In the midst of the Central European cultural and fashion movement, Société’s headquarters are in a beautiful building (Société House) that hosts the physical store, restaurant, offices and multimedia studios. They also organize contemporary fashion, art and gastronomy events and even have an accelerator program for young designers.
Our project team consisted of four people from the client’s side (head of fashion, head of communications, creative director, digital project manager) and two of us from UXstudio. One of my colleagues, Tímea Falmann focused on the research, with me mainly on design. All their different perspectives on the product we were building made working with the Société team incredibly useful. Learning about the industry would have proven much more difficult without their help.
1. Creating personas
As a first phase of the product design process, we carried out several interviews with people from the target audience and identified three main personas for this e-commerce UX project.
She loves fashion and wants to stand out in the crowd. As a young adult, she has to save money to buy designer clothes and accessories. She is price-sensitive but tech-savvy.
She earns an above-average salary. As a single woman, she wants to express her personality with unique clothes and can afford designer items. Always online, she uses her phone for surfing the internet while on the go.
She is a mature woman, she has her own style but doesn’t always know what to wear. Getting help from professionals is part of her shopping experience, so she prefers brick-and-mortar stores. She isn’t particularly tech-savvy, but uses the internet quite often. Eva is wealthy and wants special attention for her money.
2. Identifying user needs
In a project revolving around e-commerce, UX research has to focus on the journey the user goes through while preparing for, in the act of and after shopping. Based on what we found out about our personas, we created user journeys to map their assumed experience.
With the help of the journeys, we:
- managed to identify and highlight many problems our customers faced at that time
- understood how they interacted with similar websites and what they expected from them
- discovered their pain points and learned more about what they felt at different stages of using an e-commerce store
- identified functional requirements and gathered ideas about how we could solve some of the problems.
After organizing all the insights from the exploration phase, we started designing the web store. For this, the main tools we used were paper sketches, an interactive prototype and user testing.
When it comes to discussing different solutions and testing with real users, paper sketches can be really useful. Here you can see some of what we created during the Société project.
After we validated the main concepts, I created an interactive prototype with Axure RP (which worked surprisingly well for an e-commerce UX project as well). We improved the prototype during many iterations, which I found really exciting. The user tests resulted in a lot of information, including valuable insights on how to solve users’ problems. If you want to know more about our favorite design software choices, I recommend you check out Dávid’s post on UX design tools.
We led several user tests in order to validate our hypotheses, during which users’ insights were collected using various techniques.
E-commerce UX challenges
The following section covers some of the most interesting problems and also shows how we solved them.
1) The home page experiment
We had to pay special attention to the homepage because that is what users see first and it is the most important one among the touchpoints. We had to find out what they wanted to see there and considered the most important elements in an e-commerce UX setting. Since we had a tight schedule, we had to find a UX research method that makes creating and testing the iterations really fast. ⏳
“The home page should tell me what the store deals with.”
Before starting to work on the homepage of the prototype, we carried out a quick card sorting test to discover users’ mental models of landing on an e-commerce site. We created some cards of possible homepage elements and asked people to group and organize them in an order that made the most sense for them. They were allowed to create new cards as well.
We also tried a new method, story-framing, which Fabricio Teixeira wrote about in this article. It basically describes what a page would cover. 📖
How we did it:
Based on the user interviews and the card sorting sessions, I had a homepage concept in mind. I opened up a Google doc and designed the page with words, basically answering the question “How would you tell a friend what this page addresses?”. Then, we made quick iterations – we could easily modify the copy and change the order of the text blocks making the iterations very quick.
How the story-frames helped:
We could explain to people what the homepage would address even before creating the prototype with little effort. It helped us focus on the page’s structure and core message without the visual clutter.
The final story-frame:
“Hi, we are Société, and we’ve collected a large selection of European designer brands for you in one place.
This is an online store – we provide free worldwide delivery and in-store pickup. Yes, we have a physical store as well. 🙂
Check out the new products from various great designers or browse the categories.
By the way, if you subscribe to our newsletter, you get 10% off your first purchase.
Want to know more about our designer brands? We collected them for you here.
Of course, we post awesome fashion related photos regularly on Instagram.
We also write articles that might help you make a decision about the best combination of your items, choose the best colors for your eyes or what to wear this summer. In the articles, you can also find recommended items you can buy right away.”
2) The popup blindness paradigm
Bianca, the price sensitive persona, wanted to know if she could get any discount on items. She didn’t want to have to dig deep: she needed something obvious.
“I always check if there’s a discount first.”
We decided to highlight the discount available to our newsletter subscribers. Most e-commerce sites simply throw a large subscription popup window right into the customer’s face. They assume that this will do the job, but not quite. We found that people wanted to get rid of any popups blocking their way because they perceived them as advertisements. So, I made a little tweak and designed a slightly different modal window that doesn’t appear in the middle, but slides up from the bottom-right section of the screen (on desktop).
People would notice the animation sliding up, but didn’t feel the urge to close it asap. Most importantly, it didn’t bother them.
3) The convenience factor
The younger segment of our target audience found browsing item photos in online stores very time-consuming.
“Let’s say there’s a dress I like and I want to see more pictures. I have to open the description page of that dress to see all the pics, right? It just takes forever…”
We wanted to show all the pictures of an item right from the list / category page. We implemented a quick-view solution in the prototype, a simple carousel that can be used to check all the photos of an item. Our users loved it.
4) Presentation complexity
Since we took no product photos at that time, we could do some research on what people wanted. We carried out a preference test, showing different photos of dresses (taken in a studio / outside in natural light, of a dress alone / on a model, etc.) to some of our users and asked them which they liked and why.
“It might sound weird, but the model’s hair color actually matters.”
During our tests, we found that the perfect clothing showcase should have all the components listed below.
- Simple photos of the item alone (front and back) taken in a studio
- Photos of models of different heights / hair colors wearing the item (it is easier for people to imagine how it would look on them if someone similar to them is wearing it)
- Models wearing the item in natural light
- A video to show how an item would look while walking
- “Mood images” that show how the item could be worn in a real-life situation
5) The size chart conundrum
All the personas got anxious choosing sizes online. They all worried the item wouldn’t fit after all. They complained about usually seeing only standard sizes (like small or medium) on websites, which gives absolutely no information about the actual size.
“How should I know the right size when they don’t have a proper size chart?”
We wanted to create an accurate, easy-to-use size guide, so we designed one that compares different standards (including measurements in inches and centimeters).
We also designed the interface in a way that allows users to see each models’ height and the size they are wearing right below the item photo (it’s especially important if there are photos of more than one model).
6) The recommendation stimulation
Eva, our third persona, sometimes doubted what items went well with others. She wanted personalized fashion advice.
“Sometimes I find it difficult to choose the right piece for myself.”
- In order to help people become more confident about their choices, we added a “pair with these” section below the item description, so they can see other items that go well with the product.
- We also recommended Société to take at least one photo of each item where the model was wearing it with other items and accessories.
- We tried to make the information about the physical store (contact information, location on map, opening hours, etc.) more accessible, encouraging people to visit it if they needed further assistance.
7) The checkout displacement
All of our personas became stressed at the online checkout process, being afraid of technical problems or security issues.
“No way it’s gonna be smooth. Paying for stuff online always gives me a hard time.”
We created a straightforward checkout process with steps that people found easy to understand, including:
- delivery options,
- shipping address/pickup details,
- payment options,
This e-commerce UX solution combines the benefits of the single and multi-page checkout methods: all information fits on one page (customers can see all the steps), but only the active section opens, so they can focus on one step at a time (eliminating interfering factors). Users found this solution helpful because they could see their position in the process and could also easily go back to a previous step.
We found that people perceive the checkout process trustworthy if:
- we actually tell them it is secure, by placing a “secure checkout” label somewhere,
- they can use the interface easily and have an overview of all the steps,
- we mention partner companies (banks, shipping companies, etc.) they trust.
8) Email automation
The client requested that we create automatic email templates (successful order, item shipped, forgot password etc.).
Although they did not hire me as a copywriter, writing interests me a lot: for me, the customer journey doesn’t stop at the end of the checkout process. These emails comprise of very important parts of e-commerce UX. The more control I have over the product, the better the chances I can achieve a great user experience.
Once we managed to come up with working solutions for the identified problems, I started designing the final user interface.
We followed a mobile-first approach. Designing pages for smaller screens first (focusing on the really important features and simple solutions) usually comes easier, and then we can create them for the bigger ones as well. Also, most of our target audience consumes content mainly on mobile devices.
While creating the user interface, I paid special attention to the brand characteristics (feminine, mature, high-end, minimalistic, helpful) and the personas’ needs (sophisticated, unique, and extra things).
I loved creating these pages, especially for mobile, since I found it more challenging (mainly because of the small screen size) – some of the final pages follow below:
E-commerce UX takeaways
All in all, I really enjoyed the chance to work on Société Store with some truly amazing people! I learned a lot about both the fashion industry and e-commerce UX.
My main takeaways include:
- Research is key – We couldn’t have designed a product our users love without the help of the people who will actually use it – it might sound like a cliché, but in good UX this always holds true.
- Dare to experiment – Doing so in a real project might sound scary, but fortune favors the brave! For example, story-framing proved itself a very exciting and useful research method, but we had to try it in a live situation.
- Small things can make a huge difference – Changing the newsletter subscription popup’s position or adding a “secure checkout” label don’t seem like big innovations, but they made user frustrations disappear. If uncertain, A/B testing can help in deciding such questions.
- Don’t judge a book by its cover – Writing all the email templates sounded frightening, but it became a very exciting and important part of designing a complex service. Controlling a bigger part of a service means I can make it more consistent, which may result in a better user experience.
Thanks for reading!
Want to see more of our past e-commerce UX and other projects? Read more case studies to find out more about how UX studio can help you achieve your business goals.
If you are new to UX and would like to learn the basics in a blink of an eye, we recommend you check our free e-book, the Product Manager’s Guide to UX Design.
And there is an additional reading for you! We have an actual hardcover Product Design book as well. And we ship it worldwide – for free!
Have a question or a story to tell? Feel free to leave a comment.