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.
Time: 10 weeks
Environment: iOS (iPhone 13)
Roles: UX Research, UX Design, UI Designer, Branding
I used the double diamond approach to guide my process
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.
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:
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?
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.
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.
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
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:
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...
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.
IT Support
Age: 26
Occumpation: Operations manager
Status: Single
Location: Toronto, Ontario, CA
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.
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.
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.
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:
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
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.
In order to quickly come up with solution ideas that fit the task flow, I quickly drew sketches of layouts. Below showcases some of this process (please excuse the messiness!)
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.
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.
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
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 outputBack 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
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 outputAfter 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
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.
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.
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:
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
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
Final logo w/ wordmark
.jpg)
Concept sketches
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.
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
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.
The smallest units that are in my projects. These cannot be broken down farther and still be used within my project.
Combinations of atoms from earlier. These will combine 2+ atoms to form an element to be used by itself or as an organism.
These are combinations of the molecules, as you have probably guessed by now.
This is the culmination of all the previous steps. The process is as follows:
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.
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.
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.
.jpg)
.jpg)
sketches
Sketches were made based on the layouts of the other sites, but with some modifications to give my brand its own look.
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
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
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)
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.
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.
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!
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.
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!
