The Final Word — Leading the way..

Contributors- Sonali Gupta (LinkedIn) and Anmil Vijay (LinkedIn)

Role- UX/UI Designer

Methods & Tools- Research (Includes Secondary research, Interviews and surveys), Empathy Map, User Journey, Competitive and Visual analysis, Brand Positioning map, problem statement, Ideate, Sitemap, concept validation, Low-fi, Mid-fi, High-fi and usability testing.

Time- 2 weeks

Project Background

The rise of the digital press has seen a tremendous peak over the last years. The audience is increasing as Millennials grow older, demanding all sorts of content. To overcome this demand,

We designed and prototyped an editorial website.

Role

As human beings, we get used to everyday things. Remember learning to drive? When I started learning to drive, my hands were trembling and clenched to 10 and 2 on the wheel, focusing on every single object out there. It was impossible for me to listen to music or talk to a friend sitting beside me. But gradually, I got used to it and driving became easy. People say and I quote “It’s all about getting habituated and it’s good”. Yes, I agree. It is good because then we will be able to learn new things, instead of focusing on every little detail, which will be exhausting. But in this process, we don’t pay attention to the problems around us, which stops us from fixing those problems. My job, as UI/UX designer, was to locate such problems and find a fix for them. Let’s find out how I did that in this project.

Empathize

User Research

As we started our initial research, we sent out a survey to the people who are fond of reading and conducted interviews. With 32 responses on the survey and 5 interviews, we had enough data to analyse. While interviewing users, instead of asking why and how, we asked users to describe their usual day, followed by why and how questions. Some of the responses were:

Response 1: “I start my day with preparing breakfast for myself and then while commuting to work, I try to read news on my phone”

Response 2: “I read articles during break and more often than not I lose interest while reading articles midway.”

Follow up question- How does that make you feel?

Answer: “It makes me anxious because I feel I wasted some time but that’s how it is. Can’t do anything about it”

For Response 1, the word “TRY” and for response 2, “LOSE INTEREST” were the triggering words. We started formulating questions around it. Like: You mentioned, You try to read while commuting. What problems do you come across? And many more questions around the triggering words to get to the root cause and gather pain points.

I am sure, you must have also noticed “THAT’S HOW IT IS”. Which is clear proof that people get habituated and accept these problems.

Now to gather pain points at one place, we made an empathy map and user journey. Following are the results:

  1. 86% of users read articles while commuting and they often find it difficult to read an article while commuting.
  2. 73% of users lose interest in the mid way of a long form article and find it annoying.
  3. 47% of users forgets where they left off while reading a long form article.

User Persona

Meet David. He is a voracious reader and wants to stay updated about what is happening around him. Reading helps him to develop an open and critical mind. He got accustomed to the problems he is facing in his daily life while reading and does not realize that those little problems are contributing to an anxious mind.

Goals & Expectations

  1. He would be able to read a significant amount
  2. He would be able to have a quick decision making process on what to read
  3. He would have a system helping him manage what he reads
  4. The longform content he would read would be well researched and have a good storytelling aspect to it

Opportunities

  • Create an effective way for David to be able to make selections for his day’s readings and to read articles while commuting or doing some chores.

Define- From Analyze to Synthesize

Problem Statement- Concise description of an issue

HOW MIGHT WE- Framing the question smartly

Now before jumping on the solutions, we decided to create HMW statements because it offers us the chance to answer them in a variety of creative ways.

Ideate and Test- Think smart and Seek Validation.

We started with the brainstorming session and wrote down 8 ideas on a piece of paper. With the help of user research and dot voting method the MVP was defined. Following are the key user stories:

  1. Article summary- User must be able to read the article summary before reading a long form article, which will allow the user to decide if he is interested to read the article.
  2. Audio Feature- User must be able to listen to the audio of the summary while he is physically busy with other activities.
  3. Mark where you left off feature- User should be able to mark where he left off so he doesn’t waste time rereading the article trying to figure where he left off.
  4. Save for later- User should be able to save the articles for later reading.

But that’s not it. We went ahead a step further and conducted concept validation to see if people would really be interested in these features. Below are the results:

  1. Read the Article summary- 94% of users will use this feature
  2. Audio feature for summary- 82% of users will use this feature
  3. “Mark where you left off” feature- 73% of users will use this feature
  4. Save for later- 71% of users will use this feature
  5. Reading for day/week section- 36% of users will use this feature
  6. Archive feature- 20% of users will use this feature

Design- Let your imagination go wild

With the clock ticking, I quickly did a visual analysis of other e-magazines websites. Meanwhile, my teammate was busy with competitive benchmark analysis including feature comparison. These studies helped us to know our competitors and make an offensive and defensive strategy. Following were the key takeaways from the analysis:

  1. All these magazines covered a wide array of topics which attracted the users.
  2. Saturated colors were used for the call to action button.
  3. Fonts in all the websites were easily readable.
  4. The websites looked really cluttered.

High Fidelity Prototype- Time to be Creative

Before directly diving into high fidelity, I made low and mid fidelity and performed usability testing. We received a lot of feedback on the screens and incorporated that feedback in our high fidelity prototype.

Let’s dive into the high fidelity screens now.

Video of Prototype: https://drive.google.com/file/d/16nzLNxlEHIbaYBTao3fDVGllzYrbGoxm/view?usp=sharing

Figma File: https://www.figma.com/file/m3IIyz4u3iLWpdupgjublb/Project-5-Sonali-and-Anmil?node-id=117%3A0

Usability testing results:

  1. 68% users struggled to use “Mark where we left off” feature
  2. 92% users successfully completed all the tasks given during testing
  3. 94% found the interface non-clustered
  4. 99% users liked the audio summary and summary feature

Learnings:

  • Simplicity is strength. As a designer, we are often lured by attractive, trendy and out of the box designs. But, We must always remember the ‘why’. The primary goal is to understand the user, their problems and then come up with a design that solves them.
  • The process is essential. For a project that is vast, it gives you a roadmap to navigate through what can be a foggy route. This is especially useful when you’re starting out.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sonali Gupta

Sonali Gupta

I am an aspiring UI/UX designer and in pursuit of perfection.