The screens mock-up.png


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.


Design an app that enables anyone to instantly chat with an expert from virtually any field.

My home office
Pencil and Shavings


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.


Competitive analysis

User persona


Prototyping &

Usability testing









User interviews

Information Architecture





My role

My role.png

Researcher, Designer &

User testing moderator

The project lasted for 90days

I used Figma


Competitor apps

Fibler app

Fibler app.png



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.


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. 


Interview 1.png
Interview 2.png
interview 3.png

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.



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"

Avatar 107

Alberto 33, UX designer Berlin

"When I find something interesting is to clarify, important for me to be able to contact the experts quickly"

Avatar 109

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.



Name: Julia 

Age: 3YO

Location: Germany

Occupation: Social worker

Status: Single mum

Based on the interviews I conducted, I decided on a primary persona that will help me stay on track with user empathy and design decisions.

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.

Scenario task.png


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.

user flow.png
user flow

Card sorting

Card sorting.png

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.


​​After analyzing the results from the card sorting, I restructured the sitemap to implement the gathered feedback.

Site map.png



Lo-Fi 1.png
Lo-fi 2.png
Lo-fi 3.png

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.

Mid-FI 2.png

Hi-fidelity mock-up

Hi-Fi 1.png
Hi-Fi 2.png
Hi-Fi 3.png

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.


​​​​​​​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.




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.


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.


Positive quotes

Negative quotes


Screenshot 2020-09-08 at 17.48.10.png

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



Before screen_ onboarding.png
  • 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


  • 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.

Home After screen.png

Desktop version for the Home screen

Calendar screen Before

Calendar screen_before.png
  • 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 screen 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

Aftermate screen for calendar.png

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



The app

-Read articles

-Search for experts

-Contact the experts, or

-Schedule video appointments.

The screens mock-up.png