plandt

a case study
View prototype

Project Overview

My personal capstone project that I worked on as a student of BrainStation over the course of 2 months. plandt is an app that makes it easy for users to report and update their travel statuses. It also aims to minimize idle time by aligning ETA times.

Project Info

Time: 10 weeks


Environment: iOS (iPhone 13)


Roles: UX Research, UX Design, UI Designer, Branding

Problem space
One day, I was asking friends whether anything bothered them or could be improved in their daily lives. Coincidentally, multiple people touched on one topic: others not showing up. It is highly likely that all of us have gone through a situation where we have been frustrated because of the fact that people are late or decide to cancel plans at the last minute. Although I realized if this were an easy problem to solve, it would've been solved already, I decided to give it a go to challenge myself. My end product attempts to alleviate the frustrations of meeting up while letting the good times roll on max settings.

Empathizing with the users

To begin the human centered design process, I first had to conduct research to understand the background of the issue. Only then could I understand a user's perspective on the problem space and validate any assumptions I had.

Secondary research

After figuring out the problem space, I began to do research around the subject on the internet. I found that younger people had meetups more often so I decided to target this as my target demographic. In particular, high schoolers and young adults in college have a good environment to form social relationships with while also having the financial ability to hang out (ordering food, watching movies, etc). Other fun facts surrounding lateness I found included:

Out of 5000 Americans:

An average of anything past 13 minutes would be considered "late"
It takes about 5 times of being late for people to feel upset with them.
The last person to arrive was on average 27 minutes late, and felt regretful about it.

Competitive analysis

I also began to look into competitor’s apps-- primarily planning and messaging apps. What was the audience currently using to make plans and how can the experience be improved in order to make them go more smoothly? What features did they implement that can inspire my application? Why are people still late despite people having access to these app?

Primary research

In order to get a better idea of how my product could better serve my users, I conducted 30 minute interviews through Discord with 5 different people in my.target demographic, which were people 18-30 years old. With this information, I was able to dig deeper about my possible users.

Defining the problem

In order for me to focus on a particular problem, I needed to synthesize the information I obtained from my interviews. Synthesizing the insights gave clarity into what the real problems were.

User interview insights

Using the information obtained from the primary research interviews I conducted earlier, I derived a handful of key insights. I then put these insights into sticky notes and began to group them into categories which I'll talk about in the next category, themes. The raw notes can be found below. (warning: messy!)

interview insights

Themes

While looking through the interview insights, I realized a few subjects were brought up on multiple occassions. These similar subject matters were grouped into categories which are called themes.

These themes included:

  1. commitment
  2. wasted resources
  3. communication
  4. traffic
  5. flaky people
  6. punctuality

Sorting the information into pain points, motivations, and behaviors, in tandem with the themes, allowed me to create a persona.

Additionally, I was able to combine the most relevant and impactful themes (communication, punctuality) and turn it into a "how might we", which will be the question I will be trying to solve with my project, which was...

How might we have people communicate better so that meetups start on time?

What is a persona?

A persona is the result of consolidating information gathered from the user interviews earlier. Therefore, a persona also represents the collective interests of my target audience. Personas help us visualize a user's needs and align our goals accordingly.

The persona for plandt is:

Janet Lam

IT Support

"I like hanging out with friends that respect my time by keeping me updated on their plans"

Goals & Motivations

  • Wants to have better time management skills.
  • Wants to eventually own a car to transport easier.
  • Wants to see more of her friends arrive to meetups.

Frustrations

  • Dislikes the lack of control she has over public transportation and traffic.
  • Some friends are bad at responding to texts, and respond last minute to a meetup.
  • Frustrated when interviews start late.

Behaviors

  • Values punctuality, it shows a respect for other’s time.
  • Will commit to a plan once agreed upon.
  • Will work around flaky friends to get them to meet on time.

Bio

Age: 26

Occumpation: Operations manager

Status: Single

Location: Toronto, Ontario, CA

Background

