WeStudy
App, Web, Branding
12 min read
A digital solution for digital distraction - helping students stay focused and motivated through distraction-free study rooms.
WeStudy is an iOS APP that aims to provide a fun and immersive study experience to help students stay focused and motivated. It allows users to study distraction-free, keep track of their progress, stay on track with their goals and build a better habit of focusing.
Project Overview
The Kick-Off
Project Type:
Academic Sept-Dec 2021
Responsibilities:
Discovery, Ideation, User research & interview, end-to-end prototype & testing
Timeline:
8 Weeks
Tools:
From Feb 2021-May 2021, I completed a full-time UX Design Bootcamp with BrainStation to obtain a Diploma in UX Design. During the Bootcamp, I was tasked with completing an 8-week capstone project to create a compelling and practical digital experience. This experience was an end-to-end UX design process that took me from idea generation and research to developing a mobile app interface and brand.
Design Thinking Approach
When approaching this design challenge, I leveraged design thinking methodology to ensure my focus throughout the process was on the people I was designing and creating for. I wanted my project to be economically viable and technologically feasible, but most importantly, it needs to be desirable and address real human needs.
Empathize
Ideate
Test
Define
Prototype
Refine
Human-centered design process
Discovery of Problem Space
Inspired by personal struggle
Have you ever caught yourself distracted by notifications or scrolling endlessly through your phone when you are supposed to be working? Well, as someone fresh out of college, the daily battle between cell phone distraction and getting myself to concentrate is no stranger to me. Cell phone addiction has become a serious social issue among students that negatively affects their mental health and academic performance. This inspired me to look deeper into how cell phone distraction impacts our lives and what we can do about it.
Digging deeper
Cell phones are undoubtedly an integral part of college life as they provide students with immediate portable access to education-enhancing capabilities that are essential to student's academic and social life. However, cell phone addiction has become a serious social issue among students that negatively affects their mental health and academic performance. Cell phone distraction lowers productivity and aggravates procrastination, which further creates more stress and mental load for the student.
of college students struggle with cell phone distraction when trying to study.
80%
of students finish a paper the night before the deadline due to wasting large portions of their time scrolling through their phones.
61%
A study also found that college students unlock their phone every 12 minutes when they study and can last for as long as an hour on average. This is a 25% increase in phone-checking frequency compared to their typical phone-checking behavior during the day when they are not studying or doing homework.
Primary Research
Understanding my users
In order to understand the “why” behind the problem, I conducted five 30-minute interviews with college students who have struggled or were struggling with cell phone distraction. I wanted to understand their frustrations and thought process behind the fight against cell phone distraction and learn about the measures they have taken to prevent such distraction. Based on my interview notes, these are the four main insights that all my interviewees had touched upon.
Difficult to Concentrate
Users found themselves easily distracted by their cell phones which remarkably lowered their productivity and the quality of their school work.
Good Study Environment
Working in libraries and coffee shops helps users reduce distractions and boost student productivity.
Lack of Motivation
Users feel unmotivated to start an assignment because they want to avoid facing the stress of a particular assignment. As a result, they quickly turn to their cell phones for temporary relief.
Study With Others
Users are more motivated and focus better when studying with other students.
Initially, I considered cell phone distraction the main reason my users were unproductive and unable to concentrate. As a result, I suspected muting notifications or turning off cell phones would be the primary way my users tackle cell phone distraction. However, my interview insights revealed that users who struggle with cell phone distraction attribute their phone-checking tendency to lack motivation to do their school work. I also learned that many curb this behaviour by studying with a friend and studying in a focus-enhancing environment where they are more motivated and focused.
So the question for our design challenge is ...
How might we help college students reduce the distraction their cell phones provide and help them stay motivated when they study so that they can increase their focus and productivity?
Persona & Experience Map
Uncovering opportunity
Based on the insights I gained from my interviews, I developed a persona and experience map to ensure my design process was driven by my target user’s goals and behaviors.
My primary persona, Caroline Lim, helped highlight core user priorities for my app: students want a tool that helps them fight against cell phone distraction, improve productivity and bring motivation when studying.
Primary Persona: Caroline Lim
Using Caroline, I developed an experience map to understand her end-to-end experience seeking a solution for her digital distraction. By putting myself in the user's shoes, I was able to identify moments of opportunity where I could intervene with my digital solution.
Experience Map of Caroline Lim
User Stories & Task Flow
Brainstorming functionality
To begin brainstorming the functionality and features of my solution, I created several user stories under different epics and initiatives that followed the structure:
As a user, I want to action, so that I benefit.
Chart: Narrowing Down to a Specific Initiative
From Stories to Tasks
I selected studying together as my focus epic based on insights from my user interview. All users reflect being able to concentrate better and feel more motivated when studying with another person. However, they also considered restricting phone use necessary to reduce phone distraction. Therefore, I decided to combine essential features from all of my epics to create the functionality and features for my task:
Create a study room and
start a study session with friends
Task
Here are the four user stories that I believe best represent my product's value proposition in the task flow.
As an easily-distracted student, I want to study without phone distractions so that I can be more productive.
As an easily-distracted student, I want to create study rooms with friends so that we can both help keep one another on track.
As an easily-distracted student, I want to invite my friends to study together so that we can both be productive.
As an easily-distracted student, I want to view my friends’ study status & progress so that I know what they are working on.
Task Flow: Create a study room and start a study session with friends
Sketches & Wireframe
Exploring solutions
Once I was clear on my task flow, I used paper and pen to sketch out possible solutions. Drawing inspiration from existing UI components on Dribbble and Behance, and analyzing competitor apps like Forest and Flipd, I sketched out different ideas. Below are my top sketches that were translated to wireframes.
An IOS app that provides a co-study platform for students to focus together
App Concept
Sketches that were translated to wireframes
Grayscale Wireframe
Version 1 of grayscale wireframes
Usability Testing
Gathering feedback from users
During the wireframing process, I conducted two rounds of usability tests of five testers each to obtain practical, real-time feedback that was incorporated to improve the design and deliver a smooth user experience. The testers were asked to complete a set of seven tasks while navigating through the prototype, which helped me observe how real users interacted with the app and see if the app’s functions and features helped the user achieve their goals.
The major improvements based on feedback received from the testers focused on making the design to be more intuitive and user-friendly.
Visual Design
The Journey to Hi-Fidelity
Visual Design & Branding
Injecting life into designs
After completing user testing, I enhanced the user experience by translating my grayscale prototype into a high-fidelity prototype by developing and applying a visual identity to my digital product. To establish my products’ brand, I began writing a list of keywords that embody the brand’s essence and define the personality of the product.
Cheerful
Welcoming
Motivational
Friendly
Focus
Curious
Immersive
Playful
Relaxing
Visual Identity
I searched for inspiration using these keywords and created a mood board, colour palette, and typography system that reflect a playful, inviting, creative, yet relaxing feeling.
Primary Typeface
Secondary Typeface
Color Palette
Neutral
Wordmark
In regards to my brand identity and art direction, I took a playful yet elegant approach. The target audience for the app is college students who struggle with cell phone distraction and a lack of motivation to be productive. It was important to counteract the perception of studying as a tedious and stressful task that students only want to face at the last minute. I want the app to make students feel that studying can be fun and enjoyable, something to feel accomplished after being productive with their friends.
Primary Wordmark
App Logo
The name "WeStudy" aligns with the playfulness I want our app to reflect, and the "We" suggests the inclusive and inviting feeling from users when they focus together with friends. After numerous iterations, I landed on the final wordmark you see below.
To further the fun vibes and reflect the app's core function, I want to incorporate symbols referencing studying in the wordmark. I experimented with multiple symbols such as a book and a study lamp and replaced the letter "U" in "study" with a book for a more simplistic look but still delivered the core function. Lastly, I tilted the word "We" to provide a more playful look.
Illustrations
Here are some of the illustrations I gathered and refined to further reflect the fun, immersive, and inviting brand personality. Having illustrations instead of actual images help to carry the brand message to counteract the perception of studying as a tedious and stressful task but rather something fun to do after focusing with friends.
App Features
Showcase key features
Study alongside your friends
When interviewing users, a key pain point raised was that they often find it hard to find study buddies with common interests or goals to study together. With WeStudy, users can join diverse study rooms created by others with different purposes and goals. They also have the option to create their own study room that aligns with their own study needs and invite friends to study together. Users now no longer have to rely solely on willpower to stay focused but be inspired to work hard with other high-achievers like themselves to achieve a common goal.
Know what your friends are working on
Interviewees expressed that they couldn't feel the presence of the other person when studying virtually. To address this need, WeStudy allows users to easily check their friends' progress, update and share their own study status, and finally study immersively with different views to mimic a real study room experience.
Defeat distractions and interruptions
WeStudy helps users win the fight against addictive social media and focus-killing technologies by providing a focus-contagious and productive study environment for users. Depending on the focus modes, users are reminded and encouraged to stay in the app during their study session.
Celebrate progress
WeStudy provides detailed analysis after each study session that allows users to understand their session breakdown. Through features that visualize their progress, WeStudy helps users feel more confident in their ability to stay focused and be productive.
Final Prototype
Enhancing the user experience
Injecting my brand's visual identity into my prototype was a challenge that I didn't anticipate. Properly balancing out the colour ratios, establishing a type hierarchy that works on mobile and is accessible, and designing a unique identity required many tries and rounds of testing.
After countless hours using the Figma mirror app, screen recording, and getting feedback, I created my final UI prototype and developed an accompanying UI library that uses Brad's Frost Atomic design system.
Taking WeStudy to Market
Building marketing website
To bring WeStudy one step further to market, I explored what a marketing site for this mobile app would look like. To create a compelling and responsive marketing site, I started out with UI inspiration, created sketches, designed multiple rounds of low to mid-fidelity wireframes, conducted user testing, and then applied my brand’s visual identity to create a high-fidelity interactive site. The marketing site aims to 1) inform users, 2) build confidence, and 3) promote the product.
Multi-platform design
As another means of concept exploration, I envisioned what WeStudy would look like on an Apple Watch. Given that my app concept is around cell phone distraction, I believe having WeStudy on Apple Watch allows users to engage in study sessions wherever they want and easier to resist distraction than they usually would on a cell phone.
Design Impact
More college students find it easier to focus and have shown improved productivity and increased motivation when they study.
Project Key Learnings
What I learned
I used to feel embarrassed and discouraged by the negative feedbacks and complaints someone may have towards my project. However, after going through this experience, I've come to appreciate any feedback, especially the bad ones, as they are valuable opportunities for me as a designer to learn and improve on my projects. I've learned to embrace mistakes and criticisms and understand that my attitude towards receiving them will bring out their value.
I'm not afraid of mistakes and negative feedbacks
I've always loved to cling to small details and finesse them over and over until I have a finished product that I consider to be "perfect." The quick-moving nature of this process helped me overcome my fear of showing my work in progress and pushed me to use my time more effectively. Instead of focusing hours on details for them to be scrapped by the first round of testing, I learned that sometimes, it is important to complete what is necessary to move forward and go back after to refine details. Done is better than perfect, and in UX Design, nothing is truly finished.
Design doesn’t have to be perfect
Throughout the process, I've learned to always stay in touch with the problems my audience are facing. It's easy to think about what I would want if I were a user when diving too deep in the design process but I was able to constantly remind myself that I am not the audience that I'm targeting. I've also learned to refrain from making any assumptions and conjectures about my audience but actually learning about them through interviews and conversations.