MY ROLE & RESPONSIBILITIES
Lead UI/UX Design, User Research, User Flows, Prototyping & Testing
TIME
3 months
TOOLS
AdobeXD, Figma, Photoshop
Unison is a website that allows people of all ages to search for the perfect tutor. The user will do so by applying multiple filters and the website will match them to someone qualified for the job.
The reason I chose to create Unison was because of my personal experiences when it came to asking for help or reaching out to teachers. It was always difficult for me to find the right person or the right way to approach people to ask for help. With the use of this site, users know exactly what they are asking for and the tutors that sign up know their responsibilities.
Asking for help can be difficult at times and finding the right person to ask can be just as hard. Some people just don’t match your learning style or maybe you don’t know anyone that can help you in a specific area. There needs to be a place where users can go to quickly and efficiently find someone who meets their academic needs.
Unison makes it easy for anyone to match with the perfect tutor that will guide them to educational excellence!
Through searching, filtering, and scheduling processes, the website turns a strenuous, time consuming task into an efficient and quick one. Unison is your go-to tutor booking app.
Through user research, competitive analysis, and user interviews, I set out gain a deeper understanding of the industry and Unison's potential users.
To prepare my research, I first set some clear goals and created a research plan that would guide my process:
Tutors can be utilized for people of all ages, from pre-school students, college kids, to even parents looking for their child. Therefore, I wanted to make sure I gathered information from a wide range of people in need of a tutor. There were a total of 20 people that filled out the survey, all of them spread between the ages of 13 years old to 55 years old.
Interviewees were asked questions surrounding their tutor searching methods, their preferences, and the time it took them.
It was clear from the data that users lacked a reliable, dedicated tutor booking app that could cater to their preferences.
I started with market research to understand the general market, consumer, and business trends in order to gain a fuller understanding of the market Unison is part of.
Even though I already had an idea of how I wanted to approach the website, I knew I would have to take a closer look at my competitors within the industry. Not to my surprise, there truly were many competitors out there that were very clearly dominating the scene. While there were many apps and platforms that would perform well in one area, however, there were a lot of features that I thought could have been implemented to improve the user experience. It seemed like the main three competitors I had were Wyzant, Chegg and Brainly. Exploring each of these platforms, I evaluated the strengths and weakness of each to see how Unison could fill in any gaps moving forward.
STRENGTHS
WEAKNESSES
STRENGTHS
WEAKNESSES
STRENGTHS
WEAKNESSES
After analyzing the data gathered from the interviews, I wanted to user personas for people with different backgrounds and goals. I wanted to simulate exactly how people with different motives would navigate through the app to achieve what they wanted.
To do this, two personas were created each with their own pain points and goals. Kevin is a high school teacher who wants to see his students to use their full potential. He believes the way to do this is finding a dedicated tutor to guide them through their unique learning styles. Cidney is a mother and successful sales manager. She wants to make sure her child is educated and doesn't fall behind but she has no time in her day to help them herself. Both persona's were created to get a better understanding of potential obstacles and frustrations.
Now with my understanding of Unison's users, I wanted to start thinking about what problems we are trying to solve for them. Taking the insights and needs from the research, I started to dig deeper to better understand what the user's problems are by clearly defining the main issues and applying them to my first design ideas.
I wanted to get insights from users of varying demographics. I interviewed 10 people with different ages and occupations to hear about their frustrations when it came to finding new games. All of these interviews were done remotely.
The interviews revealed many issues, but the main three pain points evident had to do with high quality tutors having too many clients, finding a tutor that matched the desired teaching style, and finding a tutor within their community.
Tutors, especially highly qualified ones, might have limited availability due to other commitments such as full-time jobs, academic pursuits, or personal responsibilities. This can make it challenging to find a tutor with a schedule that matches the student's availability.
Every student has a unique learning style, and finding a tutor who can adapt their teaching methods to match the student's preferred style can be a pain point. A mismatch in teaching styles can result in ineffective tutoring.
In-person tutoring may be limited by geography, especially for individuals in rural areas or those without easy access to reliable transportation. Online tutoring can help alleviate this issue, but it may not be suitable for everyone.
After analyzing the data from the surveys, I had an idea of how I wanted the site to be structured. My goal was to make this a site that could be accessed through web browser but also have a smooth user flow on a phone as well.
A sitemap was created to help me figure out the pages I wanted to be incorporated in the design.
.jpg)
With the help of the site map, I started drawing up some paper wireframes to layout the basic design of the home page. I wanted to make sure I incorporated a hero image, a featured section, and a footer with company details. I marked the designs I really liked with a star.
With the help of these wireframes, I opened up Adobe XD to transition them into low-fidelity wireframes for both mobile devices and computers. I mapped out the home page, search page, tutor profile page, and the entire filtered search process.
Now that I had sketched out my ideas, I wanted to test the decisions I made and make sure that the structure and flow of the app is intuitive for our users. Before working on the visual design, I need to know if the user flow and designs were seamless to first-time users.
I wanted to make sure the app I created was functional and covered all the necessary workflows. I separated the information I collected into 4 different categories: functions, tone, visuals, and user flow. Each color represents statements made by 5 different users. With these observations, I identified patterns made by each of participant so that I could isolate the issues I should focus on in the final designs.
Taking what I learned from my usability tests, I began to make revisions to my design based on the recommendations identified.
1. Revamping the Homepage
Going into this, I wanted to try and find a new unique homepage to stand out. But after hearing the responses of my users, I realized that it's not always a good trying to be the "next big thing." There are a lot of successful tutoring sites and they're successful for a reason, so there's no need to reinvent the wheel. I updated my hero image to look better and more on brand with other websites. I also realized my initial design for showing featured tutors was too big and didn't provide enough immediate information.
2. Updating the layout of the tutor page
A lot of the testers pointed out that the page for the tutor looked too bland. Thinking back to it, I was placing all the information for each tutor carelessly. There was no thought on user experience and what would seem like a seamless experience to them. I redesigned the page to allow users to easily read the primary information of the tutor, while being able to still view the secondary info. The idea was the make the left container scroll as the users looks at the other information.
3. Making the tutor browsing page more intuitive
There were a lot of features that users felt were missing on the browse page - specifically a search bar. While quick filters are nice to narrow down tutors in a group, the search bar lets users immediately look for tutors teaching a specific subject. I also moved the filters to a left container that would scroll as the user scrolls.
After making the revisions to my design to improve its usability, I now wanted to think about how I would convey Unison's brand visually. Unison's branding reflects the attributes: Inviting, Minimal, Techy, Simple. Once I settled on the direction I began working on setting up the visual elements and created a Style Guide.
Using my revised wireframes, the information from my usability tests, and my new brand guide, I now worked on creating final, high fidelity wireframes and created a final prototype. With Unison’s branding defined, I worked on incorporating their identity to craft the visual design of their new application.
After creating my hi-fi wireframes, I created a prototype with the final design.
View Final PrototypeBeing able to create this website was a huge learning experience, especially since this was the first time I had worked on a full website as opposed to an app. There area a lot of features and ideas I would have loved to put into this design so I hope in the future I'm able to bring this site to life so that everyone has access to a reliable, hardworking tutor.
Throughout my boot camp, the importance of research was constantly instilled in my head. As a UX Designer, it's our job to understand the target audience's needs, goals, and circumstances so that the product can deliver seamless experiences. But that doesn't mean every tiny detail needs to be tested in usability study or asked in a survey. Sometimes time will play a big factor as well and every minute of development is important. This project taught me that I should be more prepared in planning out my research process. Next time, I plan on ranking my research goals in terms of priority and the consequences that might follow if something turns our wrong.
Throughout the development of this site, I found myself doubling back on a lot of decisions and design choices I made because I realized later on that there was a much more efficient and understandable way going about it. Most of the time these mistakes were made due to improper planning and rushed decision making. While one small alteration might not take up a lot of time, cumulatively the amount of time wasted on changing simple mistakes added up to hours of extra work. I learned that I need to take more time to think about why I might make a button a certain color, or align text a certain way, or why my choice of icons is important, etc. In the long run, not only will time be saved, but my design thinking process will develop overtime and I'll be able to make this decisions intuitively.
1. RE-TEST
2. HAND-OFF
3. PRODUCT LAUNCH
4. ADD FEATURES
