SPLIT

An End-to-end Mobile App for Calender &To-do List.

Problem

When we have started collecting users’ feedback, many users struggle with separating their work and personal life. They also have a difficult time handling several calendars or to-do lists. In addition, adding features Goal to help users to achieve their goals.

Solution

Create a more user-centric design application that figures out how to separate their life and work through one application.

Objective

Design the mobile app that is user-friendly and easy to use with a clean design.

My Role

User research, Interaction and visual design, User testing

Tools

Figma (wireframes, visual design, Prototype), Adobe Illustrator, Sketch

Team

Angie Bai, Pei Jet

Duration

8 weeks

01. Research

Research Goals

Understand the market of platforms related to calendars.
Identify the target audience of Split
Learn about how the main competitors of Split are catering to customers’ needs, strengths, and weaknesses.
Get to know people are managing their personal life and work on the calendar or to-do list.
Uncover users’ experience on how to manage their tasks, events, and reminder.

Methodologies

Secondary research (Competitive Analysis)
Primary Research (User Interview)

Secondary Research

Competitive Analysis

It is important to research enterprises that pioneer in the market of platforms related to calendars, as their solution to similar problems will help me gather insights about their strength and weaknesses. These insights help me identify any gaps in features that Split might address.

2. Primary Research

Survey

The secondary research helped us in creating hypotheses (user challenges with the app). However, it was crucial to validate the results of secondary research. For that, we conducted a small questionnaire survey that had a few subjective questions.

The idea was to understand the common likes/dislikes of the app users for which we circulated the survey questionnaire to 90 people across different geographies. The primary research helped us to collect meaningful information regarding the ‘what’ part of the problem. To understand the ‘why’ of user behavior, we went ahead with a couple of user interviews.

User Interview

Building on a general understanding of marketing and the audience, I continued to dive deeper and build a real connection with our users, to gain direct insights on them.

We create an Interview Guide to facilitate the user interview process, with 10 open-ended questions listed to invite the participants to share their experiences and stories.

In total, 6 participants ( 3males and 3 females) were interviewed. Here is SPLIT User Survey.

Pain Point

Can't classify work and personal life
Can't easily add lists on Calendar
Can't show priority clearly
Can't set up a long-term plan
The calendar can't show details of lists, and reminder doesn't have a calendar
Can't share tasks with others

Goal

Clearly separate work and personal life
Easily add lists on Calendar
Can sorting priority with highlight
Can set a long-term and Year's goal
Easy combine calendar and reminder
Be easier to share to others

02. Strategy

Card Sorting

User Flow

After setting up the goals and deciding what features to include, we continue to build up the information architecture of Split using the user flow. It helps us to visualize the relationship between the content and examine the hierarchy.

User Persona

With the data gathered from the interview, We established personas using the statistical knowledge I gained to represent a certain type of user that is a potential audience of Split. Persona helps to target the right customer segment, identify, and understand key pain points of the users.

Empathy Map

An empathy map is a simple, easy-to-digest visual that captures knowledge about a user's behaviors and attitudes. It's a useful tool to help teams better understand their users.

03. Design

Wireframe

Sketch

We started sketching low-fidelity screens. We can capture my ideas by pen and paper quickly by sketching. It also enables us to examine our ideas before putting everything in the process of digitizing.

Mid-Fidelity

Once I had a visual direction of the layout, I started to add more details and precisions to the sketches by turning them into mid-fidelity wireframes. Mid-fidelity wireframe helps me concentrate on visual consistency and hierarchy.

We design an app for the iOS system and referred to the Human Interface Guidelines of Apple in the design process.

04. Prototyping & User Test

High-Fidelity Prototype

We created a high-fidelity wireframe by applying established styles. It examines the overall aesthetic feelings and visual balance of the application.

UI Kit

UI Kit is a compilation of existing UI elements on the website that provides references for future design and collaboration for the design team. It is also a living document and will be updated whenever there is an iteration of the design. Below is a part of the SPLIT UI Kit, and the full version can be accessed here.

Usability Testing

Before usability testing, it is important to set up test objectives, subject, methodology, tasks, and rubrics for measuring the result of the testing before conducting a test. Therefore, I wrote a usability testing plan to define what and why I want to test and get prepared for the test.

For all the tests, I expect a 100% completion rate since all tasks are normal steps for an e-reader app. I also expect a 90% error-free rate because the prototype is not fully functioning, and users might take alternatives that have not been built up for completing the tasks.

Patterns

3/6 Interactive button's size
2/6 Contract is not enough
2/6 Completed tasks occupied the centered position
3/6 Confused for "type" in goal section

Insights

Recommendation

Goal's box is too small to tick, the user had to try 3 times
The delete edit icon is not obvious to show
Users used to put the completed tasks in the end or hide them.
It is not common for users to understand "type" in the goal section

Adjust the button size and reference with "Touch Target Design" follow it
Change the color, and should consider "color blind".
Completed tasks can be put under current tasks
Can delete the "type" button in the goal section

As the time and resources we have is limited, I made revisions based on the priority level I set up for each recommendation.

Final Interactive Prototype

Let's connect

Get in touch for opportunities or just to say hi