Janet works as part of the IT department and frequently assists others with their computer problems. Her work keeps her busy so she really values the time that she can spend with her friends. Roughly once a week, she meets up with friends physically, occassionally participating in larger events like conventions.

User experience map

Using the persona, I visualized an experience that a user would have during one of their meetups. In this map, I identified key points in this experience that I could capitalize on in order to improve their meetup process, where are labeled at the bottom as opportunites. These opportunities would set up the foundations for the next steps.

Ideating a solution

From here, I used the opportunties and pain points identified by the persona to think about possible solutions. Thinking from the perspective of the persona allowed me to create features that would be wanted by users of my product.

User stories

To understand what my core task flow was, I created a list of user stories which would help determine what users would want from a solution. The user stories were told from the perspective of my persona, who is planning to meet with friends. From there I grouped those stories into epics, and prioritized the epic which would most benefit my users. The epics that showed up were:

  1. time management
  2. reminders
  3. planning
  4. change of plans
  5. working around friends

The most important epic was for users to know who was going. Therefore, my core task flow was to figure out who was attending the event.

The full list of user stories

Chosen task flow

selected core epic and related stories

Inspiration board

After determining what my solution was, I had to figure out ways to get to the goal. Instead of starting from scratch with ideas, I built off of what already existed. I referenced well known applications that had functionalities that were similar to mine, or had features similar to what I wanted to include. With my inspiration board, I was ready to start sketching ideas for my app.

Prototyping

Now that I had my ideas figured out, it was time to to solidify it. I would make a set of low fidelity wireframes and mid fidelity wireframes to help understand my layout better before conducting user testing.

Low fidelity wireframes

I transitioned my sketches into wireframes to see how the layout would look when digitized. For these, I used placeholders just to give a general idea of how things would look. These were essentially 1:1 transitions of my sketches in digital form.

Mid fidelity wireframes

From those barebone layouts, I created mid fidelity wireframes. These wireframes were essentially the same as the low fidelity ones, but with less placeholder text and images and more content.

mid fidelity wireframes

Usability testing 1

Between iterations of my prototype I conducted usability testing to see how users would interact with my application. Through a user testing of 5 people, I noted what was working and what wasn’t working. Design decisions that weren’t working were placed into a design prioritization matrix based on how much effort they would take to make versus how much impact they would make to the user. Design changes that took lower effort and made a higher impact were prioritized.

User testing output

Mid fidelity wireframes revisited

Back to the drawing board (sort of). I made changes to my prototype based on the sticky notes that were red on the design prioritization matrix. With those notes as reference, I made changes to my mid fidelity prototype. Here is a side by side comparion of the previous wireframes to the revised ones.

old wireframes

Revised wireframes

Usability testing 2

Just like in round 1, I once again tested the prototype with 5 users, and plotted them into a grid of impact vs effort. Doing this allowed me to check if the changes made from last time were working. If everything worked as intended, then doing testing would confirm this, and I would capitalize on changes that I wasn't able to make from round 1 that still proved to be an issue on this round of testing.

User testing output

Mid fidelity wireframes revisited yet again

After changing the prototype once again based on the design prioritization matrix, the wireframes looked like this. Don't worry, you won't see any more mid fidelity wireframes after this.

Previous revised wireframes

New Revised wireframes

Visual identity

With the wireframes being reviewed, I was that much closer to having a usable product. At this point in the process, I had an idea where the project was going. It was finally time to flesh out the details about the branding of my product.

Naming

I initially named my project friendr bendr, a pun on fender bender because people usually have to travel to meet up. The pun also showcases the fact that you have to work around your friends in order to make plans. Unfortunately, this name did not wind up being finalized due to the metallic connotations it came with, which seemed cold. Additonally, the thought of a car accident isn't exactly appealing. As I was gathering imagery for my moodboard, I realized that I wanted to make an experience that was more relaxing, focused on earth tones. Thus, my branding journey brought me to the name plandt, a pun on "planned it", and connects the words "plan" and "plant". I chose to connect the name to plants because plants have branches and root systems that connect various flowers and leaves together, and I want my product to emphasize connection. Additionally, many of them grow in close proximity to each other (as the saying goes, the apple does not fall far from the tree), which gives them a sense of solidarity. Lastly, the name plandt was not registered by an existing app.

