User-Centered Design: An Iterative Process
Alberto Cacciatore
UX designer
Project Overview
TutorEd was a project for Career Foundry's UX Immersion course.
The objective of the project's brief was to create a responsive web application (mobile-first approach) to enable anyone, from anywhere, to instantly chat with a tutor of any subject.
My role as a UX/UI designer was to apply a user-centered process to research and designing the best possible solution to solve the problem of our users. I aimed to come up with an interactive prototype able to simulate the primary user's flows of the users and then to apply a suitable user interface to it.
Understand the Problem
Problems Statement
"Students need a way to quickly connect with the most appropriate and qualified tutor for the relevant subject of studying because they need immediate support to overcome the problems they have when studying alone."
Hypothesis
We believe that creating an app where Students can quickly search for a tutor with the relevant qualification, that is currently available to give immediate support in video call will satisfy the needs of immediate help for the students.
Objective
Enable users to quickly identify the most appropriate tutor currently available online and let them receive support right away.
My UX Design-process
User-centered design
User-centered design is a framework that places the user at the center of the design and development process. It focuses on who'll be using a product, the tasks they need to complete while using the project, and the environment in which they'll use the product.
Discovery: The goal of this phase is to identify those who’ll be using my product, the conditions they’ll use it under, any business requirements, and finally, the user needs of my product. To put it simply, this is where I determine what it is I am building. This phase typically consists of competitive analyses, audience definition, user scenarios, and surveys.
Concepting: This phase is all about creating design solutions that address the business and user requirements. I’ll be crafting wireframes, user flows, mockups, and finalized interface designs.
Prototyping and User Testing: During this phase, I determine if the design solution is effective via user testing.
Discovery
1. Competitor Analysis
A SWOT profile was created for each identified competitor.
After having identified the problem to be solved, I wanted firstly to explore which would be the main competitors of my app, and analyze how they are trying to solve the issues of the users.
I identified "Wyzant" and "Gopeer" as some of the main relevant competitors for my application.
From the analysis, those emerged as some of the key points to consider for the development of our app:
User's trust: Provide and communicate professionalism with a high standard level in the design and functionality of the app.
Quality and support: Provide highly qualified tutors with clear documentation of their value.
Competitiveness: Be competitive on price and open to involving users from any country.
The full competitive analysis report is available for download here.
2. Understanding the Users
To start to understand my users, I needed first to choose the most appropriate exploratory method of research.For my project, I have been choosing a quantitative method as User Survey and an attitudinal and qualitative method as User Interviews, and this resulted in letting me get a significant amount of information using two different inexpensive methods of research.
The Research Goals
How students usually search for help when they are struggling with their studying?
Are students more inclined to search for help for a specific one-time problem, or are they looking for support for a long term plan?
What are the user’s expectations from a tutoring application?
Which are the features the users would like to use with a tutoring application?
Which are the most critical task Users need to make on a tutoring application?
What are the most common points of frustration users have when they use any type of mobile application?
User Survey
Once my research's objective was clear, I created a User survey for gathering quantitative data. In consideration of my goals and the format of the user survey that I was going to use, I prepared my questions.
Using "Surveygizmo" as a survey tool, I tried to involve as many relevant participants as possible, trying to attract them through advertisements on channels like Facebook, LinkedIn, and Slack.
Survery Finding
- The most important tasks for students are: search for the appropriate tutor, find clear details about them and being able to get in touch , chat with the tutor, saving the progress, create account, login, being able to post questions, schedule of the lessons, contact other students, booking a lesson.
- Features that student would like to see: a easy way to communicate with my tutor, history of previous question and answer, chat platform, being able to connect with other students, progress indication, search function, navigation filters, being able to compare tutors and see their review, real-time communication with tutors, minimal use of keyboard, easy way to share screen and document. Easy way to describe my question (video, audio, text, image), dashboard with a review of my information and data, a simple calendar.
User Interview
To refine my research, still, with my research's goals in mind, I used the results from the User Survey to create a script of 10 questions for the user interview research.
I then scheduled a 30 minutes interview with six relevant potential users.
The full research report is available for download here.
How to look for relevant trends in such a significant amount of research results?
- I firstly Collected and organized all the data in a single place
- I started to explore the data analyzing the results and pulling out informative quotes, behaviors, needs and goals, frustrations, and more.
- After I have extracted all the key points of my research, I have reorganized and grouped the information, creating an affinity map based on the main topics that emerged from the analysis.
- With all the data organized and categorized, I was then finally able to Identify the user insights.
User Research Insights
With the identification of the Insights, other than describing aspects of human behaviors and motivations of our users, we are now able to see how we may take actions to solve their problems.
Some of the main Insights of this users research includes:
Some of the main expectations from students from a tutoring application include: Being able to have immediate help, having a good community for support, and professional perception of the application.
Interaction with the tutors is one of the fundamental parts of the application; students want to have maximum flexibility in the way they can communicate with them. They want to have some tutor always available, and that will help them also by keeping up their motivations.
- Many potential students evidenced the importance of choosing the right tutor, and they will pay lots of attention to reviewing the skills, credentials, reviews, and any details of the tutors before deciding to contact them. It will be important to give all the reassurance that students will need about the quality of the tutors.
The full research report is available for download here.
To define our user furthermore, I created user personas to give to my research a human face, a narrative, and make it more memorable and relatable.
3. User Journeys
After having identified and analyzed our users, with the User Journeys, I have been visualizing and researching, which are the processes our users go through to accomplish their goals.
4. Content Auditing
During this stage, I have then been performing content auditing on one of our competitor's app; this has given me more valuable insights and suggestions about the content and functionality that our users may expect to find in our application.
CONCEPTING
5. User Flow
After having identified our personas, their needs, the type of actions they will want to perform, and having understood the objective of the business behind the project, it was time for me to create a task analysis and user flows for the primary goals of our users.
Create User flows and Task analysis was helpful to avoid to put too much focus on individual pages, to make the design of the app more user-centered, and in understanding which pages were needed for the app before starting with the information architecture phase.
6. Site map
The first development of the sitemap was created starting from the review of the user journeys and personas previously created.
The results of the first iteration of the sitemap were then verified and reworked with an open Card Sorting test with potential users.
The results of the card sorting showed a trend where the participants merged the cards in five main categories. With these results, the site-map was then refined as follow.
7. Low-Fidelity Wireframes
Once the Site-map was completed, and I knew precisely the screens that I need to create and their purpose, I started to draft by hand the wireframes.
I started to focus on the screens necessary to complete the users flow previously defined for our personas.
In the following example, I show the hand-sketched I did for the screens of the user flow to get support from a tutor.
8. Mid and High-fidelity Wireframes
After having sketched the screens, it was time to make them digital. Then with the use of "Balsamiq," I started to create Mid-Fidelity wireframes.
On the following stage, I added more details creating High-fidelity wireframes.
PROTOTYPING &
USABILITY TESTING
USABILITY TESTING
9. Prototyping
From the high-fidelity wireframes, I created with Adobe XD, an interactive prototype that included the user flows of our personas.
The creation of this prototype was fundamental to allow me to have an instrument to test my application to potential users.
10. Usability Testing
To start with, I created recruitment documents and consent forms; this was followed by the development of a Usability Test Plan, and a Usability Test Script to be used during the test.Test Objectives:
Goals:
- Verify the learnability of the application when new users interact with it.
- Verify errors, problems, or difficulties for the users to complete the main tasks, and explore if these tasks can be simplified.
- Get any additional feedback from the users about the usability, design, and feeling of using the app.
Test Objectives:
Determine if the Participants can:
- Sign-in: Participants can complete the process of Sign-in in the app easily and without any main concern.
- Receive Support: Participants can receive support from a chosen tutor easily and without any main problem.
- Use Payment Method: Participants can insert a payment method without any main issues.
Methodology:
- 6 Participants were tested at their place of work or in their homes.
- Tests were conducted as moderated, remotely using a Mobile simulator on a laptop computer.
- The test included a short introduction, four tasks to be completed, and a debriefing.
After all the tests were finished, the results were reviewed. During the review, notes were taken on sticky notes and grouped in a logical order.
These notes where used to develop an affinity map, then the results were put into a rainbow spreadsheet before moving forward with making any adjustments to the usability of the app.
Finding and fixes
For the test report, I prioritized the top 5 errors or issues that were identified during the usability test that needed to be addressed first.
Issue 1: Remove payment from onboarding
Issue 2: Tutor search page too crawled
Issue 3: Difficult to exit from filter's screen
Issue 4: Home page is not clear enough
Issue 5: Booking Page Confusing
View the full Usability Testing report here
11. Review
Following the Recommendation from the Usability Testing, in this stage, I have been adjusting the prototype to fix the problems founded.
Issue 5: The original screen was too confusing for the users, so I decided to divide the process into two separated steps
12. Approval
In this phase, I made the ultimate decisions about what stays, what goes, and what needed to be reviewed until when the Prototype was approved to go into the development phase.
User Interface
1. Design Language System
In this stage, I have been working on the Visual Design of the app, creating a specific Design Language System that I have applied to my Prototype.
To do this I had to develop a set of overarching rules and standards that can help to maintain consistency across multiple platforms and devices.
The Design Language system I created included rules for the following elements:
- Color
- Typography
- Iconography
- Common UI Components
- Grid
- Images and Illustrations
- Tone of Voice
- Accessibility
View the full Design Language System document here
2. Design Collaboration
After I applied the Design language system to my prototype, I have been looking for feedback from my network of UX/UI designers. The following are some of the improvements I made.
The updated "My Events" Screen
My Events Screen
Comment: This is called Dashboard, then below, I can see My Dashboard. Reconsider maybe different name for the second. Slightly increase spacing here between Favorite tutors and frame.
Action taken: I renamed the section of the dashboard, then I did a review of the design to give more visibility to the titles of the different sections and more readability of the text.
The Updated "Search" screen
Search Screen
Comment: Do the pictures need to be that big in their preview? You can make them smaller here, and so you would get more space for your introduction of the tutor, and it won't look that crowded.
Action taken: I resized the pictures of the tutors and used more white space around the tutor's profile section. I also used different colors for the top buttons to give them more visibility.
View the full Design Collaboration document here
3. The Final Screens
Presentation And
Final Interactive Prototype
Final Interactive Prototype
Explore the interactive prototype here
What I learned
The project of the TutorEd app was for me, an excellent opportunity to explore in deep all the end-to-end Ux Design process from a User-Centered perspective.
I understood the importance of specifying the context of the use of the application, who will use it, under what conditions they will use it, and to be able to define business requirements and user goals that need to be met for the success of the product. I realize how it can be useful to learn what works and what doesn't works from the competitors.
I also particularly enjoyed performing user interviews and usability testing, where I was surprised to discover how each user can react so differently when trying to solve their problems. This reinforced the concept of how helping the users to reach their goal easily always needs to be the main focus of my design.