Case Study: Ssense iOS App
Ssense is an online retailer of high-end fashion and streetwear. Despite increasing popularity, they have yet to convert their online experience into a mobile app.
The challenge
Ssense is a Montreal 🇨🇦 based fashion platform merging e-commerce and editorial content. Known for its selection of over 400 brands including Givenchy, Rick Owens, and Alexander Wang. Despite the retailers increasing popularity, they have yet to convert their online experience into a mobile app. My challenge is to transfer the retailer’s web experience into a dynamic and engaging mobile app.
User research
Designing with users in mind is the best way to create an engaging experience. User Research is understanding what concerns are top of mind for users? How do they really behave? How are people using your product? What motivates, frustrates and delights them?
The project didn’t allow the time or budget to conduct in-depth research. However, when it comes to research, some is better than none. Guerrilla research is a faster, low-cost method, that can provide sufficient enough insight to make informed design decisions.
When searching the web, I came across interviews with the CEO Rami Attallah, Director of Design, Editor in Chief, Head of SEO and Menswear Buyer. From these interviews and further research, I uncovered insights into the retailer’s business objectives, consumers, products, and their unique selling point.
Users
- Almost half of the consumers live in the United States. 18% are from Canada, 10% from China. Others live across the globe in places like South Korea, Australia, Hong Kong and Japan.
- Almost 80% of consumers are between 18 and 34 years of age.
“Ssense’s customers are big spenders, like marketing executives, musicians and athletes who don’t think twice about dropping an average of $900 on a piece of clothing … Less affluent shoppers buy single items — a $375 Marc Jacobs sailor blouse, perhaps — and mix it up with lower-priced staples” — Rami Attallah, CEO
Editorial Content
- Consumers who click through editorial content spent 7% more on purchases and return to the site 300% more often than those who don’t.
“There’s a lot of content out there, often lacking depth, or repetitive or over engineered for clicks. We’re not interested in producing trend-driven content. We believe that if we produce compelling content that increases the cultural capital for our audience, then positive business repercussions will follow.” — Rami Attallah, CEO
Personas
Findings
- The Ssense community appreciates luxury, high-end fashion and streetwear as a result of its place in contemporary culture. Fashion provides an opportunity for creativity, communication, and personal pleasure.
- When users immerse themselves in the editorial content they feel part of an intelligent, open-minded global community. Consumers believe purchasing a product from the Ssense store reflects their cultural capital.
- Consumers do not purchase for rational considerations, but for its effective and emotive power.
“The object is no longer the source of esteem, rather the consumers’ cultural taste is celebrated — their ability to distinguish objects reflects their superiority.” -William Leiss
Information architecture
Navigation to desired information is easy and efficient. Only slight changes to the website’s hierarchy ensure an intuitive experience for users familiar with the online platform.
- Home - Features the latest news and articles.
- Shop - the place for browsing all clothing and accessories.
- Wishlist - A collection of products saved by the user. Products in the Wishlist suggest interest, but not an immediate purchase.
- Bag - A holding place for products before checkout.
- Profile - Settings and information associated with the user.
UI Design
The Ssense website has a truly unique UI Design. However you describe it — either bold, edgy, provocative or unapologetic — the site falls victim to the anti-design trend.
The anti-design trend is a reaction against the perfectionist aesthetics of modern user interfaces. Although it looks unorganised and random, the site has been strategically designed to stimulate the consumer’s creative expression.
“Before doing it, [Brutalism and Anti-design] really think about whether adopting it would be best for your organization and your users. Are you shaking things up because it will truly improve how users/customers/readers feel about your product, or because you are bored and feeling unchallenged?” — Kate Meyer, Nielsen Norman Group
For usability purposes and mobile-specific design considerations, the UI Design has been updated. Rubik and San Fransisco are the new font styles, and all UI components are arranged systematically. The minimalist style and neutral colours draw the users attention to the bold headers and emotive imagery. The new design improves the Ssense experience for the mobile environment.
A revamped homepage
The homepage is split into three subsections — Latest, Articles and Videos. Tabs allow users to quickly jump between each.
- Latest - The latest page acts as an activity stream. Displaying a mix of editorial content, promotions, clothing and related content. This is the first screen displayed when opening the app, it’s engaging and keeps users updated with the latest news.
- Articles - Editorial content is displayed in chronological order.
- Videos - Adapting for the ‘on the go’ user, a subcategory for video content is included in the mobile app. This page presents videos for quick and effortless consumption.
Tabs optimise screen space without sacrificing the amount of easily available information.
Closing the gap between the physical and digital shopping experience
Many e-commerce sites allow users to browse only one item at a time in a linear manner, or by filtering results. This method of discovery doesn’t align with consumers shopping experience at their local store. More often than not consumers are browsing the store, in the hope of finding a rack of clothes or a display that catches their attention. Consumers are rarely searching in a linear manner, from one item to the next.
While scrolling through an activity stream, users are able to swipe horizontally to view a group of related products. The image overlapping the edge of the screen signifies that the interface supports a horizontal swipe.
The horizontal swipe gesture acts as a digital alternative for flicking through a rack of clothes. When shopping, consumers are browsing and scanning for something that grabs their attention. When this happens, they take a closer inspection of the item before either discarding it or adding it to their bag.
The Ssense mobile experience allows for consumers natural shopping behaviour.
Finding the right item
The expandable filter module overlays from the bottom of the screen and demands the user’s full attention. Search results can be filtered by gender, category or designer and sorted to suited the users preference. The filter tabs clearly indicate which filters are active and make it easy to edit.
With over 400 brands, navigating through the Ssense website can feel overwhelming. To reduce cognitive load, the brand names fill a limited section of the screen. The horizontal slider allows the user to browse the brands in alphabetical order. The highlighted letter above the filter options makes finding the desired designer intuitive.
The product page is the stepping stone between browsing and purchasing. It is the focal point of the shopping experience. The ability for consumers to find product information is crucial to conversion and the purchasing experience.
From the product page, consumers have the option to enlarge the product images for a closer inspection, add the item to their Wishlist or Bag and browse related products.
Thanks for reading ✌Check out the rest of the project on Dribbble.