Mood board

Referenced previously from the naming section, my moodboard is a collection of images which represented the feel I was going for. Originally, I wanted to have a neon-esque vibe which would represent excitement. However, I did not want my app exclusively used to party, as plandt was created with all types of meetups in mind. Therefore I decided to shift to a second mood board which showcased earth tones, which is being used currently. Both of these mood boards on one board which can be viewed here:

Tone & wordmark

I wanted plandt to feel casual and friendly so plandt is spelled using lowercases. However plandt is also a planner, so it must stay organized and easy to read. In that regard, the app and site will be using proper capitalization. Casual, but not too casual. plandt has a goal, but does not take itself too seriously. The wordmark would be constructed in the Long Cang typeface. The script nature of the typeface matches the pen of the logo, and although there were many other script typefaces, I found the "dt" portion of "plandt" easier to read than the other script typefaces. This was an important consideration for me as "plandt" is not exactly a proper English word and therefore having an unclear typeface may make it easy to read as "planet".

typeface comparison

Logo creation

Drawing inspiration from logos like AirBnB, Facebook Messenger, Google Calendar, I aimed to make a logo that was simple, defined what their application does, and represented the brand colors well. During the process I determined that I wanted to have a p-like shape for plandt. Additionally I had to tackle the challenge of incorporing a plant motif, while also giving a sort of semblance of what the app actually does. The final result was a pen with a plant leaf at the end. The pen represented the planning aspect of the plandt, while the leaf created a "p" shape and gave the plant motif. As finishing touches, I added lines behind the pen to further define it as a planning app and not an environmentally conservative one. Initially, these took the form of symmetrical bars, but I found that it resembled a hamburger menu, and so it was adjusted to its current state.

digital mockups

plandt logo and wordmark

Final logo w/ wordmark

Concept sketches

Finalizing touches

With the wireframes being reviewed, we were that much closer to having a usable product. At this point in the process, I had an idea where the project was going. It was finally time to flesh out the details about the tone and feel of my product.

Colors, typography and griding

I extracted colors from the mood board in order to replicate the feel they gave off. These colors would then be used in both the branding and the high fidelity application. For typeface, I chose Bahnschrift for its readability, large font family and property of not changing lengths between weights. plandt is based on an 4 pt grid system, with 16 px margin and gutter for columns. Additionally, I laid text colors on top of background colors to check its accessibility for people who have a tougher time with color.

Accessbility combinations (aa)

Colors

Typography

Grids

UI library

In addition to the colors and type from earlier, which are also considered atoms, I included an expansive library of UI elements for future designers to have a source of truth to work with. They include redlining details that specify padding and margins of the applications so that people will understand where things are placed down to the pixel.

Below, you can find 3 of the primary parts of a UI library.

Atoms

The smallest units that are in my projects. These cannot be broken down farther and still be used within my project.

Molecules

Combinations of atoms from earlier. These will combine 2+ atoms to form an element to be used by itself or as an organism.

Organisms

These are combinations of the molecules, as you have probably guessed by now.

Final prototype

This is the culmination of all the previous steps. The process is as follows:

  • Tap on the event group that's starting soon (2 hours)
  • Look at the attendees of the event via tapping members or opening menu
  • Initate tally
  • Exit out of action confirmation
  • Watch progress bar tally up
  • Check the people attending once tally is finished
View prototype

Marketing website

Just because the app was complete doesn't mean my work stopped there! A product would not be complete if there wasn't a website to go along with it.

Why did I need a website?

Research showed that companies that have a website had more perceived trust and credibility. It also establishes what your brand is and allows perspective users to find out what your product is about.

