KEEP app: Save a bit of your time
View a demo video of this prototype. Password: KEEP
Problem
It’s never been easier to learn something new from your home or on the go. But the staggering amount of available content sources makes it hard to cut through the noise and keep focusing on specific goals. The market is lacking a go-to customizable tool that can help people learn, retain, and see their progress toward a goal.
Solution
Design both mobile and web applications that help users continue learning based on their choices, interest, and time. Users can save content, keep records of what they learn, and schedule reminders for themselves to remain on track to hit their goals. This will help save them time and retain the content so they can continue building on their self-education.
Background
So much to do, so little time. This is how we feel today. We have various goals to achieve due to different roles of our lives. Under these competitive priorities, how can we remind ourselves to keep learning when time is allowed? There are some who are self-driven that will try to do it whenever is possible. Others who are more passive struggle to know for sure what to learn and where to spend their time. Both groups of learners may struggle keeping momentum against a wave of other distractions.
I can’t keep thinking if there is any way to find a better solution for this. That’s why I wanted to dig deeper and see if I can offer any help.
Target
Users who are already learning something that interests them, and who want a better solution for optimizing their learning time.
Research Findings & Analysis
In order to gain a deeper understanding of the issue to shape my recommendations for the new app, I interviewed people who are working full time. I especially wanted to know how they arrange their free time to accomplish their personal goals — and what devices they use to support their self-education.
In addition to interviews, I sent out a survey, read online posts, and gathered additional data.
Key findings included:
“Better time management may motivate me to learn.”
- 62% of people learn something after work, either related to their job or for personal interest: new skills, self-improvement, or career development. Competing priorities such as fatigue, laziness, or the need to relax after long working hours constantly challenges this desire. Both active and passive self-learners indicated that a push or better time management strategy can help them find more time in their daily schedules.
“I don’t know what to learn … I tend to forget what I save often, then I have to find them again.”
- Over 77% of people have saved or bookmarked material to read or learn later when time allows — and then forget to follow up. With all the variety of content out there, it’s hard to prioritize important information. The best tool would help users structure content in a way that can best support their goals.
“I like to work on my computer. Mobile has its flexibility …I use them both to accomplish things.”
- 38% of people interviewed spend 3–4 hours on their computer after work. In general, it seemed people preferred desktop over mobile at home — but they do like having the option to turn to mobile devices for routine tasks like reading an article, viewing upcoming calendar events, or see the progress of tasks and goals. The ideal learning tool would support both web and mobile so that users could continue right where they left off regardless of the device they are using.
Strategy
It’s clear that the “ideal learning time” can vary for everyone and that the best tool would support their learning, wherever and whenever it can occur.
In this mobile/web app, I sought to achieve several objectives:
- Provide a place where users keep and organize their saved content and take notes.
- Improve productivity by allowing users to continue where they left off last time.
- Empower users by having them set up reminders for themselves based on their schedule.
- Allow users to track learning, progress and their productivity.
- Support users’ goals by letting them connect with friends and view their content recommendations.
Design Goals & Process
Our lives are busier and more hectic than ever before. Since this app aims to help with time management, it’d be counterproductive to produce an app with a steep learning curve or one that requires a lot of time to work effectively.
I set out to design an app that would be simple to use — one that would let users concentrate their time and energy on the content and their goals.
With a feature set and user goals in mind, I began sketching different approaches on white board or paper. I started with a key screen and specific elements that repeated across the app. Drawing out different portions of the app helped me visualize how the user would accomplish specific tasks on the app.
I used the sketches to design the screens, and some ideas began to be refined. For example, I started off with certain navigation items at the top of the screen — but later found that it would distract users, so I pivoted to present these in a less-intrusive way.
As a part of my design process, I will often switch back and forth between physical drawing and Sketch to design out what I sketched. Although it’s often encouraged to keep drawing until you’re happy with the result, I find that design itself reveals some gaps in certain interfaces. I alternate between the two forms until I am satisfied with the final result.
Brand & Identity
Some similar apps present a white background and a list to users when they log in. I wanted to create a more visually enticing way to draw users and actively avoid the feeling of tackling a to-do list.
The main base of the color used is dark purple to differentiate between a list content and a more playful way to arouse users’ interest to watch or read more of it.
Users are able to pick colors in their folders that don’t conflict with the selected decorated colors in this app.
I chose Lato font — Regular, Italic, and Bold. It is highly legible at any size and it comes with many weights which can to used through the whole web and mobile. Lato gives a feeling of warmth and friendliness while also maintaining its seriousness.
I designed the app with a mobile-first mindset, with most of my focus on creating an intuitive product for on-the-go users. Still, I wanted to create a unified identity for the web app so that users don’t need to learn different design patters on desktop and mobile. It should be easy for a user to go back-and-forth between devices so they can continue their learning where they left off.
App Features & Functionality
Organize saved content
When users have time to continue learning, it should be quick and easy for them to open the app continue where they left off.
Rather than having a to-do list as the first impression users see, I designed a library home screen that is a combination of saved content and organization folders. Users can move around a collage of floating images and tap on one to access recently saved content — or they can scroll down and open up a folder to access content that way.
Within a folder, users have a variety of options to best support their learning style. They can see content organized by content type: articles, video, or audio. They can also sort content in other ways, including by length and date saved.
Sometimes when learning is in progress, it’s common to jump from one video to the next. I added a central section to the folder view called “Continue Learning” — that can feature content that users want to remember to continue viewing. Users can also add tags to individual content items to connect related articles together, and can easily edit and delete these at a later time.
Keeping in mind that 49% of observed users work with their phones using one hand, I wanted to design this section to easily support user when working on their mobile devices. Users can easily reach the sort function (likely a common function that will be frequently used) on the left side of the screen. They can swipe on the left side of the screen to see and navigate using their tags. And when users scroll down an article list, the top bar will be replaced by article images — allowing an easy way to view and access content
I included visual cues to help make this internal navigation feel intuitive. Both the video and article sections have an off-white background as opposed to the dark one. This will show users they are switching to another place (in a folder); the white background also helps reduces the noise and let the user focus on the content itself.
Set reminders and goals
The Calendar feature allows users to set goals for themselves and view a schedule of upcoming assignments.
Users can tap on different dates of the week to see what materials we scheduled to finish. I purposely chose a week as the default time view; this prevents users from feeling stressed or spending too much time planning a month ahead. By keeping a short-term focus, users can take on small, achievable steps toward their goals.
As each article is finished, there will be a strike through that assignment. The green color in the circle will reflect how far away users are from their set target. When it’s 100% done, it will be a full green circle.
Monitor progress
Stats fills an essential role: allowing users to see their progress. It is something tangible that they can measure to keep them on track.
I wanted to show statistics in a visually enticing way — and give users the flexibility to choose the metrics that are most important to them. Users can see hours and minutes spend toward specific learning topics, and can see the number of sessions in a day or week. The user interviews and research facts directly impacted the types of statistics included in this first version of the app.
Users can also see productivity in their segmented and scattered free time. I’d like to let users know at which timeframe they often get things done. Once they know the pattern, they may find it easier to plan what we intend to do next.
Social discovery
I wanted to build out other features of the app to encourage discovery and continued learning. They include:
Highlighting and notes — Notes are all kept in one place, allowing users to quickly return and remember the important points from a variety of content items.
Sharing with friends — Users can share interesting concepts with their friends that are also interested in a similar topic. This allows users to distill the important points of what they learned, and help others in the progress.
Search — The search functionality allows users to look for specific content or to search by other factors, including available time. This will allow users to keep the momentum going, even when a 10- or 15-minute break is the only time available that day.
Random and recommendations — Users who need help finding something to read next can view recommendations from friends or random topics. This allows a chance to break away from users’ typical content sources.
User Testing Feedback
After ideating the app’s functionality and designing screens, I created an interactive prototype for user testing.
User feedback is always a valuable step to improving design: a way to test out if my hypotheses needed to be refined in any way.
One user pointed out that a key button was difficult to reach while holding their phone with one hand. I was able to move the button to a different place in order to make it easier for the users to achieve basic tasks.
Other feedback I received validated my approach of wanting to keep the design as simple as possible:
- “I can feel the details that are put into the design… The three functions in the main page are very simple and straightforward. I like it the best.”
- “The interface is very easy to navigate and self-explnatory. I like the color combination, too. I would want to use it if it’s a real app!”
- “Easy to read and very happy with the clarity of the design.”
Next Steps
Often I’ve heard that the best way to start a side project is by scratching your own itch. While this app would help me with my own challenges, I believe it will help others as well. I’d love to take it from this prototype stage into a developed product that can continue to be tested by various people. This also includes the possiblity developing a web app to make consistent user experience.
I’m motivated to improve my own development skills in order to build out the app. After all, the only way to make a product great is by hearing from the target audience and incorporating their feedback into improving the design.
Conclusion
Too many things, too little time.
I wanted to create a product that would help people like me — self-learners who have personal and professional goals but struggle to identify the best way to utilize time after work.
Having an app that can help us make the most of any available time — whether it is 10 minutes or 100 — will help self-learners remain productive and focused on their goals.
As long as we do something little by little, learn a bit daily, we can improve. I hope a tool like this will allow us all to keep moving forward bit by bit towards our goals.
Note: The app mockups include articles, videos, and images from elsewhere on the Internet. I did not create the articles, videos, or images featured in the app.
