Société Store
UX Studio
User Experience & Digital Product team
Made with

Société Store

E-commerce UX Case Study

The client

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.

The team

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 UX studio. 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.

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.

Bianca👩‍🎓

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. 

Lara👩‍💻

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.

Eva👩‍💼

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.

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 storei
  • dentified functional requirements and gathered ideas about how we could solve some of the problems.

Prototype

After organising 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.

After we validated the main concepts, we created an interactive prototype with Axure RP. We improved the prototype during many iterations. The user tests resulted in a lot of information, including valuable insights on how to solve users’ problems.

User testing

We led several user tests in order to validate our hypotheses, during which users’ insights were collected using various techniques.

Challenges

The home page experiment

Problem

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.”

Solution

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.

The popup blindness paradigm

Problem

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.”

Solution

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, we 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.

The convenience factor

Problem

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…”

Solution

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.

Detailed Design

UI Design

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, we paid special attention to the brand characteristics (feminine, mature, high-end, minimalistic, helpful) and the personas’ needs (sophisticated, unique, and extra things).

Takeaways

All in all, we really enjoyed the chance to work on Société Store with some truly amazing people! Our 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.