Study Buddy

Dedicated mobile app and responsive web app design
February - March 2022

Figma, pen and paper
Objective
Design an app that is engaging, useful, and easy to use that helps adult learners maintain a positive outlook on achieving their goals.
Solution
Study Buddy is a tool to help adult learners stay motivated in their academic studies. Study Buddy's primary target users are those working towards their GED who want to stay focused, engaged, and encouraged during the process.
Image of mockups for web app check-in feature
My role
This is a student project for my Google UX Design Specialization program. As the sole UX designer, I conducted user research, created paper and digital wireframes, created low and high fidelity prototypes, conducted usability studies, iterated on designs, determined information architecture, and created a responsive design.
I conducted user interviews with active GED students at an adult education program in our community and created empathy maps to better understand the users and their needs. Research showed that users would benefit most from a tool that helps them stay motivated in their studies.

Research also revealed that users saw pursuing their GEDs as an opportunity to improve their self-confidence, to develop their independence and sense of belonging in their society, and to identify a strong support system while they were enrolled in their program (whether on or off campus).
Research
Research summary
Research interview questions
Pain points
Personas
User journeys
Competitive audit
Crazy Eights
Research interview questions and participant quotes
1. Can you describe your current schedule and how you balance your responsibilities with recreational events?

2. Why did you choose to continue your education when you did?

3. How did you learn about the program you are attending currently?
- Why did you choose to come to this specific program?

4. How often do you attend class at the center, whether in person or virtually?
- When you do, what is your motivation for doing so?

5. Walk me through an early memory at the center, starting from when you made the decision to go.
- How did the experience from being on campus affect you after you left campus?

6. How do you access information about school or your classes?

7. What challenges do you face when maintaining your class or study schedule?

8. Is there any way in which you feel these challenges could be resolved?
"Balancing out going to school, going to work, taking care of family, it's rough...you're working your mind all the time...Sometimes we want to take on all that responsibility and everything, and sometimes we need that support, that release."
- Participant
"It took me a couple of months to get the courage to sign up and take the test because I had done it before."
- Participant
"I don't want to feel like I let anybody down."
- Participant
Support
Users want support on and off campus having recognized their physical and mental drain from being an adult learner.
Focus
Users want to be able to stay on track with their studies and finish their program with minimal interruptions.
Self-motivation
Users want help staying intrinsically motivated and in a positive mindset while striving to obtain their goals.
Image of Lora's user persona picture and description
An image file of Lora's user journey map
Image of Leo's user persona picture and description
An image file of Leo's user journey map
Image of a page for Range's mobile appImage of page from Providers' mobile appImage of the homepage for Careeronestop's mobile appImage of a page for UNICEF's Learning Passport's app
Image of part of Crazy Eights exercise for Lora's problem statementImage of part of Crazy Eights exercise for Lora's problem statementImage of part of Crazy Eights exercise for Leo's problem statementImage of part of Crazy Eights exercise for Leo's problem statement

For Lora, I wanted a minimal layout that'd be easy to use for a low/no-tech user and considered a goal-setting feature and a study-rest interval feature with a timer.

For Leo, I considered incorporating regular positive affirmations, a daily check-in feature, and a brain-break library with meditation resources.

Starting the design
Information architecture
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability study
I completed a card-sorting activity for two rounds with a user to organize features for the dedicated mobile app in a hierarchical layout. The final IA is a result of blending our two visions of the app. More adjustments were made, and the elements highlighted in blue below were included in the low-fidelity and high-fidelity prototypes.

I sketched paper wireframes for a homepage, a goals page, and a check-in feature.

