MinkoMind UIUX Case Study
Overview
Students are plagued with procrastination and poor work ethic. Phones, poor organization, and those pesky notifications are all distracting. It can also be overwhelming with the many tasks and assignments given for each class and it can be hard to remember what to do next.
Students find it difficult to stay focused during their studies because of external distractions and procrastination. We believe time management, proper organization, and mitigating distractions would improve study habits and work efficacy. MinkoMind uses an imaginary avatar, a Minko, to organize your Mind.
My Role: Lead UI Designer and UX Researcher
As the lead UI designer on the project, I successfully designed the entire interface, from branding/logo, style guidelines, design system, and micro-interactions of the app. As a UX Designer, I contributed to the entire design process from conducting user research, generating initial concepts, and finalizing designs.
I worked in a team with 4 other UX Designers. I used Figma to create the design systems, diagrams, and final design. I used HTML/CSS and Javascript to iterate the final product.
The Problem
Students procrastinate and get distracted
Students find it difficult to stay focused during their studies because of external distractions and procrastination. We believe time management, proper organization, and mitigating distractions would improve study habits and work efficacy.
How might we create an app that would help mitigate distractions and allow a student to concentrate at their full capacity?
Research
User Insights
We conducted 6 user interviews to investigate the scope of the problem: how are students managing their time and studying for school?
Key insights:
-
Students wanted to stay more organized with their agenda and due dates.
-
Getting into the right mood was an important factor in staying focused
-
Studying in groups was the most helpful for a lot of students because it allows them to bounce ideas off each other and keep others accountable while working.
-
Students were often distracted by phone notifications and social media.
User Persona
When putting together our research, we wanted to pinpoint exactly how our users would be feeling. We constructed two user personas that would best help us navigate through a user's goals and pain points.
Empathy Map
Ideation
Learning more about the user
The ideation phase was framed around the problem statement in an effort to tackle the painpoints of the user. We emphasized divergent thinking to target as many ideas as possible.
Storyboard
Tommy, one of our user personas, is a student trying to navigate his classes, but he struggles with time allocation and poor study habits.
User Flow
We wanted our app to be easy to use while having a streamlined navigation process.
Creating a user flow was complicated and took us 3 iterations to get just right. Just like starting a new game, our app starts out traditionally with a login/signup page and onboarding. With a singular home page, we would be able to help navigate users in a structural organization. Here they would be able to access whatever they needed.
For the assignments tab, we wanted to allow the user to be able to select music and add friends to their study session. The group flow was a little more complicated to iterate because we had to implement additional tabs that allowed a user to add or be added to groups.
The profile flow contained the main components of the app: friends, minkos, and you. The 'Friends' flow was created in congruency with the 'group' flow. This allowed you to add friends in two separate places, allowing for more usability and clarity. Minkos were made into something like an online shop. The user account mimics many flows already found associated with users.
Prototyping
Wireframes
With creating wireframes, the app had to be minimal. The app is expected to have a lot of lettering on it considering that it will be requiring text entries. To not clutter what little space there is, making everything purposeful was essential.
We focused on 4 key aspects when doing the wireframes:
-
navigation through the home page
-
general assignments list
-
detailed tasks screen
-
Minko customization
Mid-fidelity
After getting feedback from our initial wireframes/low-fidelity prototypes, we were able to make edits that allowed our app to be more streamlined. Users were confused with our prototyping and couldn't really figure out which buttons led to which screen. The interface contained too much text within the buttons. We were able to change much of the wording in the initial prototype to better describe the next step in the process. Users also found the lack of 'back' buttons concerning. Once on a screen, they weren't able to go back to the home page, or assignments page. These dead ends were all fixed in the new mid-fidelity iteration. Users also found that many of the screens were repetitive or redundant. This allowed us to reduce the number of screens that were being prototyped. We combined similar screens to make sure that users knew where they were in the process.
User testing helped our team fix clarity and redundancy within our app. To further increase usability within the app, we decided to implement pop-up screens. When adding tasks, choosing music, and buying accessories, rather than switching to another screen, a pop-up appeared. This reduced the total amount of screens we had to iterate and had a smaller chance to confuse users.
Final Design
The final designs are playful and well organized to portray a studious work ethic in an easy yet fun environment.
From here on out, I took on the sole role of being the app designer. After adjusting several more screens from the mid-fidelity, I began to build out the final high-fidelity version of the app. I wanted the color scheme to be colorful to make the app less intimidating to its users. The dark navy is to represent a soothing and calming color, while the red is used as an accent to portray an urgency for studying.
To make studying feel more like a game, there is a reward system implemented within the app. The more your study, the more coins you will get to either buy more Minkos or buy accessories for those Minkos. Each Minko is thoughtfully designed by yours truly <3.
Login/Onboarding
Much like many online games, users login with a username that will later be shown on the home screen. For new users, the onboarding for the app shows the key features that MinkoMind was made for. Upon going through the onboarding, users are able to choose their very first Minko to get started.
User Settings
Here users are able to access their Minko, account, or friends. When accessing friends, you are able to enter an invite code that can be found on the assignments screen or add a friend through their username. The app is also able to invite friends through your contacts. Accessing your account takes you through the logistics of the app such as notifications, privacy, and settings. You are also able to log out through this page.
My Minkos
Access your Minkos and customize them! Upon selecting your Minko, you can choose an assortment of hats, tops, or accessories to decorate them. You can also buy more Minkos and accessories through this page. When purchasing any item, a pop-up menu appears to confirm your purchase. When the purchase is complete, you are given the option to return home or continue shopping.
Assignments & Tasks
With the assignments tab, you can see the whole overview of what the user has due. There are assignments for only the user and assignments for a group. The 'Due Soon' menu shows upcoming tasks that the user may have. By clicking on any of the 'To Do' projects, the user is able to access the tasks within the assignment as well as the description. Group projects are slightly different because you can add others to the assignment by clicking the plus button near the top of the screen. Users can select the music of their choice in the top right corner and start working when they are ready to sit down and study.
While studying
Once a student starts working on the task, a timer will begin to count down on the screen. Following the Pomodoro technique, users will study for a set amount of time before they are suggested to take a break for a short amount of time. This prevents students from being too burnt out from working hours at a time. Taking breaks is psychologically proven to increase work ethic and focus, so MinkoMind capitalizes on this technique.
If a user is not satisfied with their music choice, they are free to change it through the music icon above. Users are given the choice to end their session at any time when they are complete with their assignment. They are given a simple completion page that rewards them with coins that they can later use to purchase whatever they want from the shop. Here users are able to either return Home or view more assignments to continue working.
Reflection
There are many areas of the app that I wish to develop further, but overall I learned a lot about the design process during this project.
Working on this project was definitely very rewarding. It challenged me to tackle a common issue among students while also having to showcase my design skills in the final deliverable. The timeline allowed me and my team ample time for research and iteration but left not a lot of time to design the final product. Working in a team setting also lead to some difficulties because of the wide range of ideas that each of us had. Each teammate had a vision for a certain page and combining the best aspects of each iteration was definitely hard. Given the chance to continue this project, there are many aspects of the design I would want to continue to prototype and refine. In gathering feedback and self-evaluating, I’ve determined some possible areas I’d like to address:
-
Wider sample size in user research. Interviewing only college students provided a rather small sample size for our research. All the students seemed to have similar coping mechanisms for their procrastination. Expanding our interview base would allow us to gather various ways that students combat their poor work ethic if they even have one at all.
-
Student accountability and user engagement. One issue that feedback presented to me was how to get students to use our app again and again. Inputting tasks and assignments are tedious and time-consuming. Not everyone wants to do it. While students are able to group together and keep each other accountable on our app, laziness is a huge factor in whether or not a student will actually take the time to study with MinkoMind.
-
Better integration of character art. Given the short time frame of the project, it was incredibly difficult to curate anything else than vector art Minkos. Integrating the characters into the app would make the app feel more congruent with the design style.