Redesign Highly as a Mobile Application

I chose to redesign the “Highly” app to develop my research and design skills. My role was to analyze the app and then redesign it on Sketch software.

My working process

The Introduction

When you read some words that make you shout out “wow”, you definitely want to save them. I used to take screenshots to preserve these words, but I never browsed my photo albums again. A few months ago, I downloaded an app called Highly, the name of which comes from the fact that the app allows you to highlight the text that you are inspired by. Highly can help users easily highlight words by swiping with fingers and saving inspirations.

The Information Architecture

I have mapped out the information architecture (shown in the figure below) and thought about its logic. Here is the general overview and I looked into it in the following paragraph.

The information architecture
The original user flow

The original user flow focuses (shown in the left figure) on the interaction of “highlight action” and “connect action”. The “highlight” action allows users to highlight words swiftly. The “connect” action allows users to follow others and read their highlights. They can also share highlights on social media.

A First Impression of Highly

The home screen contains random highlights from other users.

Figure A: Tutorial, Figure B: Home screen, Figure C: Home screen (continued)

My Reflection

In Highly, I found the highlighting function to be fantastic. However, after several times of highlighting, I gradually stopped using it because there was no reward mechanism or feedback for me to continue using Highly. The reward mechanism, which makes people hooked, is unconsciously rooted in most social media. Taking medium.com as an example, if your work gets claps, you know that someone appreciates the work. In that case, you will desire to get more claps and continue to write on the website. Therefore, Highly needs a better reward system.

User Research

Persona: Ideal Users

  • Age: 20–25; Device: iPhone
  • Frequency of use: once a week; Needs: highlight, see other highlights, and find interested people

This redesign includes the improvement from users’ perspective. To conduct user research, I asked my friends as new users to complete three tasks: (1) highlighting a sentence of a random article from Safari, (2) browsing what’s on the home page and describing how you feel, and (3) sending a friend request to someone that you are interested in. After accomplishing the tasks, participants were interviewed to say what is confusing when using Highly.

Problems and Solutions

The following is the problems and the solutions to them.

  • Confusion 1: What to do next?

Highly gives beginners a tutorial on how to use the app. They were well educated in how to swipe through texts to highlight for the first time, yet they did not know what to do when coming to the home screen of the app. There is not enough guidance like pop-up windows or obtrusive icons to tell them where to start. The plain home screen makes Highly seem just like a reading platform.

A clear and user-friendly icon should be positioned at a salient place on the home screen. Like apps emphasizing their core functions, Highly’s main function is to highlight. At the bottom of every page, I want to remove the connect icon which is like a misleading wifi icon and add a red bold exclamation icon, strengthening the capability of highlighting. Since it is the only colored symbol on the home screen, users can be guided to experience Highly as a tool more than a reading platform.

  • Confusion 2: Why did this guy highlight so much stuff?

As Figure B shown, some users tend to highlight several paragraphs, which decreases the readability of Highly. When users saw long paragraphs, they were more likely to skip to read the next user’s highlight. They did not pay attention to long highlights and the source of highlights at the bottom.

Users easily go through information overload when playing around others’ highlights. To reduce their cognitive load, I need to compress long highlights to avoid distracting or disengaging users. Therefore, users can see two to three highlights on a single screen. The standard length of folding will needs to be tested with prototypes in the further research.

  • Confusion 3: Why can’t I see things in other categories other than popular?

The red circle next to “Popular” looked like an important feature in Highly. A lot of users attempted to tap the red circle or the text to switch categories, but this function did not exist. In addition, the search bar only works when you search people by their name. The users were frustrated by not being able to control what they could read and explore. The apps where I regularly instill my thoughts or ideas mostly share a common characteristic: being able to interact with others by exploring their work. Similarly, Highly needs a new feature: Tag! Tag allows users to read highlights tailored to a specific tag. Users can subscribe tags and pin them to the home screen. It is also encouraged to create and search tags.

  • Confusion 4: It’s hard for me to make connections.

An interesting feature that Highly suggests is making connections to people in Highly. However, in this small app, it is hard for users to find friends. A user complained that he could not check the original user who highlighted the text but saw a bunch of avatars (profile images) re-highlighting it. It’s hard to discern the original creator from other people. They want to see the commonality (i.e. the same highlights) between another user and themselves. For those who are eager to highlight cool things, seeing others re-highlighting their own highlights is exciting. However, to users, others’ endorsement erases the originality of highlights. The current way of showing endorsement is displaying avatars one by one on top right of the text.

Alternatively, I would like to put a small highlight icon like an exclamation mark instead while the number of re-highlights would be preserved. On top left of the text, the red circle next to “Popular” would be replaced by the original creator’s avatar. Presenting the originality of highlights also enables other users to know interesting people highlighting inspiring pieces, and then connect with them.

The Improved User Flow

The new user flow

The new user flow added “browse highlights and get inspired” as the exploration function, which mutually directed to “highlight action” as a tool and “connect action” as a social tool. The former design tried to lead users from highlighting to connecting, but a mediator between them was lacked. This new flow enabled users to take initiative to explore.

Redesign

Sketches and Wireframes

Sketches

I designed two versions of the re-highlight icon using an exclamation mark or a circle. My concern is that if a user sees two identical icons on the screen, they will be confused. Then a user test was conducted to decide which one worked better. The result of the test indicated that users noticed the same icons and they would try to tap either one to see how it worked. Most users thought it would be better to use the exclamation mark in consistent with the exclamation mark at the bottom.

First line: redesign with an exclamation mark as the re-highlight icon, Second line: alternative design with a circle as the re-highlight icon

Wireflow

I used green arrows to explain how users would interact with the interface.

Wireflow

TBC

Like what you read? Give Ruiqi Fang a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.