PrePlan

Introduction

The organizational and planning needs of an individual change throughout their life and are never quite the same as anyone else’s, demanding a unique and customized organizational system. PrePlan is the answer to that demand, allowing users to create their own life planner by changing themes, adding unique elements, and tracking tasks and goals. Because all people and the things they want in their planners are different, the biggest challenge of developing this mobile application was to accommodate all needs, no matter how simple or complex.

By conducting user interviews, a lot of valuable information was learned about what users want and don’t want in a planner, and the wireframes designed after synthesizing that information were usability tested multiple times with different sets of people.

My role was to conduct this extensive research on potential users and sort and organize the information before designing a prototype that I then tested on people of all ages, genders, and backgrounds.

Research

At stage zero of the project I had to come up with a research plan to lay out the project’s objectives, research and recruitment methods, desired participant characteristics, and timeline. I had little information and experience other than my own to use as a jumping-off point. I decided to conduct a short screener survey to learn about the time and task management systems of the people around me and identify which would be interviewees or potential product users. The most surprising thing I learned after reviewing 21 survey responses was that not a single person surveyed uses a dedicated planner application.

Responses to question 6 of 8 from the ‘Task / Goal Tracking Survey’

Considering that all of the people I surveyed say they use their phones every day and use an organizational app of some kind, it is likely that other planner apps on the market are either undesirable or unknown to them. In hindsight, I wish I had asked at least a few of those surveyed why they don’t use any planner apps specifically.

Taking the responses from the survey, I analyzed them to find interesting and useful interview participants. I selected five people, diverse in age, gender and background, to invite to be interviewed by myself at a later date. I then wrote up a long discussion guide detailing what questions to ask and when to ask them, including useful follow-ups for different responses. With my discussion guide in hand, I recorded myself conducting each interview and used artificial intelligence software to carefully transcribe each conversation.

The interviews each lasted about 30 minutes long and I asked each person about their use of planners, both physical and digital. They were all conducted in a quiet room, in person with someone I knew personally. 

Before even synthesizing any of the information gained during my interviews, it was clear which planning values and/or content people considered most important. Certain topics came up multiple times with most, if not all of the people I sat down with. Simplicity, gratification, stress reduction, flexibility and reliability were all things that most people value in a planner or planning system.

Analysis

Directly following the interviews came the most difficult step thus far, turning the hastily written notes and transcripts from those interviews and turning them into beneficial quotes I could utilize to draw conclusions. I began synthesizing the vast wealth of unorganized information by taking similar quotes from my interviews and grouping them by similarity, forming an affinity map.

One of the groupings of quotes from my affinity map. All about pain points

One of the groups in the large affinity map consisted of pain points where I collected all the quotes where people shared their dislikes and frustrations with using current products on the market. I find pain points an interesting interview topic because, whereas someone’s likes can simply be copied, their dislikes have to be craftily avoided and accommodated for. 

Using similar quotes and experiences from the interviews allowed me to create three distinct user types, or personas that represented people who would all potentially use PrePlan, albeit differently from one another. The first persona is Megan who is a busy mom of 2 young children whose main priority is completing tasks right away to reduce the stress in her life. Next is Rachel, the on-the-go college student who is forgetful of classes and due dates and needs a reliable system that is cross-compatible on all her devices. Finally, Steve is a recently retired car salesman who needs a system for managing his sparse events and goals, but requires that it be simple and easy to use.

PrePlan’s three personas: Megan, Rachel, and Steve

These three user types helped to guide the project and ensure that one persona’s needs were prioritized over another’s. With them in hand, I gathered like-minded quotes and experiences from the interviews and formed an empathy map to see at-a-glance the perspectives and behaviors of each of the personas. Because what a person says they do can be drastically different from what they actually do, the empathy map is helpful to visualize the underlying emotions behind a person’s actions.

Megan’s empathy map

Once I had a solid foundation of usable quotes and an idea of who would be using the app and how they think and behave, I crafted four problem statements that would act as the questions for which PrePlan would be the answer for. These questions incorporate some of the most crucial values people hold concerning a planner such as stress reduction, simplicity, time management, and gratification. 

How might we design a way to plan and track tasks and goals while emphasizing simplicity and eliminating any unwanted elements?

How might we enable people to quickly and easily alter the layout or contents of their planner for when their lives change or when they simply want something different?

