UX Designer
Design Thinking Process
I used the Design Thinking Process as the basis for my creative problem-solving process. All projects have different subtle needs and solutions, but the framework provided by this process help deliver a good solution.
Tools Used :
-Sketch
-Invision
-Photoshop
-Illustrator
-Balsamiq
-Realtime Board
Role : UX/ UI Designer
Scope : Competitive Analysis to Final Design
Timeline : March 2018 - December 2018
Discover:
Understanding the business and user needs is essential for understanding what you have to design.
The Challenge
People in the Philippines have trouble finding real experts online who can help them whenever they are faced in unfamiliar situations where they can call or message someone easily.
Our challenge is to provide people an app where they can search for verified experts from different fields of expertise and communicate with them anytime.
“People have trouble finding real experts online”
Competitor Analysis
Yellow Pages PH and Quora are the main platforms which users usually use for looking up experts or services online because Yellow Pages PH has a great database of services offered but it is not updated regularly while Quora has a great Q&A platform but most contributors are not really experts on the topic they usually answer which leaves users more frustrated.
“Most contributors are not really experts which leaves users more frustrated”
The Opportunity
Expert App aims to provide people from different ages and different backgrounds a quick way to video-call or messages experts they choose anytime and anywhere!
How?
Expert App will have verified Experts and will have the necessary information listed in their bio including their availability times so that users can easily pick the experts they prefer.
This app will also require partial payment for the advance video-call bookings of the expert so that Experts will be protected from uncertain bookings and last-minute cancellations.
“so that users can easily pick the experts they prefer”
Define:
Researching user’s behavior and needs whenever they are faced in unfamiliar situations to understand the user.
Research Goals
-
To understand the attitudes, behaviors, motivations, and needs of a user who is looking for help.
-
To determine what process the users take in choosing an expert.
-
To discover where the users usually get the information or opinion they need.
-
To discover if users are using apps or website that has a similarity to Expert App.
Affinity Mapping & Insights
To understand the users' behaviors and needs, I conducted a series of user interviews and usability testing to gather data from the user’s and fixed those into an affinity map.
Affinity mapping is one of the best ways to gather data and to organize data gathered from different users. This also helped me focus my priority on the most important things to do because I can organize the opinions of users according to their needs and behaviors.
“Affinity Mapping helped me focus my priority on the most important things to do”
*Affinity Mapping
*Affinity Mapping
Affinity Mapping gave me a lot of interesting insights from 5 participants I have interviewed by determining what their behavior, attitudes, needs, goals, and frustrations when they search for help.
The following insights are:
Importance of HOW to find solutions
-
When people need help, they want to get straight to the point instead of getting the runaround.
-
Most people who weren’t able to find solutions on the web just did the trial and error method until their problem is fixed or manageable.
Importance of WHERE to find solutions
-
Half of the Users go to YouTube for instructional videos.
-
Most of the Users go straight to Google.
-
Some users go to Facebook groups and forums to get an opinion.
Importance of RELIABILITY and CREDIBILITY of the SOURCE
-
Users need to cross-analyze data they’ve obtained from different sources like Facebook Groups, Forums, Known Communities, Wikipedia and YouTube before taking an action.
-
Sometimes when Users cross-analyzes data from different sources this can further confuse the user more when the different sources are conflicting on the same topic.
-
Having a background information helps users to know if the person or website giving out opinions/solutions is credible or not.
-
Half of the users want the references or background information for an expert like for example a doctor should state his credentials for the user to believe he is a legit practicing doctor.
After extracting, interpreting and getting key insights from the data. It is now time to create user personas to help me develop Expert app by knowing who the target user is and to empathize with their needs.
User Persona
User personas are created by using the insights gathered from the affinity mapping. Personas are helpful in guiding me with the design in the early stages of the process because they provide me with an understanding of users in terms of goals and capabilities.
Matthew
20
Male
Manila, Philippines
College Student
Fil-American
Eldest of the 3 children
About Matthew
He is a Junior College Student. He loves to spend time with his younger siblings on the weekends. Mathew is also a good student and he always tries his best to be the top in class. While Matthew is your typical college kid he also loves to spend his time searching the web for opinions about pet care. Matthew has a soft spot for animals especially the ones who are abandoned.
“I love helping out my younger siblings in the activities or projects they have.” “ I like to gain more knowledge in pet care and impart that knowledge as well” - Matthew
*User Persona 1
30
Female
Manila, Philippines
Model, Actress
Fil-Australian
Engaged
About Jessica
She is a lively woman in her early 30’s who loves to do some mini projects or DIY activities in her free time. Jessica is a model and actress who appears on local television. She is also engaged to a Chef and blogger. Jessica loves to spend her Sundays with her family and her pets because she is always busy on the weekdays. She also works out on the weekends for her upcoming wedding.
Jessica
“I am excited in this new chapter in my life and I feel best when I take part in this process instead of delegating the task to people and I hate it when I get the runaround when asking for advice because it wastes my time.” - Jessica
*User Persona 2
User Journey
User Journey helps me visualize what my users' goals are, their motivations for using the app, their pain points while using the app, their personality and behavior, and the main tasks they want to achieve.
Matthew's Journey
Scenario
Matthew is your typical college kid he and loves to spend his time searching the web for opinions about pet care and other topics because as the eldest child he loves to know everything.
Click image to enlarge
Goals and Needs
-
Matthew needs someone to talk to whenever he needs to consult with an expert.
-
Matthew needs someone to share his thoughts about his experiences with his pets.
-
Matthew needs the advice of a credible expert.
-
Matthew sometimes needs to video-call so that he can explain the situation better instead of chatting.
Click image to enlarge
*User Journey 1
Jessica's Journey
Scenario
Jessica loves to do DIY projects for her upcoming wedding and she also tries something new to surprise her fiance.
Click image to enlarge
Goals and Needs:
• Jessica is a capable woman who loves to do things on her own but sometimes she also needs the help of someone who’s knowledgeable in the tasks she does.
• Jessica’s schedule is tight and it is better for her to ask for an expert’s advice before proceeding with her mini-projects to avoid delays.
• Jessica needs an app that has features like appointments with experts.
Click image to enlarge
*User Journey 2
Having a User Persona and User Journey in the early stages of the app is crucial in building an app that is user-centric. User personas and journeys can evolve along the design process as we learn more about the users and their behaviors.
Develop:
Creating the initial designs of the app and testing it with the user to analyze the pain points of the user for iterations.
In organizing the app’s content hierarchy, I gathered participants to engage in a closed-card sorting activity to check if the hierarchy inside the app would make sense to them. After the card sorting activity, I assessed the data and revised some of the content so that users can easily navigate the app.
Sitemap
*Sitemap
After doing the sitemap and analyzing everything, it’s time to sketch out the wireframes, I started sketching the main features by and creating a lo-fidelity prototype to test it with the users. After the lo-fidelity, mid-fidelity wireframes are created as more screens are added until creating high fidelity wireframes.
Wireframes
Wireframes are created to have Minimum Viable Product to test with users. These wireframes are supposed to provide basic functionality, contents, and information hierarchy. By having these, Wireframing helps me determine which features are wanted and which elements are needed.
*Wireframe Gallery
User Testing
After creating mid - fidelity wireframes, I did another round of user testing to check if users can perform specific tasks. The goal of this study is to assess the learnability, efficiency, errors, and satisfaction of the users in using Expert App. This study also aims to uncover more insights from users.
Test Script
I started the test with direct tasks for the users and after doing the tasks, I asked them open-ended questions that would help me understand them better and uncover more awareness on the things which I may have overlooked.
Direct Tasks
-
Use Expert App to message and ask an Expert on how to best take care of your plants.
-
Use Expert App to post your question to gain different opinions from different people.
-
Use Expert App to video-call an Expert and show him your plant because it will be easier for you to describe and the Expert to explain what is happening to your plant.
Open-ended Questions
-
What is your first impression of the home screen? What do you think of the buttons?
-
Please explore the app. Is there anything that you liked/disliked about this app?
-
Would you suggest something to improve your experience with this app?
-
What features do you think is essential for this app?
-
Would you actually use this app?
Analysis
After the user-testing, I have gathered a lot of data to sort out and analyze into which categories they will go to in the rainbow spreadsheet.
*Analysis Mapping
I used the Rainbow Spreadsheet to arrange the five categories that I got from the analysis mapping earlier and noted the issues where users got a lot of frequent errors. This helped me pinpoint the issues that need to be iterated first. The Rainbow Spreadsheet also helped me uncover the positive feedback I got from users and I can use this to data to promote more positive interactions from the app and the users.
*Rainbow Spreadsheet
Design Iterations
Design Iterations are based on the critical issues based on the rainbow spreadsheet.
Issue 1
Book a Call and View Availability confused all of the participants.
Suggestion
Instead of having 2 separate buttons, Merge the buttons and name it Book a Call and inside that page contains the Expert’s availability.
Evidence
6/6 of the participants have difficulty in navigating the buttons and they are confused about which one to choose when booking for a video call.
*Click image to enlarge
Book a Call and View Availability confused all of the participants.
Issue 2
Suggestion
Makeover the UI elements of the page so that participants will have a sense of familiarity in navigating the page.
Evidence
2/6 of the participants have trouble in the filter by page.
*Click image to enlarge
Filter by page confused several participants in navigating the page.
Issue 3
The design was too simple for almost all the users.
*Click image to enlarge
Suggestion
Make the whole prototype into a colored one and fix the UI elements to make it seem more real and engaging.
Evidence
5/6 of the participants found the design very simple and some described it as boring and dull.
Issue 4
No tutorial on how to use the app or what the app is about.
Suggestion
Create an onboarding page after the splash screen to let users know what the app is about. Onboarding can be accessed thru information icon in the Home Page.
Evidence
6/6 of the participants have suggested putting a tutorial on what the app is about.
*Click image to enlarge
Suggestion
The whole calendar design is changed so that users can easily tap the button without difficulty.
Evidence
1/6 of the participant have found that the book icon in the calendar to be small.
*Click image to enlarge
Issue 5
Book Icon in Calendar (Expert’s Availability) is small for a participant.
Deliver:
Documenting the Design System language of Expert App for easier communication between designers and developers.
Design System Language
I compiled the Typography, Tone of Voice and Copy/Language Guidelines, Colors, Icons, Imagery and Illustration to create a Design System Language. A Design System Language will help different teams in a project communicate better because there is a standard to be followed.
Expert App
