Menu

Study Buddy Responsive Website

Study Buddy homepage

Skills

Website | UX/UI Design

Softwares Used

Adobe XD | Miro | InVision

Project Overview

Study Buddy! is a responsive website created for students currently enrolled in online tech boot camps and courses looking for study partners. These students, do not have access to other students in the program like they would in traditional university settings, for example. Because of this, they must study alone and it is hard to find others who are in the same program. The solution to this problem is Study Buddy! which allows students to find others in the same or similar courses with similar study habits. Students can study together, with one other person, or in a group, through the video chat and collaboration tools available on the site. Additionally, students will be able to take mindful study breaks to enrich their study habits and also have access to a blog to help strengthen their skills. Study Buddy! is the guaranteed way for students to help one another and truly learn the material.

The Challenge

Many students in online tech boot camps and courses do not have access to other students. In order to connect with each other, students must spend hours searching through social media and online forums. Also, students need a safe way to connect and study together online.

The Goal

Study Buddy! is committed to providing a safe and easy way for students to connect and study together online. Students are able to match with others with similar study habits and study topics.

My Role

I acted as the UX Designer in this project.

Responsibilities

My responsibilities in this project were to conduct research, perform usability studies, create paper and digital wireframes along with low and high fidelity prototypes.

Researching The Problem

To begin, I conducted user interviews to understand user pain points. My interview goals were to understand the process and emotions of searching for a study partner and also understand user preference when searching for the right study partner(s). I interviewed 5 students who are currently or have graduated from online tech boot camps. After each interview, I created an empathy map to clearly display my notes on what each interviewee said, thought, does, and feels. After completing all 5 interviews, I created an aggregate empathy map to combine all common outcomes of each interview into one central location.

Aggregate Empathy Map

Says: Som people need to study alone with some sort of faint soothing noise. Others need to study with at least one other person who can help out when needed. 
Thanks: Everyone needs someone who has similar study habits and knows things that they don't know to have a mutually beneficial study partner relationship. 
Does: Studies 2-4 times per week. Goes to social media or other online chat forums to find study partners. 
Feels: Most people enjoy the reward of studying because they feel more confident in class, tests, and quizzes. However, they feel the process of studying to be long and boring.

Defining The User

The interviews revealed that users had two main pain points:

Simplicity

Students need an easy way to find others that are currently enrolled in similar boot camps and courses that can complement their study habits.

Access To Resources

Students lack access to additional information to help them become better at studying. A few interview participants expressed that they did not feel as though they were good at studying until nearing the end of their course. Knowing how to study best, gives students an advantage at digesting and retaining the information that they are learning in their course.

After completing the interviews, I started to define the user with my findings. I started by creating a user persona.

User Persona

Name: Sam
Occupation: Insurance Agent
Age: 25 years old
Education: Bachelor's Degree
Hometown: Chicago, Illinois
Family: In A Relationship

User Statement: “I am a young professional who is looking to transition to careers. I do not know anyone personally that is in the field or looking to transition into the field that I am looking to transition into. Therefore, it is difficult for me to find study partners and others to connect with on this journey.”

Goals: Find others that are in the same/similar Bootcamps. Find others that are transitioning into the same field as him. 
Frustrations: The Bootcamp does not have a community of people to reach out to. Sam doesn't know where to find people who have similar study habits but are also taking the same or similar course. Sam doesn't know where to go when he needs additional help

Sam is a young professional who graduated from a Big 10 school. He quickly found a job after graduating as a life insurance agent but does not like this job. He recently found a passion for coding and is currently enrolled in an online bootcamp to learn to code. His goal is to learn how to code and transition careers. However, he sometimes gets stuck on certain lessons and wishes he had a study partner to help/support him.

User Story

I then created a user story to further connect with users of the Study Buddy! site.

As a student in an online tech bootcamp and busy professional, I want to connect with others in the same or similar bootcamps, so that I can learn and remember the material that I am learning in my course.

I then moved on to creating a user journey map to help map out the journey that a user would take when searching for a study buddy.

User Journey Map

Action: Create an account
Task List: Enter demographic details, enter academic details, enter personal interests, enter details of what kind of studied you are, enter details about what kind of study partner you're looking for. 
Feeling/Adjective: Eager to meet people on the same path as him
Improvement Opportunities: Ensure HTML/text is set up correctly for screen readers, add alt text to photos, add CC to videos, break account creation into different pages. 

Action: Search for a study partner
Task List: Enter study partner search details
Feeling/Adjective: Interested to find someone similar to him in study habits.
Improvement Opportunities: Filters, Show matches based on profile. 

Action: Browse study partners
Taks List: View study partners with similar interests, view study partner profiles and choose partners best suited for the user, select a study partner to contact
Feeling/Adjective: Excited to see so many people with similar interests
Improvement Opportunities: Filters, separate matches from search results. 