How might we make people feel as accomplished and gratified as possible after completing a task or goal, motivating them to want to achieve more?

How might we promptly notify users of upcoming events, freeing their minds from relying on memory and reducing stress?

With these problem statements in hand, PrePlan now had a direction in which to be guided to ensure that it would be helpful to the largest number of people possible. From there, I had to brainstorm and come up with a solution that would answer all of these questions. Following the template of “As a (user), I want to (do some goal/ task) so that I can (achieve some outcome),” I wrote a host of different user stories.

These stories help simplify users' different wants and needs into short, succinct cards that can be arranged into a map to visualize their underlying motivators. I color-coded the map to be more easily viewed. Green stories are broad goals or desires whereas yellow stories are how PrePlan could help them achieve those goals. The red note is just to denote a potential planner preference change.

PrePlan’s user story map

With the user stories laid out, I had to take them and devise the red routes, or important paths regular PrePlan users would take while in the app. I also created an app map to better visualize the overall information architecture and navigation the app should have. These maps were the basis of what would become my “user flows”.

User flows are visualizations of the aforementioned red routes and they mark the individual steps users need to take to accomplish a certain goal. I created four different flows for the four most commonly used processes in the app. The flows are all color and shape-coded. Red circles denote the start and end of a particular flow. Green squares are for regular screens and yellow rhombi are for different ways you can edit your planner. The purple diamonds are for branching choices that users can make to take them to different places within the application.

Two of PrePlan’s user flows: Create Planner and Edit Element

These flows became crucial to the design phase and were the most useful analysis tool that I created during the entirety of this project. The user flows eliminated the question of which screens were necessary to design, and which could be left for a future iteration.

Design

Once I had a solid foundation of organized research to reference, I was able to use that information to begin to draw out some rough designs, reflecting the words and actions of the people I interviewed to the best of my ability. These early sketches were where I got all my ideas down on paper, no matter how good or bad they were. Understandably, these paper sketches didn’t all become useful to the project but the time I took to iterate on my designs at this early stage was invaluable later when I began using design software like Figma. 

Early sketch of how the home screen and its three tab views would look

Left: Examples of how simple/ complex a planner can be. Right: Tab bar iterations

Once it came time to begin working on the computer, my sketches acted as rough drafts of what was to become the first official wireframes. Because most of the iterations and bad designs had been winnowed out during the sketching phase, the switch to digital was a simple process of translating drawings to digital wireframes. These wireframes were all created in greyscale and had minimal styling of design elements so all of the time was spent on placement and hierarchy.

Three of PrePlan’s low-fidelity wireframes

Following the design of my wireframes came creating a brand platform and name for the project. I chose the name PrePlan because it is an alliteration that rolls off the tongue nicely and it describes it’s purpose. Because PrePlan’s goal is customization and flexibility, I chose dynamic to be PrePlan’s brand personality and be the guide for the design of the product.

From there, I created a mood board that incorporated the personality and vibe from the brand platform to act as inspiration for the visual design of PrePlan. The mood board is comprised of screenshots of interfaces of mobile apps and photography that piqued my interest and that I wanted to act as visual inspiration for the app. 

Part of PrePlan’s initial inspiration mood board

Utilizing the photographs from the mood board, I crafted a color palette for the app which has been changed and updated many times during the design process. Some of the hues in the color palette were taken directly from the photos, while others were chosen for balance.

Part of PrePlan’s color palette

With the prevalence of dark mode on modern devices and apps, I wanted to make sure that the chosen colors work well in both light and dark themes. To do this, I placed all colors on a white and black background and if any color looked off on either, I adjusted the hue until it looked right.

With the color palette solidified, I moved on to developing the typography and font styles for PrePlan. Because most of the people I spoke with during interviews used an iPhone and were accustomed to Apple Calendars, I chose San Francisco to be the main font family for most of the app’s text. As a secondary font for header and title text, I searched for and found a very good-looking serif typeface called Blacker. 

PrePlan’s typefaces and text styles

I chose five different styles for the fonts that would be used in different areas of the application. The system is a small-caps style for secondary buttons and other minor areas. ‘Body’ and ‘subheader’ are for menus, buttons, and anywhere with large bodies of text. ‘Header 1’ and ‘Display’ are both for large titles but ‘Display’ is for added personality. The ‘system’ style is for small, isolated bits of UI such as the labels to tabs, the days of the week on the calendar, etc.

