The Editor’s Market Case Study

Lim Evelyn
7 min readAug 26, 2020

| UXUI Case Study | Mobile Application |

Timeline: 7 Weeks • Materials: Sticky Notes, Pen , Paper, Figma

This case study is carried out by a team of four digital product design students. We’re are in no way affiliated with the existing web service of The Editor’s Market nor with any collaborators or related organisations, but an opportunity to learn more about UX research and design. At the same time, we hope to make a difference in contributing to a greater good.

Introduction

The Editors’ Market (TEM) strives to offer great design and quality fashion in an increasingly sustainable manner.

However, users are unable to recognise the brand or its unique selling point among other lifestyle fashion brands in the saturated market.

Target Audience

Young Adults / Working Women

  • Desire to make responsible and ethical purchases
  • Value intuitive experiences

Design Challenge

We have four design principles that drive our UI.

How might we improve the consistency, experience and brand identity of the app so that customers have a more memorable experience while shopping?

Key Aspects

We have four design principles that drive our UI.

To highlight key seasonal items, such that the brand identity becomes more prominent to customers.

Ensures that form follows function — gentle appearance which enhances the user experience.

Reiterate the brand mission of having sustainable wear.

NEW BRAND IDENTITY

We have revamped The Editor’s Market brand identity by introducing two sets of fonts and expanded their colour palette that matches the concept of environment and sustainability.

Next, we redesigned icons to more prominently represent the three sustainable fabrics — Lyocell, Linen and Cotton. The photography style remains the same, but is paired with warm complementary tones. All of these are reflected in our UI revamp.

Visual Identity

Low-Fidelity Sketches

We began with wireframe sketches, ideating ways to best arrange the content available.

Low-Fidelity Sketches

User Flow

For user flow, we mapped out a user navigation from the Home page, to a special campaign screen. From the campaign, users will be led to a curated product category page showcased with a carousel, followed by the specific product screen with a pull-up drawer.

SCREENS

According to the user flow, here are the 5 screens we made for the prototype to provide a better user experience.

The Proposed Prototyping

Comparison

These are the 4 key improvements we have made. The differences from the current mobile site and the ideas proposed by our team.

Clearer navigations

  • Simplify the main navigation to improve user visualisation
  • By having a Top navigation bar that is easy to move across the screens.
  • In order to help users discover the latest collections, we try to highlight call-to-action to guide users to find out more in the campaigns.
Clearer Navigation

Product hierarchy

  • The content is presented minimally at 1st glance
  • Condensing the list of the products in a format instead of long scrolling
  • Key products are highlighted prominently in cards.
Product Hierarchy

Additional button

  • The heart icon allows users to keep in view the products that users have an interest in
  • This improves convenience for users to track their favourites without making a purchase or forgetting the products.
Additional button

Lastly, the most important update will be Brand proposition

This is closely related to our design system

  • Sustainability icon is replaced with a more outstanding design instead of using a colour dot at the bottom of the photo.
  • The icon appears more prominent and visible to the users.
  • This reinforces the brand identity across the screens.
Brand proposition

Summary of Design System

We are using the atomic structure to divide our design system into three parts:

atom > molecule > organism

Design system which consists of our components — Branding / Button / Icon / Drop-down menu / Navigation / Cards.

Design Principles

Overview

Here you can see how we utilise the atomic design methodology to transform from our basic design elements, like the fonts and icons, we call atoms, to molecules, to organisms, into the finalised screen.

Overview

Let’s go through the process in more detail.

Atom — Icons

Starting with atoms, we created three icons for each of the sustainable fabric in Editor’s Market’s clothing line. This ties back to our design principle, reiterating our brand’s mission, which is sustainability.

These icons would constantly be presented throughout the app.

The sustainable fabric icons

To ensure that the new icons can be adapted seamlessly into the app experience. We created these guidelines so they can be easily utilised on diverse backgrounds.

Icons in the app

Molecule — Cards

Moving up to molecules, we have cards. Here is an example, the campaign description card. Its purpose is to introduce the user about the campaign and its clothing lineup. The usage of the new icon allows the user to quickly identify the sustainability core of the campaign.

Campaign Description

By combining some ‘atoms’ together, we have a molecule. The cards are made up of the text, icons and button. Etc.

Cards can be used for a multitude of functions, but the purpose remains the same: to group related information together in a component.

The campaign cards are designed with a matching image in mind. It helps users to easily identify each campaign by its accompanied background image. And the campaign card just simply doesn’t work well with a plain background.

Design System

Molecule to Organism — Cards

To showcase our products in the campaign we are using a carousel to display the collection of our featured products.

Each product is displayed using a product card that contains an image with a primary and secondary text label and a heart icon. The advantage of using a carousel is that it allows users to browse through the featured products from the campaign at a glance. We have included the prominent sustainable icon to symbolise the sustainable fabric in our products.

Product Card/ Carousel

Molecule — Cards

When designing a card, one of the considerations is to ensure that we have a max of 6 featured cards in the carousel and at the last card, there should be a “Show more’ button that allow users to view the full range of products.

Do’s & Don’ts

Organism — Cards

Next, We are using a pull up drawer card in the product page. The pull up drawer allows users to expand the card to view detailed information about the product, favourite the product and add the product to the bag . If the product uses a sustainable fabric, it would have the prominent sustainable icon at the left corner and a sustainability tab which contains information about the sustainability impact of the product on the environment.

Pull Up Drawer

When designing the pull up drawer card, there should not be more than 3 fixed tabs at a time.

Do’s & Don’ts

Conclusion

By highlighting key products via a campaign, users are drawn to a themed shopping experience.

Having a sustainable icon for users helps to recognise the brand with ease in an oversaturated fashion market.

In all, by streamlining the information it allows users to digest the content more effectively.

Mobile Prototype:

https://www.figma.com/proto/adXRzvVHFc3xRQtLxLpLZ6/Design-System---The-Editors-Market?node-id=453%3A6&viewport=540%2C383%2C0.298794150352478&scaling=scale-down

--

--