A responsive editorial website — UX case study
Fashion magazine website
Here comes another challenge of Ironhack’s UX/UI Bootcamp. For this project I worked with a team of two others; Lotte and Lucie. We were given a challenge more focused on UI with a deadline of one month.
Challenge
Design a responsive online platform for a magazine, newspaper, or blog directed to meet the needs and goals of one of the presented User Personas.
Persona
The persona was already provided. Our persona was Candice. Let’s explore how she is.
Candice (28) — The Trendy Marketeer
- She reads Vogue, People, Cosmopolitan, Elle.
- She sees herself as a trend-seeker and uses publications as a source of inspiration for work.
- She reads whenever she has a free slot — especially in public transportation, long journeys during work trips, or waiting areas.
Goals: be on top of the latest trends, dress and appear fashionable, get more tech-savvy.
Research
With an existing persona, we started doing research on some of the magazines she is interested in. As Candice reads most of the popular fashion magazines, we analyzed Vogue, People, Cosmopolitan, and Elle to know the market.
Then we wanted to validate our findings by interviewing users. Some of the feedback we received from users about the magazine is:
“ I look for trends from different parts of the world.” — Farah
“ I am interested in city guides with hotspots, stores, and shops when traveling.” — Irene
User Journey
Based on our research we combined everything we collected from our interviews and User Persona in the User Journey to see where there are problems, and what opportunities can we derive from the expectations of our users.
After analyzing the User Journey, we learned that there is a lot of information on what to wear and this should be easily accessed based on one’s interest.
We collected all this feedback, which helped us to define our problem statement.
Problem
Candice needs to know the latest fashion advice to pack up her summer vacation suitcase because she is overwhelmed by all the choices around her and in her closet.
Hypothesis
Based on our research we found a solution that might help our user, Candice. The idea is to have the option to collect the articles of your interest in one space to read them later or read them again, which leads to the foundation of our online magazine, Grace.
Then we followed the Moscow Method to prioritize which features to include in the magazine.
The minimum viable product (MVP) would be an e-magazine website that enables trend-seekers to find information and expert advice on style, trends, and fashion. This mainly helps users to organize their closets and style their wardrobe by showing articles and tips on what to wear.
Ideation
To understand how to compile these features, we created a site map that defined the information architecture and hierarchy. In the sitemap, for now, we put details for the fashion category only according to our user’s needs.
Site Map
User Flow
We then considered our user’s navigation behavior while engaging with the website. We thought about how Candice would reach the required article and save them for later reads.
This defined our happy path which we used to create concept sketches and thereafter low fidelity wireframes.
Lo-Fidelity
Our low-fidelity wireframes detailed each screen in the happy path. We used these sketches for concept testing before digitizing the design as a mid-fidelity in Figma.
Mid-Fidelity
It was followed by mid-fidelity frames in Figma.
Usability Test
We tested the Mid-Fi with 5 users and below is their feedback.
The ‘bookmark icon’ on the articles and the ‘reading list icon’ in the top bar looked the same, which the users did not like much. So we modified the bookmark icon.
The three dots on the right side of the bookmark icon on the Article Page were confusing for the users. They could not understand where they lead to. Also, they found the article description missing and the picture too big. So we removed the three dots and replaced the big picture with a smaller one while adding some description to the article.
Two search icons on the reading list page were also confusing for the users. So we removed the three dots and search icon., keeping the top bar’s icons only.
After making these adjustments we tested again and when asked, all the users were satisfied with the design and took lesser time to navigate.
Design
Visual Identity
How should our magazine look like? Before beginning the high fidelity design we did a visual competitor analysis to ensure the aesthetics of our magazine. We observed the use of understated typography and limited colors. These help the user to quickly find what they are looking for without unnecessary distraction.
Moodboard
We then created a mood board to capture the feel and attributes of the brand that was: stylish, modern, successful, contemporary, and international.
We did product reaction tests with 8 people. They found it personal, elegant, soft, emotionally flat, and intimate which was not communicating our brand attributes. So we updated the mood board according to the feedback. Then we tested again and got positive results.
Then we started brainstorming on our colors and typography. The look and feel we were going for were modern and contemporary. We wanted to keep our design simple with a pop of color to highlight some parts of the page. For this, the accent color we picked was ‘yellow’ as its stand for confidence and optimism, which we wanted to show in our magazine. The primary color we picked is ‘dark grey’ as it represents classy and high-end. A minimal color palette of dark grey and yellow is designed to work well with content that is very visual, including diverse photographic editorial images. White background and dark grey text make the editorial website easily readable.
For the font, we chose Avenir as it has a modern feel to it which we were going for in our magazine. The font is both open source and web-friendly. We named the magazine ‘Grace’. Grace is One of the most elegant girl’s names and it literally means elegance. The virtue name is subtle and classy. We made the logo simple and recognizable and memorable, keeping the brand attributes in mind.
Style Tyle
Then we compiled a style tyle putting together the colors, fonts, and styling we chose for Grace.
Designing for flexible and responsive layout
Using our brand guidelines we created a UI kit that worked within a flexible grid system across multiple screen sizes. Following an atomic design system, we designed consistent elements that were used across the website.
This is how our design will look on desktop, mobile, and tablet.
Hi-Fi Demo of Grace
Let’s visit the Grace website now!
Here is a link to the Figma prototype.
Next steps and learnings
Our desirability tests revealed positive feedback. Most users found Edge creative and clean. Many also commented that it was accessible, attractive, and inspiring.
As a next step, we would complete the tablet and mobile high fidelity and then test, implementing user feedback.
One of the key things we learned during this project is responsive designing for multiple devices. This time we were more focused on the visuals, which made more UI learnings.
