Expert app
Overview
As things evolve and everything becoming increasingly complex, the decision-making process becomes difficult too.
Because people don’t want mistakes that cost pain, so they constantly seek information online or elsewhere to help avoid wrong decisions. The major goal of this app “Chatxpert” is to help users get direct contact with experts so that they can get professional advice for almost anything.
Challenge
Design an app that enables anyone to instantly chat with an expert from virtually any field.
Hypothesis
I believe designing a generic app that connects users to experts from all fields in one place will make it easier for users to find and connect with experts in a single app.
THE DESIGN PROCESS
Competitive analysis
User persona
Wireframing
Prototyping &
Usability testing
1
3
4
5
6
7
8
2
User interviews
Information Architecture
Hi-fidelity
mock-up
Design
iteration
My role
Researcher, Designer &
User testing moderator
The project lasted for 90days
I used Figma
COMPETITIVE ANALYSIS
Competitor apps
Fibler app
Betterhelp
I went online to search for what other similar apps are already
doing to solve the same problem.
Competitive research allowed me to have a broader idea of the issues that existed in the expert app space and the solutions that had already been created by others. By taking a closer look, the strengths and weaknesses of my competitors could help me determine the features that needed to be added or improved.
Goal
The goal was to come out exceptional in the market. In order to understand their design heuristics, I downloaded both apps on my device. First, I wanted to understand their marketing strategy, pros and cons, identify their strengths and weaknesses. Using the SWOT methodology, to sum up, everything about their strengths, weaknesses, opportunities, and threats.
What I learned.
About fibler for example, the user reviews on google play are not positive because they think the cash-out policy and payment methods on the app were not efficient. In a nutshell, I discover that it was important to design an app that is more organized in a way that is intuitive, user-friendly, and aesthetically appealing.
USER INTERVIEW
Before conducting any interviews, I had to identify what I wanted to learn from the interviews. With that in mind, I drafted open-ended questions to help me gain relevant insights from the participants.
Goal
To Identify the needs, behaviors, thought, and pain points of the users.
Participants and the interview summary
Juia 31, social worker Stuttgart
"I love to read articles about my situations first. If the articles still do not answer my questions, that's when I contact experts"
"When I contact experts, then there should be ways to verify whether they can be trusted or not"
Alberto 33, UX designer Berlin
"When I find something interesting is to clarify, important for me to be able to contact the experts quickly"
Laura, 27 UXer
Milan Italy
"I'm a busy person, it will make more sense to me when I can book appointments for when it is convenient for me"
"Trusting the experts is also an issue for me in most cases"
What I learned
1. It will help to add articles/Blog for the users who prefer to read articles
2. Make expert recruitment a transparent one and allow experts to provide detailed information about themselves in their profiles
3. Make multiple contact methods available on the expert profiles
4. Add a calendar where users can book or schedule appointments with experts
5. Provide extensive links about experts' experiences in the design.
USER PERSONA
User journey map
I created user scenario tasks to help define what my users would want to accomplish. Translating a human need into a feature allowed me to pinpoint solutions and necessary functionality from a user’s perspective.
INFORMATION ARCHITECTURE
User flow
I structured user flow to organize the steps in a way that allows users to complete tasks from an access point to the success criteria. In this case, from sign-up as a new user to reading an article. The second, for an existing user to login and book or schedule an appointment with an expert using the calendar.
Card sorting
I organized the internal content of the app in a hierarchical way. This serves as the structural foundation that allows users to understand the information structure of the app and know where and how to find them
To do this, I conducted an online card sorting exercise using the optimal workshop website. This process helped me validate and make corrections to the initial idea of the site map that I created.
Sitemap
After analyzing the results from the card sorting, I restructured the sitemap to implement the gathered feedback.
IDEATION & DESIGN
Wireframe
I started out using pen and paper to create sketches of the key features of the content pages. This process was quick and allowed me to focus on high-level functionality.
Mid-fidelity mock-up
Once the basic functionality was established, I translated my designs from sketches into basic greyscale visuals using Adobe XD.
Hi-fidelity mock-up
The designs included more detail and provided a preview of how the real UI elements like the typography, the color, button, and icons would look and be placed.
Prototyping
After upgrading the design from Mid to High fidelity mockup,
I linked hotspots between the UI elements corresponding with my user flows
so that a clickable prototype of the app could be created.
USABILITY TESTING
Since the main goal of design research is to build something useful for real users, I needed to evaluate the usability of the digital prototype. I Recruited 6 participants to conduct a moderated remote test using Skype.
Goal
My goal was to find out how users interact with the prototype and what tasks they were struggling with. Below are sticky notes that helped me organized my feedback on an infinity map. If interested, please download the rainbow spreadsheet here
Infinity mapping
This process helped me organize observations into stick notes so that they can be clearly analyzed.
Observation
Positive quotes
Negative quotes
Errors
Pain points
-
Users expected a more relevant or related image for the homepage
-
It's important to pay special attention to the Home button because nearly all the participants couldn't find the Home button
-
Unnecessary elements needed to be removed to make the calendar less cluttered.
-
The alignment for popular experts, articles, and videos was confusing to users
-
The calendar looked outdated and confusing to schedule an appointment
-
There was a prototype error in which users couldn't find the bottom bar and the major navigation icons
DESIGN ITERATION
Feedback implementation
Before
-
The images didn't represent the purpose of the app very well
-
The back buttons were missing
-
The skip button was placed beneath
-
There was no "next button"
-
The color was still grayscaled
After
-
The images replaced with more relevant illustration images
-
The position of the skip changed to the top as requested by multiple testers
-
The back buttons added so that users can return to the previous page
-
The next button added to help users either tap or swipe to proceed to the next onboarding screen
-
The color was finally added to make the color scheme of the app consistent
Home Before
-
There was a cover picture occupying space for the header
-
Logo placement was at the left top corner
-
The article, videos, and popular experts were placed asymmetrically
-
The expert cards were elevated
Home After
-
The cover picture has been removed as it was not necessary for the mobile version
-
Logo placement was moved to the right so that the hamburger menu will have enough place as the major navigation access.
-
The article, videos, and popular experts were placed symmetrically to make them aligned
-
The expert card elevations were dropped because raising cards is outdated in the UX design trend.
Desktop version for the Home screen
Calendar Before
-
The entire calendar screen was cluttered
-
The way users changed dates and time were good but not enough space to tap the elements because the user will frequently mistakenly tap other things instead of what they intended
-
There was a way to get quick information, which was intended to tell users appointment cancellation policy
-
The calendar date was too small and was elevated in boxex
Calendar After
-
More space and alignments were corrected
-
Changing dates and time in a way that allows users to swipe instead of struggling with tapping and errors
-
The information icon has been removed as suggested by testers. This information will now be given in the email feedback after appointment schedules have been submitted
-
The shadow in the boxes have been removed to maintain a flat user interface and modern look
Improvement summary
Because the purpose of this app is to allow users to search and schedule appointments with experts from all fields, it was important to convey that message by using the relevant images in the onboarding screens, which not the case at beginning of the design.
Alignments and placement of icons, navigation bar, and top bar were all rearranged after the usability testing, A/B testing, and peers' opinions from the slack designer community
GIF
The app
My focus in this design was to make sure that my persona which is Julia, is able to either read articles, find the right expert, contact the expert, or schedule video call appointments with the expert. All the features that allow her to complete these tasks are included in this design. Which are;
-Read articles
-Search for experts
-Contact the experts, or
-Schedule video appointments.