I then made digital wireframes for Study Buddy and conducted a moderated usability study with five users from the adult education program. I focused on guiding a user through a check-in process and reviewing information on the homepage and on the goals page.
Image of card-sorting activity roundImage of card-sorting activity round
Image of IA map
Paper wireframes of the homepagePaper wireframes of the check-in pagePaper wireframes of the goals page
Image of some digital wireframes
Low-fidelity prototype
The low-fidelity prototype connected the primary user flows of completing a daily check-in and reviewing/adding to the user's goals.
Low-fidelity prototype
Image of the low-fidelity prototype of the dedicated mobile app
Usability study insights
Users felt like it was important to have their goals prominent and easy to access. They also appreciated the use of notifications for daily check-ins and alarms. Some users didn't feel that the look was their style. Some felt bombarded by the number of elements in the layout. A user who is an intermediate English language user had an overall difficult and unpleasant experience with the app. They were frustrated with the lack of navigational cues/instructions.
Refining the design
Mockups
High-fidelity prototype
Based on the insights from the usability study, I adjusted the designs.

Initially when considering accessibility, I limited the number of features and included a welcome tutorial to help those who are low-/no-tech users. I also included text labels with icons to clarify their functions, and I included multimedia options to record one's responses in the check-in feature.
Color adjustment
I originally tried a bolder color scheme. However, the tone didn't give some users a calming effect, so I softened the colors and have since received positive feedback.
Image of color scheme adjustment in mockups
Homepage
I simplified the layout and added a footer icon to more easily access the teacher.
Image of comparison of homepage's wireframe and mockup
Check-in feature
I moved the navigation cues beneath the responses of the current question for better visibility. I also added an icon in the footer so that the user always had access to check-in no matter where in the app.
Goals page
I removed the "Favorite Brain Breaks" due to a lack of relevance. I moved the month section next to the day's section per users' suggestion, and to emphasize short- and long-term goal-setting.
Image of comparison of check-in feature's wireframe and mockupImage of comparison of goal page's wireframe and mockup
Image of mockups of homepage
Image of mockups of check-in feature
High-fidelity prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
High-fidelity prototype
Image of high-fidelity prototype of the dedicated mobile app
I started work on designing the responsive website. I used a sitemap to guide the organizational structure of each screen's design to ensure a cohesive and consistent experience across devices.

The designs for screen size variation included mobile, tablet, and desktop versions. I adjusted the designs to fit specific user needs of each device and screen size.
Responsive design
Sitemap
Responsive design
Image of responsive design sitemap
Low-fidelity protoypes
Click below to view each of low-fidelity prototypes for Study Buddy's mobile, tablet, and desktop web app designs.
Mobile web app lo-fi prototypeTablet web app lo-fi prototypeDesktop web app lo-fi prototype
Image of the low-fidelity prototype of the responsive web app for a tablet
Responsive web app mockups
I designed the pages for the homepage and check-in feature across three devices (mobile, tablet, and desktop).
Image of mockups for web app homepage
Image of mockups for web app check-in feature
High-fidelity prototypes
Click below to view each of high-fidelity prototypes for Study Buddy's mobile, tablet, and desktop web app designs.
Mobile web app hi-fi prototypeTablet web app hi-fi prototypeDesktop web app hi-fi prototype
Image of high-fidelity prototype of the desktop web app
Moving forward, I plan to edit all features across all devices to be easier to use for users whose primary language isn't English and for those new to using technology. I also will incorporate additional notifications (such as positive affirmations and alarms for upcoming events) and gamification into the Achievements feature. I will then conduct another round of usability studies with new research questions that focus on the appeal of the app's features to users.
Going forward
Next steps
Takeaways
Takeaways
Thank you for reviewing my work on this mobile app design!

Despite how private one's self-empowerment journey can be, adult learners exhibit a need for a social connection to share their successes and hardships while working towards a long-term goal. They also exhibit a need for continuous positive encouragement reminding them of their capabilities.

During this project, I've considered how a design can make an adult user feel like their input is valid. I've reflected on the use of copy and how the tone and word choice can make a user feel welcome to the app's space and capable of utilizing its features with minimal prior knowledge.

I've learned how to adjust the ultimate purpose of the app if necessary to better fit the users' needs and how the research questions are directly connected with identifying the aim of the tool I'm designing. I've also recognized when I'm thinking about the end user and their primary use of the app and when I'm thinking about the secondary gain for the stakeholder (such as program retention and subsequent funding for an adult education program). When I kept the end user's potential gains exclusively in mind, the design came out more consistent, clearer in tone, and more approachable.