Symplist is a dead-simple way to stay on top of your tasks and get more done quickly.
Symplist is a dead-simple way to stay on top of your tasks and get more done quickly.

Overview

I wanted to design Symplist when I noticed a friend struggling to find a decent app that would effortlessly answer the question “yes” or “no”. Determined to come up with a solution, I started to craft an application that would ideally be really good at that one thing. What I found was that it wasn’t just her, there were others searching for the answer to that same question. Allow me to explain how I provided people with an easier way to accomplish more.

“Symplist provides increased productivity to busy and active consumers by providing a minimal and elegant user-friendly environment focused on quick functionality, giving them a sense of accomplishment.”
Collection of photos documented during discovery, research and user testing phases
Collection of photos documented during discovery, research and user testing phases

Problem

Challenges

Audience

9 participants took part in interviews that enabled me to learn and validate my assumptions that converted into personas. Some of this qualitative research was achieved guerrilla style, while others were held more formally to establish common frustrations and goals.

Personas used during the duration of this project
Personas used during the duration of this project

Use Cases

Based on the personas, storyboards were created to aid the types of situations this app would be used in. This allowed insight into interactions on how our audience needs to receive feedback in order to circumvent a poor experience both in the moment and while using the app.

Drawn storyboards of scenarios #1 Drawn storyboards of scenarios #2
Drawn storyboards of scenarios

I enjoy storyboards because they help fill in the gaps of my initial research. I can iterate on original ideas by visualizing these scenarios that conceptualize into wireframes and prototypes. An example of this would be sketching when the keyboard becomes visible.

A pile of sketches that were created to find the perfect design
A pile of sketches that were created to find the perfect design

User Testing

Six participants took part in moderated usability sessions for three low fidelity prototypes. Each user walked through a series of tasks that was recorded and compiled to show their successes and failures. Afterwards, our volunteers verbalized their experiences, affording a clear understanding of trends that needed to be corrected.

Testing provided opportunites to improve the usability and design
Testing provided opportunites to improve the usability and design

Version 1.0

View Prototype 1.0

Version 2.0

View Prototype 2.0

Version 3.0

View Prototype 3.0

An overview of the apps design evolution
An overview of the apps design evolution

Survey Results

After the 2nd design version, a survey was used to better understand how the application iconography would be understood. This provided great insight for such a small feature.

Interesting results on what icons users understood best for completion of tasks
Interesting results on what icons users understood best for completion of tasks

Development

In order to make Symplist a reality I needed to craft a progressive web application using HTML5, CSS/Sass, JavaScript, and jQuery due to my lack of Swift knowledge. Take a look at some of the HTML prototypes tested throughout the project, here.

I faced a few challenges, one being I know nothing of databases. Conveniently, HTML5 provides a web API property that allows browsers to store data locally. While most of this went smoothly, it took me a solid week and help in StackOverflow to learn to update the lists properly after a modification.

Using HTML5 localStorage to save data
Using HTML5 localStorage to save data

Usability testing made it clear there needed to be a screen for visual feedback when the view was empty. This was accomplished by checking the number of items in the list — which would then hide or show a graphic based on the results of that conditional statement.

Giving users a empty screen message if their list is completed
Giving users a empty screen message if their list is completed

Feel free to view the source code publicly on GitHub.

Results

In the end, I had to compromise several features that I simply couldn’t build in efforts to get a working product shipped. Categorizing tasks into specific lists, ability to rearrange/edit tasks and sharing your list with others are all things I am still figuring out. Not only in regards to development, but also designing scalable, usable and delightful experiences for future releases.

After just a few months Symplist had saved an average usage time of ~7.43s on a handful of downloads. I also managed a 200-300ms improvement on render time between versions 2 & 3. There’s more to do, but I am pleased with the results!

View a visual case study of Symplist on Bēhance or download it here.

Home Next