Matthew Mocniak – Human Centered Designer
Quoted Cover.png

Quoted

 

Quoted

 
 

“You know when you read a really impactful quote....and then forget it soon after? There should be a way to collect them and resend them to ourselves in the future. And only keep the best in circulation.”Ryan Jones

 

Quoted is an iOS application concept that tackles the problem Ryan, and many others, experience. It allows a quick and easy way to store your quotes while periodically reminding you of them. Over time, the app will learn your favorite quotes and suggest them more often.

 
 
 
 
 

Persona

Before I could visualize the roadmap for how Quoted would be designed, I used a persona profile to influence my early design stages.

My user persona, Stacey, is an individual in her late twenties. Her online routines consist of scrolling through Twitter, Instagram, and reading articles on Medium. The content she typically interacts with has a bit more substance and, as a result, Stacey has a desire to save some for later. She is also active in her personal social circle, with group messaging making up her primary method of communication.

 
 

 
 
 

Sketches

My initial sketches experimented with a card-based design, with each quote being stored on its own card in a “stack”. The user could scroll through and see limited information at a glance, and tap on a card to display the full information associated with the quote.

I knew that saving and sharing quotes would serve as the backbone of the app. By reducing as much friction possible for the user to input and share their quotes, the app could handle the rest of the heavy lifting with regard to sending reminders and learning which quotes are favorites.

 

 
 
 
 
 
 

Video: Feedback from Matt Smith (@mds) on version one of Quoted

Version One & Design Critique

The first version of Quoted displayed a stack of quote cards as the primary view. I put together a prototype in Sketch and sent it (and some simple task prompts) to designers I follow on Twitter. I quickly learned, through their feedback, that the stack of cards was not an effective way to organize the quote information. It was difficult to see the full content and nearly everyone I reached out to noted that it was a pain point for them.

With this information in hand, I went back to the drawing board and worked on a complete revision.

 
 

 
 
 

Version Two

The second version of Quoted focuses on the text of the quotes, with a share button associated with each quote for accessible share controls.

Each quote can be read and shared directly from the home screen. Editing and viewing extra metadata is only a tap away.

The Quoted design and color scheme adhere to WCAG 2.0 standards.

 
 

To streamline the process of adding a quote from outside the app, I designed a short workflow to save quotes with an iOS Extension. Users can highlight text or tap a Share arrow from another application and choose to import the content directly into Quoted.

 
 
 

Left: The Reminders screen shows a reverse chronological list of quotes the user is reminded of. Users can provide feedback for the most recent reminder. This feedback is used by Quoted to curate their “favorite” quotes over time.

Center: The color picker is inspired by Studio Neat’s Highball app to make selecting a quote background color pop off the screen while staying simple.

Right: Users can search based on quote text, the author, or custom tags they enter themselves.

 
 

 
 
 

Usability Testing

Round One of User Feedback

I recently set up a usability test at Morning Times in Downtown Raleigh. With gift cards in hand and a functioning Sketch prototype, I interviewed five people to see what they thought about Quoted.

I collected some context information about each participant and then performed a moderated usability test that focused on the following areas:

  • How might you change the sorting of your saved quotes?

  • How might you add a new quote?

  • How might you mark the purple quote as a favorite?

  • How might you share a quote?

  • How might you view quotes you were reminded of before?

  • How might you delete the blue quote?

Each task tested a piece of functionality that would help me validate the workflow or point out any problem areas with my design.

Overall I received very positive feedback. The design was attributed to being clean and clear, and the high task completion rate can speak toward the intended simplicity of the design.

 
 
 
 

There is one area that has room for improvement and it came as a bit of a surprise during the tests. The Reminders section of the app did not make a lot of sense for the majority of my testers. They were either expecting a different screen or different interaction, entirely.

Other feedback received can be implemented as quality of life improvements. Where most interactions made sense, users also expected more complex actions to be permitted, such as swiping or long pressing on cards.

In the next phase of this case study, I will implement changes that improve the usability, based on the user feedback I’ve collected so far. Once I have a new version ready to go I’ll return for more user validation testing and the cycle will continue.

Quoted is an app concept I am very excited about. While it may look simple, it is very complex under the hood, with a lot of room to grow and expand beyond its initial scope. I look forward to working on this concept even more in the future.