Matthew Mocniak
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.

 
 
 
Home Screen Hero.png
 
 
Persona@2x.png

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.

Sketches_2@1x.png
Sketches@1x.png
 

 
 
 
v1 of Quoted.png
 
 
 

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.

 
 

 
 
 
Quote Tile Close Up.png

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.

 
Flow-Extension-Taps.png
 

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.

 
 
Quoted Screens.png
 

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

The next phase of this case study is to test the usability of my prototype and incorporate the findings back into the design. The testing is ongoing, and I am using the following criteria in a moderated usability test format:

Usability Test: Tasks to Complete

  • 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 delete the blue quote?

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

What are you seeing?

How do you think this works?

I will measure the task completion rate for each of my tasks and use that to determine the overall intuitiveness of my design. If pain points are identified along the way, I will use them to guide me on what areas of the application can be improved for further testing.

Quoted is an app concept I am very excited about. While it looks 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.


 
 
Noodles@3x.png
 
Quote-Float.png
 
App Icon@1x-Wide.png