Action: Find and contact potential study partners
Task List: Contact study partner via Study Buddy! site, wait to hear from potential study buddy, set up time to meet with study buddy

Feeling/Adjective: Anxious to hear back and start studying with study buddy

Improvement Opportunities: Send notifications to the contacted partner to remember to respond, give 48 hours for initial contact, suggest other study partners after 48 hours, respond by email option

Action: Meet with study buddy
Task list: choose time and dates that work best for them, meet with study buddy, decide to meet on a recurring basis

Feeling/adjective: mixed emotions of anxiousness and excitement to finally be meeting with someone with similar study habits and the ability to help learn material.

Improvement Opportunities: Online video/voice chat function, whiteboard, scheduler

Defining The Problem

After exploring the user and their pain points, I went on to define the problem that users were currently facing.

Sam is a busy professional in an online tech bootcamp who needs an easy way to contact others in similar bootcamps with similar study habits because he wants to gain more knowledge in the field and is struggling studying alone. 

Competitive Analysis

Now that I know the user’s needs, pain points, and the problem, I went on to conduct a competitive analysis. The competitive audit helped identify key competitors and review products that competitors offer which helps with the ideate phase. I was also able to understand how competitors position and talk about themselves in the market, as well as discover opportunities in the market.

After completing the competitive audit, I conducted a competitive audit report to better understand my findings from the competitive audit.

Ideation

In order to start the ideation process, I conducted a “How Might We” exercise and used this exercise for Crazy Eights.

How Might We

With the user’s pain points and problem statement, I started the How Might We exercise to begin thinking of ideas to solve Sam’s issues.

  • Amp up the good. Different people have different study habits which causes them to use different tools so I thought to create a central location for all of the tools our users typically use to help them study. 

How might we make the studying experience fun, easy to use, and engaging? 

  • Change the status quo. Thinking about the research finding that Sam doesn’t necessarily enjoy studying all the time and really only enjoys the benefits of studying, I came up with a couple of questions. 

How might we design something that helps Sam stay engaged while studying? 

How might we encourage Sam to stay motivated and complete his goals to create an optimal learning experience? 

  • Break the point-of-view into pieces. Based on the pain point that Sam can become easily distracted, I came up with the following questions:

How might we improve the UI to appear cleaner, easier, and less distracting? 

Could we design a way for Sam to only be able to see the tools that he needs while studying and possibly hide the navigation bar?

After this, I completed the Crazy Eights exercise with Sam’s issues and our How Might We questions in mind.

Crazy Eights

Problem Statement: Sam is a busy professional in an online bootcamp who needs an easy way to contact others in similar bootcamps with similar study habits because he wants to gain more knowledge in the field and is struggling studying alone. 

Sketch 1: Join a room by topic or background noise selection
Sketch 2: Add rewards to keep students motivated
Sketch 3: Set goals 
Sketch 4: Integrates with your favorite apps
Sketch 5: Search for study partners 
Sketch 6: hide navigations
Sketch 7: Leaderboard for student of the month 
Sketch 8: Blog

Sketch 1. Users will be able to choose a room of people to study with that matches their study habits based on background noise. Rooms can be completely silent or different varieties of music genres. 

Sketch 2. Users will be able to set goals for themselves and be rewarded when they complete their goals with free products or other rewards. 

Sketch 3. Users will be able to set SMART goals for themselves and track the progress of those goals to help them stay motivated while also working towards being rewarded. 

Sketch 4. Users will be able to integrate their favorite apps to help create a central location for all of their study tools. 

Sketch 5. Users will be able to search for a study partner that matches their study habits, subject, and knowledge level. Students will be able to browse through a number of other students’ profiles to find matches, similar to dating apps. 

Sketch 6. The user will be able to hide the navigation bars when they’re studying to help keep them focused on the task at hand. 

Sketch 7. A leaderboard to help keep users motivated to reach their goals. Competitive users can try to rank on the leaderboard in a number of ways: reaching their goals, helping other students (i.e. holding study sessions with one other person or small groups) or the number of hours studied. 

Sketch 8. A blog to help students relax and wind down on study breaks through meditation, breathwork, yoga, or other motivational articles for students to understand how to become the best student and reach their educational goals. 

Sitemap

When creating a sitemap I explored different types of sitemap layouts including hierarchical, sequential, database, and matrix layouts. I decided to display a hierarchical layout for the main pages before a user decides to log in/signup for the platform because this is the layout that most people are used to. For the login process, I wanted to create a sequence set up to prevent users from becoming overwhelmed when creating their accounts and also segment the different elements that go into profile creation. Lastly, I decided to create a hierarchical sitemap for the study dashboard and its partner pages. This hierarchical sitemap includes a header and footer as a left sidebar to help differentiate the dashboard from the main site. It gives the feel that users are in a secluded study area specifically catered to their study needs.

Paper Wireframes

Layouts