Following the app’s typography, I began the search for a large, high-quality icon pack to add fun and personality to PrePlan’s interfaces. Below is a curated group of icons that I either used on the screens or would likely use when developing the application further. The one icon in the whole app that I created myself was the “my planners” tab icon. I took an existing calendar icon and rotated it before adding another “ring” and title space.

PrePlan’s Iconography

After choosing the app’s color palette, typography, and iconography, I had everything I needed to convert my wireframes to high-fidelity. I began by creating a grid that would ensure all of the screens would have the same margins and spacing. From there, I added color, curves and details to my wireframes, designing the UI elements such as buttons and form fields as needed. Below is a selection of UI elements from the final product. Each has been tweaked and redesigned more than a few times throughout the design phase.

A selection of PrePlan’s UI elements

With these elements, along with the aforementioned color palette, font styles and icons now in my arsenal, I was able to essentially drag and drop anything I needed into my current design for quick iterating. All of the design components that made up my style guide became PrePlan’s proto-design system. Any screen that I needed to design could be easily put together using these components and all are used to ensure design consistency throughout the entire project.

PrePlan’s welcome page, as well as the today, week, and month tabs of its home page

Once PrePlan’s most important screens had been designed, it was time to use them to create a working prototype that I could test on potential users. It was very surprising to me [both] how impressively complex AND how limited Figma’s free prototyping tool is. In some cases, I became overwhelmed with just how intricate the tool allowed me to get and the sheer number of different options and freedom it provided. In other cases, such as when the user is making selections and customizations, the tool feels limited.

Testing

Once I had designed a working prototype out of high-fidelity wireframes, I immediately wrote up a usability testing plan, similar to my research plan before it. The test plan was written to document my participant characteristics, testing and recruitment methods, and lay out the timeline for the project. With the testing plan solidified, I tested it on five people so I could get a read on its ease of use and flow in the hands of people who had never seen it before. Testing PrePlan was an incredibly eye-opening and sometimes humbling experience that gave me a lot of ideas for iteration and improvement.

Each individual test took between 20 and 30 minutes and each person was given the same instructions and tasks to complete. The first thing I had people do was to look at the welcome and home screens and give a little narrative about what they think of it visually and what they think they could use the app for. Next, I went into specific tasks, the first being to create their first planner. Each person went through the steps of creating a cover, adding elements, and customizing themes. The next major task was adding a new entry to their homepage, talking through their thoughts and actions out loud as before.

Quite a few minor or low-level issues were brought to my attention throughout the testing process such as typos, placement errors, and general color or font dislike. One large issue that came up more than a few times during testing was the flow (or lack thereof) of two different screens that have branching path options. During the “create cover” and “add entry” processes, users found the three option screens to either be a maze to navigate or too complicated and they would skip them entirely.

Once I had tested PrePlan with five people, I wrote up a usability test report that documents all of the issues that came up ranging from critical to minor. I then went back and iterated on my designs to resolve the previous issues and update the overall flow of the app. The minor complaints usually took no more than a few minutes to fix and I made those changes first. Then, I looked at the major issues and brainstormed ways to resolve them while making as few changes to other things as possible.

When I felt that most of the necessary changes had been made, I set out to test the revised prototype on five new people. These tests were conducted just as the first round, in person and taking about 20-30 minutes each. I kept the tasks the same to see if the changes made a difference in the time taken to complete each task. Thankfully, people got lost and/or skipped sections far less than before and it was more clear to them which steps to take next.

Conclusions

Every person’s life is unique, and so are the tools used to keep that life organized. I set out to design a customizable planner application to help people keep better track of their tasks. This case study, along with all of the work detailed within, is the culmination of months of research, designing, and testing. Every step in this process was completed solely by myself, with the help of very generous friends and family members for interviews or testing.

Design is never finished and I do not think that PrePlan is by any means “complete,” but the project is finished for now. It is a project that taught me a lot of new skills and processes such as the UX design process cycle broadly, doing user research and testing, and Figma’s vast array of complex design tools. All of these were unfamiliar concepts before I began work on PrePlan but are now a part of my toolbelt that I use almost every day.