Development process

In order to better accommodate the website, I expanded on the previous mood board and created a section called "Marketing Website". This expanded mood board would become the basis for the site's feel and tone. It is very similar to the app, but since the site contains a bit more information and content about the app, it needs a bit more to reference from. Additionally, I referenced existing sites as inspiration. These sites with already large traffic would have already established layouts that work. I mainly referenced communication application websites since they were similar to what I was doing with my app-- namely websites from Snapchat, Discord and Facebook Messenger. I found that many of these sites had similar layouts, such as 3 features and prominent calls to action to download.

sketches

Sketching

Sketches were made based on the layouts of the other sites, but with some modifications to give my brand its own look.

Content flow diagram

This illustration demonstrates how the content will change when shifting from a desktop device at certain breakpoints. Breakpoints allow us to create relatively optimal layouts for a set of screen resolutions. Generally there are desktop, tablet, and mobile layouts, but for this project, I focused on just the desktop and mobile due to time constraints.

content flow diagram

Mid fidelity wireframes

Here I decided to mix up the layout a bit, since the triangle shapes were less appealing than initially thought.

Thoughts I had at this step were to add wood textures to give it more of an plant-y feel, but at the same time I had to exercise caution not to make my site advertise myself like an environmentally active brand.

Other than that however, I wasable to translate this into a high fidelity prototype and give it to peers for revision.

Mid FI Desktop Wireframe and Mobile Wireframe

Final prototypes

As my site was being critiqued by peers, I noted their feedback on a list. From this list, I made a (you guessed it) design prioritization matrix, from which the green stickied notes were implemented into my final design.

wEBSITE dESIGN PRIORITIZATION MATRIX

old hi fi prototype
(panels slide in)

new hi fi prototype
(Tree slides out)

Expanding to other platforms

To improve the efficiency and convenience of the app's use, I considered other platforms for use. I determined that the Apple Watch would be an excellent way to expand my product.

Why the Apple Watch?

I believe that the Apple Watch is an incredibly convenient device. Reducing the tediousness of an activity will increase users' motivation to use it. The simple action of taking a phone out of a pocket could hamper someone's drive to use an app. With a watch device, all users have to do is bring their hand to their wrist to get things done. And really, who doesn't like convenience?

The movement of my product to a watch device creates a way to easily respond to a notification, thus increasing response rates and lowering frustration.

Apple Watch Prototype

Conclusions

If you've read everything up to this point, congratulations, you're almost done! But if you just skimmed here, or just clicked the conclusions link, and are loooking for what the potentials of my project are, or want to know what I learned from this project, then you've come to the right place!

The future

Moving forward, I envision plandt being able to additionally suggest entire itineraries, such as places to dine or hike. plandt would be integrated with Google Maps or a similar service to provide live updates to traffic and ETAs. In order to further improve meetup incentives (even though just being able to see your friends should be enough!), perhaps there could be some type of avatar system with clothing loot, or something similar to make meetups more fun and enticing. While plandt's conceptualization did not primarily consider monetization, I believe that non-intrusive advertising would be a source of decent revenue. However, as plandt scales up, restaurants and other areas of interest may want to increase their flow of traffic through higher prioritization in suggestions.

Things I learned

This project has been a very intensive use of 10 weeks. While working on this project at BrainStation, I was also working on other projects. However, I have not only gained skills in Figma and InVision, but the very foundations necessary to make a solid project under time constraints. These foundations include conducting user centric research, and creating a solution which addresses users built from that same research. It has taught me the process of iteration-- constantly going back to your work and improving it, because no matter how good it is, it can always be better.

While I admit that my project may not be the best designed, I am proud of all the hard work I've put in these past 3 months, and realize that I've come a long way since then. With the help of my teachers and peers, I have taken the first steps to creating solutions which can benefit people in a way thats usable by the people.

Thank you to everyone who helped me on my journey! And thank you, visitor, for taking the time to go through my project!

Back to topView other work