Summary
A responsive website targeted towards first-time movers. Kermie is a great app for tracking progress, and tasks and learning the financial literacy needed to prepare for a move.
With Kermie, users are better able to understand what goes into a move and how to best prepare for one. It is very valuable to those who have trouble prioritizing and planning.
Project Timeline
Project Background
Wireframes & Design
Testing
Topic Selection
Competitor Research and Analysis
Survey and Remote Interviews
Lo Fi Wireframes
Site Structure and Task Flows
Mid Fi Wireframes
Hi Fi Wireframes
Prototyping
User Testing
My Role
Timeline
January 26- May 4
Project Type
Responsive Website, Academic Project
My Role
User Research, Research Analysis, Brand Creation, Usability Testing, Wireframing, and Prototyping
Team
Solo project completed with peer reviews and mentorship from a User Experience Strategist
Tools
Figma, Photoshop, Illustrator, InDesign, Mural, Whimsical, Optimal Workshop, and Fresco
Topic Selection
When choosing a research topic, I wanted to find a struggle that I could somewhat resonate with. As this is my first case study, I wanted to take a bit of burden off myself and therefore, made the project a bit more relatable. I simply wanted to get my feet wet before making a big splash.
After graduating college, I knew many people who had just moved out from college. Because so many people had moved recently, I knew I would be able to get a lot of good feedback on their experiences and pains.
Competitor Research & Analysis
Who starts a challenge without looking at the competition? Certainly not me. It was my first project after all....
At first, I looked at any app that mentioned moving. Moving services, apartment-finding websites, furniture delivery, and MUCH more. I then decided to look at other apps that were not related to moving but had one really good function that performed well.
Because I wanted to use features such as planning, I knew I needed to look at calendars and tasks. I also wanted to incorporate financial planning and information, so I would need to look at money-related apps.
Finally, in order to help users actually use the app, I needed to use gamification to help users who struggle with prioritizing. Below, I have the main apps I looked at when creating Kermie.
Competitor Research Findings
Google Calendar
Duolingo
SoFi
Amex
Description
Pros
Cons
Organizes users' tasks, reminders, and events. Shows multiple ways of timelines such as daily, weekly, monthly, and more.
The gamification of learning new languages. Users can earn rewards and badges by completing lessons, modules, and small games.
An online bank offering users HYSA, loan options, credit card management, and much more. It has many hubs of useful info relating to finances.
A HYSA and Credit Card company created to give members rewards and keep up with their credit cards. It also features travel bookings and exclusive offers.
Simple navigation to set up events, reminders, and tasks. Users can view by day, 3-day week, and month. Users can also link calendars.
Cute bird Icon, and easy timeline of language progression. It has l trophies that can be earned after completing certain tasks.
A hub for almost all financial needs and can educate users on how to spend wisely. It also has navigation that makes sense in showing many topics.
Good at showing a lot of information on one page. It is also good at showcasing multiple navigation systems on one page, based on design.
It always defaults to a daily schedule, and reminders will disappear if not completed after a day.
Annoying and weird alerts if users haven't completed a daily login. Badges have no value or worth in the game.
Too many nooks and crannies to explore. It also has many different “homepages” about different topics.
Too many nooks and crannies to explore. Its navigation is improving, but is hard to find things based on the wording.
Survey & Interviews
I first conducted a survey to reach people who wished to remain anonymous but also wanted to help with my research. I also used the survey to prove and/or disprove my assumptions. My main goal was to ask all the general questions and ask more niche questions in interviews.
The main problems found were preparation and finding an actual place to move to. Both of these problems were extensive and had multiple “solutions.” I knew solving all of the problems wouldn’t be feasible in the allotted time. So I started looking at the niche problems everyone was facing. Time management, financial knowledge, and quick deadlines.
I graduated and didn't have a credit score. I didn't know I needed to have one to get an apartment.
I thought it would take me one day to pack, but it took a week.
Moving Timeline of Chaos
Found out they were moving
Had less than a month to pack, find an apartment, and move
Started looking for apartments
Realized they couldn't afford their desired apartments
Found an apartment
Underestimated all the extra fees and deposit costs
Had to pay more due to no/low credit score
Struggled to find internet, gas, and/or water provider
Struggled to find people to help them physically move in
Had to unpack and organize by themselves
Started the job within a week of moving in
In college, landlords would make payments easy and expect you to have a cosigner. In a world outside of college, things were much different. Interview participants spoke about not having good credit, having to pay more for real estate agents, and not knowing the cost of a move.
I have provided a timeline that perfectly summarizes the participant's feedback. This is a broad and generalized timeline of what people went through when moving from college.
I never knew it would cost so much. After the fees and rent, it was around $3,000 upfront.
I procrastinated packing until the day before moving. I was beyond stressed at how much stuff I had.
Packing Timeline of Chaos
Found out they were moving
Waited to do anything until the last minute
Wanted to pack everything themselves
Underestimated how much needed to be packed
Became Overwhelmed
Struggled to figure out what to keep
Worried about items being broken
Finished packing after being stressed
Conclusions
Based on the interview feedback, I wanted to figure out how to minimize this stress. I decided to tackle time management, packing management, and financial knowledge.
Using Google Calendars as a basis for my managing tasks, Duolingo to make the app fun, Sofi and Amex to help with financial literacy, and my own little spin, I had a great number of resources to help me start wireframing.
For a business plan, the website would be a paid service. After enough users join, gain a bigger budget, and get more time, we would then add a feature to partner with moving services.
After that, we would start expanding into partnerships with apartments and beginner credit cards. These partnerships would add to the revenue and be an all-inclusive website centered around planning to move.
Low Fidelity Wireframes
Very rarely do I not have any ideas for my lo-fi wireframes. I go ahead and get out the main screens of what my initial ideas are, and then I create my possible task flows. This helps me better visualize the task flows.
Originally, main screens include the moving quiz, adding tasks, adding boxes, the landing page, viewing rewards, and the financial blogs. I ended up dropping the moving quiz for the sake of time and it being less priority.
Task Flows
These task flows are integral in supporting the research I found. By adding reminders, users are more likely to set aside time to get things done, and of course.....be reminded of those tasks. Receiving rewards goes more into the gamification aspect of the app. It's like the casino effect, the more you win the more you want to keep "playing."
Lastly, the aspect of "adding a box," which is to help people track what items are in which ones of their packing boxes. It helps deal with the stress before and after the move.
Adding Reminder
Receive Reward
Add Box
Site Map
With this being the first site map I had ever made, it isn't the best map ever. I was able to create better ones in different case studies, but I consider this a good learning experience
Of course, not everything in this sitemap made the cut, but it was a good start to helping me in the next step of mid fidelity wireframes. After creating these, I figured out what could be saved for a future date, and only carried what I thought was necessary for the website to flow.
Mid Fi Wireframes
By using auto layouts, I was able to create a lot of desktop wireframes that could almost be directly translated into mobile wireframes.
My main goal was to highlight how the tasks work and how they contribute to the gamification of the website. The landing page is the hub for users to quickly scan over everything they can do, and the financial blogs are for people who want to learn more about saving money when moving.
Hi Fi Wireframes
I chose to pursue the phone screens over the desktop screens due to receiving more feedback on the mobile version. Here I have all of the screens I created. I have callouts and more information about select screens in the "Prototype & Testing" tab.
Main Iterations
Iteration 1
Iteration 2
Iteration 1
Iteration 2
Because I pursued the mobile screens, I wanted to show the main iterations I did before prototyping and testing.
This iteration happened in between mid fi and high fi wireframing. The first iteration was not received well by peers and in critiques due to the task "tabs." In the critiques, peers did not quite understand what could be edited and thought there was simply too much going on.
In the second iteration, I simplified it, so users could know that they could perform two actions. A click on the box would check the task, or they could click the entire blue box to view more/edit the task.
This iteration is more minute and also happened in between mid fi and hi fi wireframing. My mentor expressed concerns about how users would be able to switch back and forth between the daily calendar and viewing all the tasks in a list.
Because of this, I created a small toggle under the date, so users can switch back and forth. This allows them to easily choose what they want to view without having to go all the way back to the landing page to view the tasks.
UI Kit
Prototype
This Prototype shows the flow of users can navigate through Kermie and the selected flows I incorporated.
Key Screens
User Dashboard
The dashboard is where users are able to quickly scan over tasks and other important things related to their move.
Priority Tasks
Users can view their high priority tasks and quickly mark them as complete.
Amount Saved
Here, users can also keep track of how much money they have saved for moving. Most interview participants expressed that they had a specific amount of money they wanted to have saved before a move, so I incorporated that here.
Task Timeline
This helps people visualize how many tasks they need to complete for their specific move. As users mark a task as complete, "Kermie" will jump to the next Lilypad. Users also gain fun accessories the more tasks they complete.
Notes
Finally, users have a space to keep track of any notes related to their move.
Daily Calendar
Here, users can add tasks and view the tasks they have by the hour.
Task List
On this page, users can view all their tasks in a list view and easily sort their tasks if need be.
Edit Packing Box
On this page, users are able to edit the contents in their packing boxes. This feature is useful for those who want to keep track of what items are in what box.
Users can name the box and have the option to add images and/or add the items by typing them in.
They can also mark it if it has fragile items and even put in the weight. Some moving companies do quotes based on weight, so that is why I included that feature as well.
Financial Blogs
This page shows financial blogs that are intended to help first time movers understand the cost of what goes into a move, and how they can save money.
Usability Test Results
Testing was conducted by 5 different participants. All participants were able to easily understand the main features of the website and expressed how they would have loved to have an app/website like Kermie when they moved.
I like to be welcomed into an app. Usually, you have a small popup and you click the corner to start. I don't want to get right into it yet.
I prefer "x" and back buttons in apps and websites over using my phone's commands.
Users were mainly frustrated by not having "back" buttons and were a bit confused by the landing screen. They thought that it would be nice to ease into the product, so they don't first get overwhelmed by the dashboard.
It was a bit overwhelming to jump straight into the dashboard. I felt like another page should be first.
At first, I was confused about what the website was for until I kept scrolling.
Iteration 1
Iteration 2
After the user testing, I switched the order of what appears first on the screen. Iteration 1 was used in testing and most participants didn't know what the website was for until they scrolled down.
I also added small lines in the task timeline to indicate that Kermie is meant to move when a task is done. Users were confused about what Kermie was doing in that specific element.
I also changed the navigation header from blue to green to be more cohesive with the computers UI.
Here, I added an additional page that users would see once they open the website. A welcoming page, to ease users into the app and shows the upcoming tasks for the day.
Conclusion
All the users loved the concept of this website and wished they had it when they had moved. The website was a huge hit among the suggested target group, but could also easily be used as a regular task management system.
Going forward, if I had more time, I would like to further develop the quiz that was not seen in the prototype. This quiz would allow users to fill out a brief quiz and then get an estimated cost and amount of effort it would take to move. I would also like to further develop pages to allow financial planners to partner with the app to help people understand what they could do to prepare for the move.
Overall, I am satisfied with the results of this being my first case study. I learned a lot of skills and progressed them which can be seen in my other case studies.