Monica uses the Experte app to find an expert to get a second opinion on her daughter's health. She searches for medical experts, views profiles, and selects an expert to video call. During their call, Monica gets reassurance on her daughter's condition. She then leaves a positive review of her experience on the app.
2. Project OverviewE
E
Experte
The smart way to find or offer expert advice...
Experte is a web based application. Experte’s main aim is to provide
expert advice when help is needed. Our app aims to be engaging and
provide rewarding and meaningful interactions in a honest and
consistent way to both the Experts and Advice Seekers. The app has
been designer with a growth perspective, always trying to improve
our user’s experience.
3. Project OverviewE
E
Role Timeline Tools Company
Lead UX Designer October 2018 - August 2019 Figma, Invision, Balsamiq, Prott Career Foundry
The Process
The Challenge
The Double Diamond Strategy
I first analysed the market for any potential competitors. To make the application more user centered I conducted User Research to find out
what people’s needs and goals are.
This helped me create basic Personas that represent my potential customers. Creating a User Journey and User Task Flow based on the User
Research helped me plan out the application basic Information Architecture.
I then worked on low - mid - high fidelity wireframes and prototypes to create a MVP (Minimum Viable Product) suitable for user testing. I took
the final high - fidelity prototype back to the users with questions and scenario tasks to analyse it and to refine it further.
After that I worked on the design of the screens and UI (I used Material Design Guidelines). I created a UI Style Guide and a Language System.
I worked with few fellow UX Designers on exchanging feedback on our designs. Finally I have reviewed the design from the Accessibility
perspective and I made some necessary adjustments. The process doesn’t end here.
I need to do few more iterations of this process to finish the rest of the features.
DISCOVER DEFINE DEVELOP DELIVER
Material Design
UI Style Guide
Language System
Usability Test Report
Preference Test
Usability Test Analysis
Usability Testing
Refining the Design
Design Documentation
Design Collaboration
Design for Accessibility
IA Site Map
Paper Sketches
Mid - Fidelity Wireframes
High - Fidelity Prototypes
Information ArchitectureUser Personas
User Journeys
User Task Flows
UX Analysis
Competitor Analysis
Affinity Mapping
User Interviews
User Survey
Market Research
User Research
An advice seeker needs a way speak to an expert to get on demand relevant advice from them, that he can trust and account for,
because there is a lot of advice and experts on the internet. 'How do you choose?'
It is hard to find a good quality application that provides Expert advice on demand, through a video call.
4. DiscoverE
E
Market Research
Competitor Analysis
As part of the martket research I analysed two competitors: 121 with... and Jinitto. I analysed their key objectives, overall strategy and also
their marketing profile. I also conducted a Swot profile to reveal their strengths, weaknesses, opportunities and threats. This helped me
understand where the app should focus and also how I can improve the user experience of my product. After conducting Comperitor Analysis I
also conducted UX Analysis of the two applications.
I conductected a general research of other competing applications offering expert advice.
5. DiscoverE
E
User Research
User Research Analysis/ Affinity Mapping
To be more user centred I conducted User Research to find out more about the potential users of the application I am designing for. I had to
decide what user research methods I am going to undertake to get the best results. I also needed to decide on the target audience that I am
going to focus on. I decided to conduct a Survey and User Interviews with my target audience (21 - 50 years old). I chose this audience,
because I didn’t want to be excluding older professionals. Those are now more switched on to technology and would be likely to offer expert
advice or search for it. On the other hand younger people may benefit from getting some advice on their advice or their business ideas. I tried
to keep an open mind about this.
Expample 1
Expample 2
Key Findings
Not all people may be comfortable speaking over the video call
People were concerned with managing expectations
Experts would prefer to set their own rate
Additional tools, such as screen sharing or video recording would be useful
People would prefer personalisation
Once I analysed all the data collected from the Survey and the User Interviews from the perspective of behaviours, attitudes, needs/ goals and
frustrations, I was able to see patterns emerging. I have tried to identify repetitive patterns, themes and overall trends.
6. DefineE
E
User Personas
Once all the data from the User Interviews have been congregated and analysed as part of the affinity mapping exercise, I was able to use this
information to create User Personas that are meant to represent the most prominent audiences of application potential users. Monica
represents the advice seekers. She may need to get some urgent medical advice. Alan represents one of our Experts. He is a Chemical
Engineer and would like to offer his expertise to other professionals. As the application caters for a vast range of expertise, I used an expert
and an advice seeker with different set of needs.
Alan’s Goals and Needs
I want to be able to offer advice from my field of
expertise.
I want to be able to share my screen or work
through a problem with a client.
I may need to share or see client’s file upload.
I need that community feel.
I need to be able to offer a free consultation to
gain new clients.
I need to arrange suitable time to contact clients.
Alan’s Motivations
I have a desire to change career.
I would like to connect with like-minded
people in regards of my new career
Alan’s Frustrations
How am I going to fit it all together?
Am I good enough to charge for my advice?
I am going to have to organise a whole load of
legal stuff.
Will People trust my advice and what about my
reputation?
I might feel awkward during a video call with a
new client.
ALAN’S VITAL STATISTICS
Alan is married with 2
children (10 and 12 years
old)
45 year old male living in
Edinburgh, Scotland
Alan spends time on his
computer at work and
also at home. He is
thinking of getting a
smartphone.
'My job as a Chemical Engineer
doesn't fulfill me any more and
I am looking for a new
challenge.'
- the expertALAN COOPER
Alan’s Everyday Activities
Alan works in his 9-5 job as a Chemical Engineer
I may be able to start providing my advice out of
hours before I devote myself fully.
Alan’s Device and Internet Usage
Desktop Device
Mobile Device
Social Media
Technical Know-How
Alan’s Notable Quotes
‘I would be mortified if I couldn’t provide the advice.’
‘As soon as you say an expert and paid for advice, it
adds a whole new obligation.’
‘I need that community feel to stay engaged and
also to keep clients engaged
- part time IT Support Assistant, the advice seekerMONICA CAMBELL
MONICA’S
VITAL STATISTICS
32 year old married
female, living in Bath,
England.
1 child, age 3
Monica is busy and often
on the go. She likes to
search information on her
phone, listen to audio
books Youtube videos
and look for advice on
frugal living, recipes and
health.
‘I work a couple of days a week
as an IT Support Assistant and
spend the rest of my time
looking after my daughter and
the household.’
Monica’s Goals and Needs
I want to check for medical advice in regards to
my daughter’s health during the weekend (out of
hours) and in confidence.
I may need to share an image or a computer file.
I need to find a reputable expert that I can trust
and rely on.
I would like to feel connected with other people.
I need the app to be straightforward and easy to
use.
Monica’s Motivations
To take care of her family and household
To feel organised, engaged and to keep busy
Monica’s Frustrations
I might feel awkward talking to a stranger.
I like to get to the point. Mostly with the internet
you don’t get to the point right away and have to
scroll through lots of bumps.
How do I know that if I pay for the advice that I
will get what I need?
I worry about privacy, security and getting
spammed.
Pop up ads are annoying at times.
Monica’s Everyday Activities
Monica is married with a 3 year old daughter and
works as an IT Support Assistant part time.
When I go to work I need to arrange a childminder
for my daughter.
Quite a lot of time is wrapped around running my
household, family duties and also my daughter’s
health.
Monica’s Notable Quotes
‘The thing with the internet is that you don’t know
who is an expert.’
‘I would need to psyche myself up to do a video
call as I will be seeing someone. I may need to
check my hair or I might still be in my pyjamas.’
‘I might use a video call if I had something specific
to show.’
‘I am willing to pay for advice with further reaching
consequences (eg. financial).’
Monica’s Device and Internet Usage
Desktop Device
Mobile Device
Social Media
Technical Know-How
7. DefineE
E
Quotes
‘My daughter is ill.
I’ve been doing
search on the
internet, but I would
like to talk to
someone.’
‘I need to find a
reputable expert that
I can trust and rely
on.’
I am willing to pay for
advice with further
reaching
consequences.’
‘I may need to share
an image or medical
results in
confidence.’
‘I might use a video
call if I had
something specific
to show, though I
might feel awkward.’
Doing
Looking on the
internet
Noticing Experte App
advert
Acting on Expert
advice
Leaving a review
Reading blog
Sharing link with
friends
Checking
competitors
Reading reviews
searching internet
Downloading
Installation
Signing up
Opportunities
Friend referals
Internet advertisement
Blog , Social media
Affiliate Links
Expert Reviews
Social Media, Blog
Free minutes for
reviews & sign ups
Reward enagement
Analysing Expert
profile
Googling them
Adding card details
Vid. calling a doctor
Application reviews
Customer reviews
Expert profiles
Android and IOS
Sign in with social
media platf.
Bonuses for use
Ability to call on
demand
MONICA’S USER
JOURNEY
Phase 1
DISCOVERYStages
Thinking
ONBOARDING READY TO GO!PROFILERESOLUTIONANALYSIS
Phase 2 Phase 3 Phase 4 Phase 5 Phase 6
DEMOGRAPHICS SCENARIO
Monica is at home in the evening with her family. Her
daughter starts feeling unwell. It doesn’t seem life
threatening, but she’s feeling concerned.
Monica’s goal is to speak to someone to get an expert
opinion on her daughter’s health.
- Monica
- 32
- married, 1 child
- Bath
- part time IT Support
- audio books
Name
Age
Status
Residency
Profession
Hobbies
‘I would like to get a
second opinion on my
daughter’s health.
‘Finaly I can see if I
can speak to
somebody.’
‘I may need to create
a profile, but I would
like to speak to
someone first.’
‘I need to leave a
review, I feel grateful
for the reassurance
and advice.’
‘I better give Experte
a go as I would like
to speak to someone
now.’
‘I wonder if using this
app would put me in
touch with the right
expert.’
Access to Expert
Database
Saving favourites
Clear and simple
interface
Simple onboarding
Experts visible to a
newcomer
Additional tools
Watching onboarding
checking expert
profiles, reviews
choosing 1 - 2
experts
‘The thing with the
internet is that you
don’t know who is an
expert.’
Noticed Experte App
on the internet
Feeling
Concerned, daughter unwell
Reading reviews
Expert profiles
searching internet for
more advice on health
Decided for Experte
Download,
installation, sign up
Watching the
onboarding
Checking
experts +
profiles
Trying to call
doctor, add
bank details
Feeling reassured,
I can call back
Acting on
advice
Leaving
review,
checking
blog, sharing
a link
Discussing the
matter
User Journeys
Using the information from the interviews and User Personas I have put together User Journeys to help me understand what the users go
through when searching and accessing our application. This helps to reveal their highs and lows. I then used this information to note down
opportunities for the app development. The aim was also to create an enjoyable experience all the way throughout, so a low point may actually
be an opportunity for Experte.
8. DefineE
E
User Task Flows
User Journeys and User Personas were used to help me create User Task Flows. Those describe what users need to do to accomplish a goal
within the application and the flow of their actions through the different screens. This was to help me think about the Information Architecture
of the application; keeping in mind all the relevant and necessary features.
MONICA’S
TASK FLOW 1
DEMOGRAPHICS USER STORY
As an advice Seeker I want to find an expert to help
me with my problem, so that I can get to talk to
someone and get a second opinion.
As Monica, a busy mum with an ill daughter, I want to
find a medical expert, so that I can talk to someone to
get a second opinion and reassurance on my
daughter’s health.
- Monica
- 32
- married, 1 child
- Bath
- part time IT Support
- audio books
Name
Age
Status
Residency
Profession
Hobbies
Find a way to search for experts
Search for country wide experts in the medical
fields (eg. doctors)
Find and save experts of an interest
TASK ANALYSIS
Open the app
Make an account
Log into the app
1.
2.
3.
4.
5.
6.
Video call with an expert
(add card details if first time use)
Leave a review
8.
9.
USER FLOW
CREATE PERSONAL
ACCOUNT SCREEN
LOG IN SCREEN
FORGOT PASSWORD
SCREEN
HOME SCREEN ONBOARDING SCREEN
EXPERT SEARCH
SCREEN
SEARCH RESULTS
SCREEN
EXPERT 1 EXPERT 2 EXPERT 3
VIDEO CALL SCREEN ADD CARD DETAILS
SCREEN
REVIEWS SCREEN
Monica creates
her account first
Monica forgot her
password
Monica logs in
Monica needs some
more onboarding
First call, Monica is asked
to add card details.
Monica chose
EXPERT 3
Monica leaves a
review
OPEN THE APP
9. DevelopE
E
Developing Information Architecture
Putting together User Journeys and User Task Flows allowed me to start developing the Information Architecture of the app - The Site Map. I
also conducted a Card Sort. From this survey I received mixed results, so I decided to stick to my intuition and also my User Research in
developing the Information Architecture of the app.
Sign up/ Log in Site Map Dashboard Site Map
10. DevelopE
E
Paper Sketches
I created some low fidelity wireframes, which I put together into a prototype using rapid wireframing and prototyping method. This helped me
brain storm several designs in a short period of time. This helped me think of the high level functionality of the application.
Search: On Demand Video Call
Home screen Search results Expert profile
Calling...Video callReview screen
11. DevelopE
E
Mid - Fidelity Wireframes and Prototypes
After finishing the paper sketches, I used the initial ideas to construct Mid - Fidelity Wireframes and from those prototypes in Balsamiq, the
prototyping tool. I made some additional adjustments to the designs considering the limitations of the tool.
Search; On Demand Video Call
Home screen Search results Expert profile
Calling...Video callReview advice
Review cost Review comments
12. DevelopE
E
High Fidelity Prototype
Finishing the Mid - fidelity Wireframes in Balsamiq allowed me transfer these into a high fidelity prototype. I used Figma for this. I again made
some small changes to the designs as they were developing.
Search; On Demand Video Call
Call ended
Duration:
00:00
Cost:
£00.00
Next
Leave a review
Rate the advice
and get 10% off any next paid call
Ongoing call
Duration:
00:00
Cost:
£00.00
Search Experts
Categories
Home
Name
Expertise
Name
Expertise
Name
Expertise
Business Health Education
Saved
Suggestions
5 Reviews 5 Reviews 5 Reviews
Job offers Call Messages HelpExperts
John Reid
Plumber
Rate per minute
£3.00/ UK
Availability
9:00 - 15:00
Favourite
SVQ 3
Plumbing
File Name
Online
10 Reviews
About my expertise
I am a professional plumber with over 10 years of
plumbing experience. I mostly specialise in boiler
repairs and heating systems. I have a qualification
in SVQ 3 Plumbing.
Qualifications:
Images
Video Call Message
Boiler repair
Results
10 Reviews
Plumber
John Reid
Rate per minute: £3.00/UK
I am a professional plumber with over
10 years of plumbing experience.......
5 Reviews
Expertise
Name
Rate per minute: £X.XX/UK
A couple of lines about my expertise,
to sum things up here.
5 Reviews
Expertise
Name
Rate per minute: £X.XX/UK
A couple of lines about my expertise,
to sum things up here.
Expertise
Name
Rate per minute: £X.XX/UK
A couple of lines about my expertise,
to sum things up here.
Calling...Name
Duration:
00:00
Cost:
£00.00
Call ended
Duration:
00:00
Cost:
£00.00
Next
Leave a review
How was the cost?
and get 10% off any next paid call
Call ended
Duration:
00:00
Cost:
£00.00
Done
Leave a review
Comment
and get 10% off any next paid call
Comment here
Home screen Search results Expert profile
Video call Calling...Rate advice
Rate cost Review comments
13. DeliverE
E
Usability Testing
The objective of the testing was to find out any usability issues, test the utility of the application and determine any problems that participants
face when completing tasks. I could also got a fresh perspective on the application and it’s functionality from potential users. I conducted
usability test with 7 participants. To prepare myself for this task I first created a Usability Test Plan, which also included a Usability Test Script.
During the tests I recorded the session and took some notes.
Methodology
In-Person Moderated Test in a quiet coffee corner or an agreed location.
Participants
I planned to conduct the test with 6 participants, however I decided to recruit an extra participant as additional data was needed. I recruited
people from a group of friends and acquaintances that live in Aberdeen, Scotland and in the nearby area.
Objectives
To determine wether the onboarding process helps the user learn what the application is about
To determine wether the user understands the concept of creating a job offer from the on-boarding
To determine how the user is finding the feature of creating a job offer
To determine wether the search function in the Expert section provides a familiar experience and offers better learnability and
memorability
Usability Test Script
I prepared a script to follow for each usability session. The script contained questions in regards of people’s demographics and few questions
to find out their general attitudes towards technology. I also included some open ended questions in relation to searching for Expert advice.
These were followed by few scenario tasks to be completed by the participants.
14. DeliverE
E
Usability Testing Analysis
To analyse the vast amounts of the data, I used Affinity Mapping and a Rainbow Spred Sheet. Affinity mapping allowed me to see any repetitive
patterns. I first concentrated on finding all positive an negative quotes, all positive and negative observations and any errors. From this I was
able to also find positive and negative trends.
Once all my data was analysed from the affinity mapping exercise by using the Rainbow Spred Sheet, I put together a Usability Test Report with
recommendations to update the application. After analysing results from the Usability Report, I suggested to make some changes to the
application interface.
Usability Test Report
Issues Summary
‘Job offer’ term not understood the way it’s meant
The advice seeker’s ‘Job offer’ screen doesn’t have a clear aim and people find it confusing when trying to create a ‘New job offer’
Screen ‘Your basic profile’ is asking for ‘Email’ and ‘Surname’, but it should be ‘Name’ and ‘Surname’
While creating a ‘New job offer’ the task flow goes back to the ‘New job offer menu’ each time. Also when people get in the menu they
try to click on the further links which are not made clickable yet.
Search bar in Experts (Home) screen doesn’t say what you’re searching for.
15. DeliverE
E
On-Boarding ScreenUpdates Based on Recommendations/
Tested screen Updated screen
Can’t decide who should help?
‘Find advice’ by sharing
your problem
Logo
Get started
Log in
Can’t decide who should help?
Create a job offer
Logo
Get started
Log in
Evidence and Solution
The term ‘Job offer’ is meant to represent that advice seeker’s can create an advertisement with a request for help that experts can approach.
People’s understanding was that it meant to hire someone or get someone to come to do work in your house. From 7 participants in the test
only 1 understood this correctly.
I suggest to change any ‘Job offer’ wordings on On-boarding screen and Home screen to ‘Find advice’ for advice seeker’s. (Expert’s screen can
be called ‘Offer help’ - to be implemented in a further iteration)
16. DeliverE
E
Search FunctionUpdates Based on Recommendations/
Tested screen Updated screen
Search
Categories
Home
Name
Profession
Name
Profession
Business Health Education
Saved
Suggestions
5 Reviews 5 Reviews
John Reid
Plumber
10 Reviews
Job offers Call Messages HelpExperts
Search by keyword/ type of expert
Categories
Home
Name
Profession
Name
Profession
Business Health Education
Saved
Suggestions
5 Reviews 5 Reviews
John Reid
Plumber
10 Reviews
Find advice Call Messages HelpExperts
Evidence and Solution
One of the participants mentioned that he thinks that he can search for anything in the search bar. Couple of people were also a bit confused
where they are, despite the Menu at the bottom.
I suggest to change the wording to ‘ Search by keyword/ type of expert’.
17. DeliverE
E
New Job Offer MenuUpdates Based on Recommendations/
New job offer
Job offer details
My availability
Photos, Files, Video
My budget
Continue
TIP!
You can view and edit final job
offer before publishing!
Details
TIP!
Keep things brief but descriptive enough
Description of my problem
Name of job offer
Broken boiler
My boiler has broken down. It
seems to be on, however error light
is flashing with an error message
H101 on the screen, Can someone
help me please?
Next
New advice request
1 2 3 4
Tested screen Updated screen
Evidence and Solution
While creating a ‘New job offer’ the task flow goes back to the ‘New job offer menu’ each time. Also when people get in the menu they try to
click on the further links which are not made clickable yet.
I suggest to redesign the flow to make it more simultaneous while showing options completed and left to do, without going back to the menu
each time, though with an option to go back to the previous pages.
18. DeliverE
E
Preference Test
After intial Usability Testing, analysing the results, suggesting updates and making the recommended updates, I conducted a Preference Test.
This was based on some knowledge I gained during the Usability Testing.
Some participants were a bit confused about the onboarding screens, eg. some didn’t know to swipe, or click the dots and one person
mentioned that they may not look at the other screens.
I came up with an alternative screen to the three onboarding screens which I needed to test with the users. I run the test in the Usabilityhub.
Previous on-boarding screen Tested on-boarding screen Usabilityhub preference test results
Conclusion
I updated the on-boarding screen to the new suggested once, as that was prefered by most people
19. DeliverE
E
Material Design Guidelines
Refining the Design
I refered to the Material Design Guidelines, when I was finalizing my designs. I made a few adjustments, eg. I changed the Loading Screen. I
decided to do this as with the limited time frame it was more important to progress with my design. I also changed the structure and display of
the main dashboard to follow the guidelines and also to offer an easier to understand navigation.
To refine the design, I re-designed the screens using Material Design Guidelines. I then used the flow of the screens for a Design Collaboration,
where fellow artists gave me feedback on my screens and vice versa. I then updated the screens and consequently analysed for any
accessibility issues.
On-Boarding Screen
High Fidelity Wireframe Refined Design
Material Design Guidelines
Button updated, colour pallette
selected
Design Collaboration
Photo inserted to make it look
less like a button
Design for Accessibility
Heading was added to help
people using screen reader
20. DeliverE
E
Refining the Design
High Fidelity Wireframe
Search by keyword/ type of expert
Categories
Home
Name
Profession
Name
Profession
Business Health Education
Saved
Suggestions
5 Reviews 5 Reviews
John Reid
Plumber
10 Reviews
Find advice Call Messages HelpExperts
Refined Design
Material Design Guidelines
Top app bar refined according to
the guidelines
Material Design Guidelines
4 Collumn grid was used to
refine the spacing
Design Collaboration
Text emphasis was changed so
profession doesn’t look like the
surname
Design for Accessibility
Tabs were used for navigation
that makes sense (screen reader)
Design Collaboration
Once I finalized the prototype design in line with Material Design Guidelines and put together all the design documentation, I needed to check
that some of the decisions that I made were correct. I took part in a Design Collaboration Exercise. This revealed any design issues and also
gave me some qualitative feedback in form of comments in regards of the prototype functionality itself.
Experts Screen (Home)
21. DeliverE
E
Refining the Design
Design for Accessibility
I have analysed my prototype from the perspective of Accessibility. This is to allow people with additional needs or with any issues to have access to features that
they may not be able to access otherwise.
Types of issues resolved: contrast rations (text, navigation elements), links not visible to colour blind, missing or unlogical headlines, unlogical order (screen reader),
minimum clickable areas, cognitive overload
Experts Screen
High Fidelity Wireframe
Search by keyword/ type of expert
Categories
Home
Name
Profession
Name
Profession
Business Health Education
Saved
Suggestions
5 Reviews 5 Reviews
John Reid
Plumber
10 Reviews
Find advice Call Messages HelpExperts
Boiler repair
Results
10 Reviews
Plumber
John Reid
Rate per minute: £3.00/UK
I am a professional plumber with over
10 years of plumbing experience.......
5 Reviews
Expertise
Name
Rate per minute: £X.XX/UK
A couple of lines about my expertise,
to sum things up here.
5 Reviews
Expertise
Name
Rate per minute: £X.XX/UK
A couple of lines about my expertise,
to sum things up here.
Expertise
Name
Rate per minute: £X.XX/UK
A couple of lines about my expertise,
to sum things up here.
Search Results
High Fidelity Wireframe
Search Function
Search Screen
Refined Design
Material Design Guidelines
I used guidence from Lists
in Material Design
Guidelines
Design for Accessibility
Speach can be used to add
keywords
Search results
Refined Design
Design for Accessibility
Screen reader reads the
page in a logical order
Design for Accessibility &
Material Design Guidelines
Minimum clickable area is
48 x 48px.
22. DeliverE
E
Design Documentation
To create over-reaching rules on the UI of the application, I put together Experte Style Guide. In this document I have created a resource
containing the colour pallette, all UI elements, typography, icons, logos for the application.
Experte Style Guide
Design Language System
After creating the Style Guide, I was able to use this resource to create an overall Design Language System, which overlooks elements such as
Accessibility, Language and Tone, Colour, Logo, Common UI Elements, Iconography, Typography and Grid. This is a resource for UX/ UI
Designers and also for Developers and Developer’s Handoff.
Colour palette
Primary colours (+ text colour on background)
#0026ff #7055ff #0000ca
PRIMARY PRIMARY LIGHT PRIMARY DARK
Text on background
#FFFFFF
Text on background
#FFFFFF
Text on background
#FFFFFF
Secondary colours (+ text on colour background)
#e2006b #ff5699 #aa0041
SECONDARY SECONDARY LIGHT SECONDARY DARK
Text on background
#FFFFFF
Text on background
#0000000
Text on background
#FFFFFF
App bars: top
ExpertsTitle
Title
#00020%rectangle ontop ofthe image
Keyboard
a s d f g h j k l
z x c v b n m
q w e r t y u i o p
1 2 3 4 5 6 7 8 9 0
Tips
TIP!
Tip message here, tip message here!
List (Searchresults)
Image list Image list withcaption
Caption Caption Caption Caption
Icons
For colour guidance for icons examine relevant UIelement (withthe exceptionofFacebookandGoogle icon).
Searchsuggestions
Label
Label
Label
Grid
E
E
E
E
Images/Illustrations
Experte app language is minimal and friendly without extra frivols. Experts are provided with their own unique set of guidelines for Expert profiles and go through
thorough approval process. Experts language is polite, professional with a fun twist. None of the users (advice seekers inclusive are not allowed to be dishonest, use
rude and offencive language.)
Copy/Language
Find advice
Tabs
TitleTitleTitle
Messages Call
Bottom navigation
CALL MESSAGE
InactiveActive
Experts
Inactive Inactive InactiveActive
Experts
InactiveSelectedMessagesExperts
Experts
Find advice Call
Alerts and other colours
#DD8500 #7055ff
ALERT REVIEW STARS
#0000ca
ONLINE
#31CA52 52%
CORRECT
Checkboxes
Label (unselected) Label (selected)
Fields
Label empty Label *
Error message
Label filled
Search Filled
Images withinUIElements are for demonstrationpurposes andare tobe replaced.
UIElements
Buttons
Button selected
BUTTON
Button selected
SELECTED
Hight ofclickable area48pt
Typography
Content
AaTitle 1
RobotoMedium- 20pt
AaTitle 2
RobotoMedium- 18pt
Aa Subheader
RobotoMedium- 16pt
Aa Body
RobotoRegular - 14pt
Navigation
Aa Bottom Navigation
RobotoRegular - 12pt
Aa button
RobotoMedium- 14pt
Aa Card
RobotoMedium- 14pt
Text fields
Aa Search blank
RobotoRegular - 20pt
Aa Search suggestions
RobotoRegular - 16pt
Aa Search filled in
RobotoRegular - 20pt
Caption
Aa Image caption
RobotoRegular - 10pt
Aa Review Stars Caption
RobotoRegular - 12pt
AA TAB
RobotoMedium- 14pt
Cards
Jessie Smith
Lawyer
(5 reviews)
23. DeliverE
E
Final Design
Loading screen Onboarding screen Sign up screen Your basic profile 1 Your basic profile 2 Home screen
Search screen 1 Search screen 1 Search results 1 Search results 2 Expert profile Message screen