Before creating paper wireframes, I decided which layouts I wanted to use for the site. When choosing a website layout, I researched common layouts and used knowledge from prior design and personal experience to choose the best layout. I also paid special attention to layouts when conducting the competitive analysis. I decided that, in order to differentiate. For the main site, I chose a two-column layout to easily display important information for users to digest. I then incorporated the grid of cards layout in the student dashboard to make the studying process fun and interactive. Students are able to easily customize their main dashboard with the information they find useful.

Creating Paper Wireframes

I chose to build out the five main pages, using my iPad, that students will interact with when first joining Study Buddy! in the paper wireframing process. These pages include the homepage, about us, sign-up process, search for a study buddy, and a student dashboard. In creating these paper wireframes, I also made sure to include the wireframes for a mobile layout to help in the process of creating a responsive design. 

To create the paper wireframes, I created a list of elements necessary to create the different pages. I then referred back to these lists when drafting my ideas for each page. I created 5 versions of each page that I chose and starred the elements that I wanted to include in a final draft. You can view my paper wireframe drafts here.

Digital Wireframes

After the paper wireframing process, I moved on to digital wireframes where I built out the main site and the student dashboard including its components. I also made sure to include any pop-ups or extras that will be needed during the prototyping phase. In the wireframing process, I made sure to include a layout for mobile to create a responsive design for the website. 

Prototyping

Low-Fidelity Prototype

After creating the digital wireframes, I entered the prototyping phase where I connected the screens using various transitions, overlays and interactions.

Low-Fidelity Usability Study Findings

I conducted a moderated usability study to understand user’s journeys and their challenges while using the site. I wanted the ability to view user interaction in real-time and ask additional questions on the functionality and effectiveness of the app. I performed this study through Zoom where I was able to view user’s interactions in real time. I created a research study plan to help guide the testing where I defined research questions, KPIs, methodology, participants and the actual questions and tasks that users would answer and complete.

Research Goals – I wanted to determine if users can complete core tasks within the Study Buddy! website including searching for a study partner, the sign up process and using the online collaboration tools. I also wanted to determine if the website is difficult to use.

After completing my research, I used InVision to create an Affinity Map to help organize and synthesize my data.

Moderated Usability Study Findings

  1. Users had difficulty finding the “view all” buttons. The button should follow the same style as other buttons as opposed to being underlined.
  2. The whiteboard was hard to find and should be in a more visible area and bigger to attract the user’s attention.
  3. Users want the option to use the core features (search for a study buddy, access study rooms) prior to signing up for the platform.
  4. Users found the “Search For A Study Buddy” feature to be effective and necessary but felt the webpage was overpopulated and confusing.
  5. Users wanted the ability to add study buddies as friends without having to contact them first, similar to adding friends on a social media platform.

Refining Low-Fidelity Designs

After identifying themes and prioritizing changes needed, I made those necessary changes to prepare for the high-fidelity wireframing process.

  • Size and location difference in "Whiteboard" feature
  • Users can search for a study buddy and join main study rooms.

Key MockUps

After completing the necessary changes to the low-fidelity mockups, I started the process of creating high-fidelity mockups. Preview the key mockups below.

High-Fidelity Prototype

After completing the high-fidelity mockups, I went on to the prototyping stage. I created an interactive, high fidelity prototype ready to be sent to web developers for implementation.

Going Forward

After completing this project, I feel as though I have a better understanding of the UX design process. I created a responsive website in Adobe XD and learned many tips and tricks along the way that can be used when working with future UX teams.

Impact

The Study Buddy! responsive site received high praise from users and those who were able to interact with the prototype. As the creator of “Newbies In Tech”, I sent the prototype to the group where tons of individuals fitting the target audience of the site were able to interact with it. Many users requested that I find a development team to turn this site into an actual service because of how helpful it would be for them in their journey.

What I’ve Learned

After completing each project in the Google UX Design course, I feel like I’ve learned so much more. In this project, I worked exclusively in Adobe XD to create my designs and loved it! As someone with knowledge and skill set in Adobe products, I found it easy to quickly learn to navigate the product and also learned many tips and tricks.

I’ve also learned that app creation and web design have many differences. As a new designer, I am still learning my personal design preferences but I did really enjoy creating a website.

Next Steps

During my usability studies, users gave really important and helpful feedback. Some of this feedback prompted ideas for future releases of new versions of the Study Buddy! website. A suggestion that really stuck with me was to add a social media aspect to the site so that students can connect with each other the same way they would be able to connect with others on sites such as Facebook or Twitter. In the future, Study Buddy! may start a social media platform specifically targeted at online tech bootcamp students and providing a source of networking and learning while transitioning careers.

Let’s Connect!

Thank you for taking the time to review the Lamond Fashion E-Commerce app! If you’d like to see more or get in touch, feel free to contact me below.

Behance

Leave a Reply

Your email address will not be published.