Case Study

Description

This project's focus is discovery research in order to gain insight on what users' main pain points and blockages are when it comes to being productive in their day-to-day lives. The focus of this project is on productivity personally and not at work.

Problem statement

People like to be productive. However, attaining it seems to be very complicated to achieve. People lead busy lives which can make being productive at home feel impossible. Alongside that, in our day and age, so much is attainable with a press of a button. Long processes can be frustrating, and we all want the quick solution.

Background

Productivity is a hot topic conversation. There are many books, podcasts, speakers, tips and tricks to try and solve the "productivity problem". There have been some applications for web and mobile devices that try and assist users on their productivity journey. Most of these applications are geared towards productivity in the work environment.

Role I played

UX & UI designer

Constraints

Time constraint – this project timeline is limited to a month.

First, I delved into the field to better understand the problem

Secondary research

Looking through the competitors, I was able to see what was being offered and what was sorely lacking.
I learned what is currently included in the free plans. I also learned that the apps are mostly geared towards corporations vs. personal use.

For original quality click here

Next, I learned about the problem and user needs

User interviews

For the user interviews I wanted to learn about users' current experiences when wanting to be productive. This was exploratory research in order to see where the users were having trouble so that I could tackle the real problems that needed to be solved.

Research goal

Research objectives

We want to know what roadblocks and pain points stop users from being productive so that we can create a solution that helps them with this need.

  1. Understand the role of productivity in people’s personal life.
  2. Determine what users main frustrations are when trying to be productive.
  3. Understand what fields users want to be productive in within their personal life.
  4. Understand the usual process users take when trying to be productive.
  5. Learn of failures to stay productive in the past.
  6. Learn of the tools that have helped users be productive.

Affinity map

Creating the affinity map, I learned about many important pains and needs on the users' side.

The main learnings were: 

1. Scheduling, seeing the bigger picture and having the tasks be broken down into achievable tasks, greatly help users be more productive.
2. People are more productive when they are held accountable or are working towards a goal with a community.

For original quality click here

Empathy map

For original quality click here

Persona

After compiling the empathy map, I was able to create a persona based on that information. I later used this persona to create a solution based on the users' needs, motivations and pain points.

During my research the main pain points were:

1. Lack of motivation to be productive and feeling alone in the process.
2. Users feel overwhelmed and don't know where to start. They want achievable steps.

These two pain points were my focus on this project.

For original quality click here

Then, I proceeded to a solution

User flow

The user has two main tasks they want to accomplish:

1. Add tasks to their schedule.
2. Be held accountable and not feel alone in the process.

I created a user flow that provided the users with the process of creating a task and setting up their reminders and accountability section.

For original quality click here

Feature roadmap

I compiled a feature roadmap in order to organize what the application will be able to do. Additionally, I was able to decide what features were a must have, a nice to have, surprising & delightful, or what could come later.

For original quality click here

Sitemap

I created a sitemap to illustrate the overall navigation of the site. This allows a better understanding of what the site can do and offer the users.
With this sitemap I wanted the product to focus on attaining productivity in a simple and intuitive way. I wanted users to have a clear path without getting lost on the way. This was my focus when building the sitemap.

For original quality click here

Sketches

I started out by hand sketching different layout options for the screens I wanted to design. This is a more freeform way of exploring different design decisions quickly without committing resources to a single design decision, so that I can find the solution that works best.

SIGN IN SCREEN
3 options of layout for the sign in screen positioning.

HOMEPAGE - LIST VIEW
3 options of ways to display the list view of the tasks created.

HOMEPAGE - CALENDAR VIEW
3 options of ways to display the calendar view with the tasks created.

NEW TASK
3 options of ways to display the layout of options given when creating a task.

REMINDER PREFERENCES
3 options of ways to display the layout of options given when setting up the reminder and accountability section.

For original quality click images

Wireframes

Now that I've chosen the design that best suits the site's needs, I am able to build wireframes. These wireframes are focused on layout without the design decisions, which allows us to discover issues we may not have seen in the sketching phase.

Homescreen - list view

New task

Scheduling calendar popup

Reminder preferences

Completed task

For original quality click hereFor original quality click hereFor original quality click hereFor original quality click hereFor original quality click here

Logo process

I started with brainstorming name ideas, looking for something that would be related to productivity and having a memorable idea that would stick in users heads. I decided to go with "BeeDo" to combine two ideas, one being that Bees are known to be busy doing things and the "Do" as part of "To Do". I then sketched some logo options. Digitized a few and selected one. I decided to go with a clean and bold logo where the yellow had room to be standout and not swallowed up in the rest of the page. I then created variations of the logo for different use cases.

For original quality click here

UI kit

Based on my research, I was able to create a brand UI kit. I decided the color style based on Yellow which represents happiness and reminds one of bees. I chose blue because it represents productivity and organization. I continued by choosing typography that is clean and clear with no distractions so that users could stay on task. I continued by making the rest of the components fit the design decisions.

For original quality click here

High fidelity screens

Now that I had my wireframes and UI kit done, I proceeded to build the high-fidelity screens. These screens helped me visualize all the decisions coming together.

Log in screen

Homescreen - calendar view

New task

Scheduling assitant

Reminder settings

For original quality click hereFor original quality click hereFor original quality click hereFor original quality click hereFor original quality click here

Prototype

Usability tests

I asked users to complete two tasks. One being scheduling a task into their schedule and the other was finding a way that would help them not push off tasks.
The goals of this usability test were:
1. Explore if app creates a good experience for users.
2. Improve user experience based on results.
3. Identify pain points throughout the process.

Affinity map from usability tests

The usability tests proved successful. A few elements were noted that needed modifications.

A few of the insights were:

1. Users really loved the accountability function and haven't seen it in other apps.
2. Users liked having time suggested to schedule their tasks.
3. The overall experience was intuitive and simple.

For original quality click here

Iterations

After conducting usability tests, I discovered the design and layout issues users faced when completing the task of navigating the site. This led me to correct those issues in order to create a better user experience. Below are some of the main iterations made.

Before

After

Explanation

PROBLEM 1
The plus sign wasn't clear.
SOLUTION 1
Added "Add view" to clarify functionality.

PROBLEM 2
No way to organize the list.
SOLUTION 2
Added sort by feature.

PROBLEM 3
No definition of priority in list view.
SOLUTION 3
Added colored rectangle to show priority level.

PROBLEM 1
Popup function unclear.
SOLUTION 1
Removed shadow and added title to clarify popup window.

PROBLEM 2
Available time not noticeable enough.
SOLUTION 2
Removed colored rectangle and highlighted whole row.

PROBLEM 1
Buttons and page felt cramped.  
SOLUTION 1
Added white space in buttons, fields and in between elements.

PROBLEM 2
Repeat option too small to use and didn't have select all.
SOLUTION 2
Switched to dropdown menu for ease of use.

For original quality click images

Conclusions

What I learned

What I think went well

Ideally, time constraints aside I would have liked to