UX Designer
Mock up 3 Blue.jpg

Read Later App

 

Read Later App

 Hi Fidelity Prototype for my Read Later App

Hi Fidelity Prototype for my Read Later App

Brief

For the first project for the UXDi course at General Assembly the brief was to create a simple mobile application for our classmate to solve a problem they encounter frequently.

Challenge

To create a mobile app which reminds the user to read saved articles.

Solution

A notification reminds the user to read a saved article at a time that is convenient for them, they are then able to archive it in a folder. By inputting infomration in a quick and easy way make it encouraging for the user to utilise whilst on the go.  


Background

Ishy was my core user, a young designer from East London, he enjoys reading articles he findings online through Social Media (LinkedIn and Twitter).  As he often discovers these articles whilst communting, he quickly saves them into his Bookmarks Folder, but forgets to read them later that day.

Ishy expressed an interest that he wants to read current articles for leisure and work but he forgets to. The tool he currently uses is Google Chrome, which saves the articles to the Bookmarks folder; the constraints of this browser does not allow him to easily categorise nor does encourage him to read. As a result, it leaves him feeling intimidated when he ventures into his folder to read an article when he has limited time to. 

 Ishy's Bookmark Folder in Chrome

Ishy's Bookmark Folder in Chrome

 

User Interview

I conducted a User Interview with Ishy to gain an insight into what he identifies as a problem that he felt could be solved with a mobile application. It was clear that Ishy was interested in learning and improving his knowledge of his work and hobbies. 

  • Ishy saved lots of articles he would like to read, but he never remember to read them. 

  • Ishy needs to be focused when he reads, so he can give his attention to what he is taking in. 
 Conducting a User Interview with Ishy

Conducting a User Interview with Ishy

“I enjoy reading! I bookmark many articles, but I need to be focused when I read them.” — Ishy
 

Concept Mapping

By creating the concept map I was able to identified the actions and habits that would prevent Ishy from reading.

  • He has an interest to learn and read, but would like a gentle reminder to do so.
  • The time of day he prefers to read saved articles.
  • His routine and habit of saving and reading articles. 
  • The difficulties he encounters, with articles not being categorised. 

The problem statement I was addressing in this sprint was: Ishy reads an article that he has bookmarked. 

Concept Map.jpg
 

Storyboarding

Through storyboarding I explored the specific problem and situation in which Ishy is on the bus, he sees an interesting article he would like to read, but he doesn't' have time to read it. He uses the Read Later app to schedule a reminder to read it later that day. He receives a reminder about the article and why he saved it. Ishy feel great as he has managed to read a saved article and he can review his reading list. 

“I don’t want to miss anything from my timeline.”- Ishy

Screen Shot 2017-11-12 at 14.03.46.png
 

User Flow

The user flow  represents the actions a user would take in the app to read a saved article.

Wire Flow.jpg
 

wireflow

As the app is use whilst the user is on the go, the interface has to be simple and easy to use allowing the user to scedule a reminder. 

 Wire Flow

Wire Flow

 
 Walking through the Wire Flow with Ishy. 

Walking through the Wire Flow with Ishy. 


Paper prototype+ Testing

My initial sketches for the paper prototype was based on the wireframes and wireflow. 

Screen Shot 2017-11-12 at 17.42.34.png

Through testing the key finding were:

  • Users wanted to know in the 'Setting a Reminder' screen how long it takes to read an article. 
  • They also mentioned they would like to jot down notes about why they have saved the article, as it would act as a trigger to encourage them to read the saved . 
 User testing the paper prototype. 

User testing the paper prototype. 

From the iterations of the paper prototype I created a clickable prototype using Marvel App


Mid Fidelity

After designing and testing the iterations of the paper prototype, I designed mid-fidelity screens in Sketch and a clickable prototype using InVision.

 Mid Fidelity Screens

Mid Fidelity Screens


Visual Design + Brand Affinity

In the second week of this sprint the focus was on the visual design. The app was to be purposeful without being patronising, and efficient without missing a detail. 

I designed the colour palette to be representative tones of blue in the mood board I created, but also reflective of the location in which the user would use the app. The imagery selected for the mood board represents the calm environment in which a user can focus and read. 

 Moodboard

Moodboard

Style Guide.jpg

 

HIGH FIDELITY SCREENS

From Mid-Fidelity screens I made changes to the font and colour palette so that it was representative of the brand affinities and mood board. 

Screen Shot 2017-11-13 at 11.44.07.png
 

Prototype Mockup.jpg

Click to view the prototype

Ishy saves an article, he sets a reminder to read the saved article using the Read Later App.