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
- Some people need to study alone with a faint soothing noise playing in the background. Others need to study with at least one other person who can help out when needed.
Does
- Studies 2 – 4 times per week.
- Goes to social media or other online chat forums to find study partners.
Thinks
- Most people need someone who has similar study habits and knows things that they don’t know to have a mutually beneficial study partner relationship.
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, boring, and tedious.
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
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
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
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
- Users had difficulty finding the “view all” buttons. The button should follow the same style as other buttons as opposed to being underlined.
- The whiteboard was hard to find and should be in a more visible area and bigger to attract the user’s attention.
- Users want the option to use the core features (search for a study buddy, access study rooms) prior to signing up for the platform.
- Users found the “Search For A Study Buddy” feature to be effective and necessary but felt the webpage was overpopulated and confusing.
- 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.
Users found it difficult to find the view all button because of its size. I increased the size and bolded the words to make it more visible on the page. 
Users found it difficult to find the whiteboard because of it’s size and location on the page. I increased the size of the whiteboard button and also placed it in the top right hand corner to be more visible to users. 
Users can now search for a study buddy without an account but must login or sign up to view full profiles or contact potential study partners. Users can also browse study rooms and join one of the two “No Noise” study rooms. Users must be logged in to view, join and save other study rooms. 
Users felt the search for a study buddy feature was overcrowded because a list of their current study buddies appeared at the top of the page and the results of their search appeared on the same page. Recommended study buddies also appeared on that page so users were confused as to where to look to find the list of study buddies that populated as a result of their search filters. 
Search for a study buddy is now split into two pages. The first page features just the search filters. Once a user clicks search, they search results appear on a second page. Users can change the filters by click “Back To Search” in the upper left hand corner.
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.
View comments
Leave a comment