UX UI Designer: Faizan Ul Hassan Arshad WorkAway is a Mobile Platform

specifically designed for young tech

nomads, IT and software professionals,
as well as startup founders.

WORKAWAY

Let’s Begin!

Primary Goal
Our Primary Goal is on cafes and private establishments that can be used as
temporary workspaces. These places offer a relaxed atmosphere, distinct from
traditional offices, and are particularly popular among our target audience.

Design Process
The Design Process we follow was Involved Documentation, UX Flow Writing,
Information Architecture, Low Fidelity Wireframes, High Fidelity Wireframes, User
Interface Design & Prototyping.

Low Fidelity
Empathy Maps Information UX Flow High Fidelity User Interface
Documentation Wireframes Prototyping
/ User Personas Architecture Writing Wireframes Design
(Skeleton)

Signin

Tool Used: Miro

Empathy Mapping
Empathy Mapping: A powerful tool for understanding users, stakeholders, and
target audiences. Enhance design thinking by mapping emotions, needs, and
experiences for informed decision making and impactful solutions. -

Tool Used: Figma

U ser Personas
rafting user personas in the UX process brings empathy to design. By
C

understanding user needs and behaviors, we create meaningful, user centric -

experiences that resonate and engage effectively

C ameron Tin ker c Emma Muller

Age: 32 Age: 28
Job: Freelancer Job: Remote Worker
Location: Berlin Location: Berlin
Occupation: Graphic Designer Occupation: Marketing Manager

Goals Paint Points Goals Paint Points

Flexible Workspace Unpredictable schedule Discover nearby Commuting c hallenges
Inspiring Workspace Need for quiet work environment Affordable co-working hubs Cost o f dedicated office spaces

Al ina e er W b M a is her
x F c

Age: 22 Age: 45
Job: Student Job: Entrepreneur
Location: Berlin Location: Berlin
Occupation: Student Occupation: Tech Startup EO C

Goals Paint Points Goals Paint Points

A ffordable space for study groups Limited budget Secure meeting rooms Time constraints

Inspiring Workspace Quiet and productive study areas Networking e ents v Desire for collaborative atmosphere

Tool Used: Google Docs

Doc mentation u
C omprehensive documentation empowering seamless navigation. Access vital
information effortlessly. our go to resource for clarity and guidance on our
Y -

products and services

K ey ea uresF t

e i e en a
Fl x bl ions Users
R t l Opt : De ai e orks a e nforma ion
t l d W p c I t : Add-O ns an us omisa ions Users d C t t : In era i e a Displays all
t ct v M p:

should have the ability to book Every listed workspace should should be able to add additional available workspaces in a specific
workspaces by the hour or by the provide clear information about services or amenities to their area. Users can click on a location to
day. This should be visually clear and what s included in the package (e.g.,
' workspace, such as extra meeting get more information and book
easy to understand. Wi Fi, printer, coffee).
- rooms, pro ectors, or catering.
j directly from the map.

e ie s an ee a k Users can
R v w d F
rate and provide feedback on
workspaces to help other users in
their decision making. Providers can
also give feedback on users, which
db c : Bookin ys em Allows users to
g S
book workspaces in real time and
make payments. Providers can
- update availabilities, confirm or
decline bookings, and receive
t : In e ra ion of Thir ar y P s
t g t d-p
- Integration of APIs from platforms
like "WeWork" and "Regus" to offer a
broader range of workspaces while
earning a commission for every
t A I : Events and Networking: Providers
can promote events or special offers
for their spaces. Users can organize
or participate in networking events
or meetups at the listed

can be useful for repeat bookings. payments. successful referral. workspaces.

In er isin Placement of targeted ads

-App Adv t g: Premium Features: Additional features for premium C ha an ommuni a ion ea ure Allows direct
t d C c t F t :

relevant to our audience, e.g., tech tools, startup users, such as exclusive offers, advanced search communication between users and providers to
events, or special offers from workspace
and filter options, or the ability to book workspaces clarify questions or discuss specific

providers. in advance. requirements.

n i i ua Users Allows users to create a profile, set their preferences, and view their booking history.Provider Profiles: For cafes, private establishments, and other
I d v d l :

workspace providers to list their spaces, upload photos, set availabilities, and manage bookings.Search and Filter Function: Allows users to search and filter workspaces
based on location, type of workspace (cafe, private room, etc.), availability, and other criteria.

Tool Used: Miro

Information Architecture
rafting seamless digital experiences through thoughtful organization. Our
C

information architecture services optimize accessibility, usability, and content

structure for unparalleled user engagement and satisfaction

ns
i o
t lu at
g ra
C
on

C heckout

Tool Used: onfluence

low Writing
C

UX F
raft seamless user ourneys with UX Flow Writing. Elevate user experiences
C j

through intuitive content, ensuring a smooth and engaging interaction at every

touchpoint.

User Side UX Flow

S g i in o Fl w R ese Pass or t w d Sc reen : S g i nu p Fl ow C rea e Your Profi e

t l

Signin Titl Back CT Signup Titl Upload Pi

Login screen illustration/log Illustratio Signup screen illustration/log Job title fiel
Email fiel Reset password Titl Name Fiel Company Fiel

Password fiel Reset password descriptio Email fiel Location Fiel

Forget passwor Email Fiel Password fiel Bio fiel

Signin CT Location input fiel Next CT Sa e v & Set Preferences CTA

Linkedin logi CTA “Send password Reset link”
Linkedin signu

Google login Google signup

S e Preferen es
t c W orks a e Preferen esp c c Networking Preferences
Workspace Preference y
T pe o f Workspace Checkboxes( Cafe, Private Room, Coworking Field of Expertise & Expert Checkboxes ( UIUX
Networking Preference Space Design, Finance, Software Development)
Event Preferences Amenities C heckboxes ( Wifi, Printer, Snacks, Coffee Type of Workspace Checkboxes ( Cafe, Private

Atmosphere Checkboxes ( Quite, Sociable, Inspiring Room, Coworking Space

Location Checkboxes ( City Center, Supurb Availability of Networking Checkboxes (Weekdays,

Flexible Booking Options Checkboxes ( Hourly, Daily, Monthly) Weekends, Evenings)

Event Preferences Home Screen Nav Bar

fferent type of events Checkboxes (
Interest in di Searc Hom
Workshops, Tech talks, Meetups) Filter Ma
Frequency of participation Checkboxes( Weekly, Ta b Bookin

Monthly Product Lis C ha

Preferred Event venues Checkboxes ( Online, Onsite ) Na v Bar Profile

Product Ta b F lti ers Sc reen D e ai s Pa e

t l g

Imag Al Time Range Field Ca e f Detai

Titl Localitie Date Range Calenda Locatio

Ratin v
Pri ate Roo Price Range Field Galler

locatio Co-working space CTA ‘’Save Filters’ Additional Ser ices v

Additional ser ice v Clear Filters Re iews v
Rate: $/hr, $/day, $/mont
CTA “Book Now”

Location Gallery Add t i iona er i es l S v c R v e ie s w

Ma Images o f services Private Room, Meeting Roo Image / Nam

Get Direction Localities & Co-working space CTA ‘’ Add’’ Dat

Star Rating & View all Reviews

Op en for Ne orkin (Po u tw g p p C he kou c t Sc reen Payment Method O d r er nforma ion

I t

s reen)
c
Product Detai Apple Pa men y Su btota
Descriptio Additional Ser ices Pro ector v ( j . $15 Pa pa y Additional Ser ice v
CTA ‘’ No’ Catering . $10 Card Pa ment y Commission Fee

CTA ‘’ Yes, I’m Open’’ Pa ment y Metho Ta

Order Informatio Tota

Tota CTA ‘’ Checkout Pay’’

CTA ‘’ Checkout Pay’’

Add c ar d d e ai s
t l M a h akin
tc M g Sc reen M a p Sc reen B ookin Lo a ion Po u
g c t p p Sc reen
Car Congratulation Searc h Ba f
Ca e Location

Card holder name fiel Match

’
It s a Filter

Card Number fiel Progress bar with percentag Ta

Expiry dat Image Map Vie

C V Nam Nav Bar

CTA ‘’ Save details & make Person detail

payment’’ CTA ‘’Chat with your match’’

M y ookin B g Sc reen Cha t Sc reen C ha n ot I b x Sc reen

Product Booking Lis Chat Bo Personal C hat
Na v bar Search Cha

Chat Lis

Nav bar

Profile Screen Profile Image B ookin His oryg t Sc reen

User Imag User Nam Workspace booking lis
Slider Button ( User Mode, Provider Mode Camera ico Delete all
Booking Histor Person in o f
f
Pre erence

Payment Metho

Edit Profil

Notification Setting

Membershi
Workaway Rewards Hu
CTA ‘’ Log out’’

Product Notification Screen M em ershi s

b p Sc reen W ork Aw ay e ar s Hu
R w d b

Imag Notification Settin Membership Plan Earn Point

Titl Toggle Buttons Basic Pla Earn Badge

Ratin Premium Plan C hallenge

locatio Redeem Points

Additional ser ice v

Rate : $/hr, $/day, $/mont
CTA “Book again

Map icon

W ri e a e ie s reen
t R v w c PROVIDER MODE:
Ta b Nav Bar
Overall Ratin M y Sp a es
c Sc reen Al My Space
Write Review field b (All, Cafe, Private room
Ta Ca f Bookin

Write Review field Private Room y

Pa men

Cha

Profile

Provider Side UX Flow

M y Sp a es
c Sc reen Ta b Nav Bar

b (All, Cafe, Private room

Ta Al My Space
Write Review field Ca f Bookin

Private Room y
Pa men

Cha

Profile

Product Add ne w Sp a e c M y ookin

B g Sc reen Product
Imag Upload Image Ta Imag

Delete & Pencil ico Choose Space dropdown fiel Booked Work Spac Titl

Titl Space Name fiel Na v Bar Ratin

Ratin Location field ( map icon locatio

locatio Set time field ( clock icon Additional ser ice v

Additional ser ice v Select Days field ( Calendar icon Rate: $/hr, $/day, $/mont
Rate : $/hr, $/day, $/mont Set Rate field ( Currency CTA ‘’ Approve, Reject’’

Floating Button Special Offer fiel

Additional Services ( Service name

& Price fields

CTA ‘’ Save’’

Payment Screen Transa ion His ory

ct t Profile Screen
Earning Grap Earning Grap Slider Button (User mode, Provider mode)
Transaction History Transaction Histor Booking Histor
Product Imag f
Pre erence

Space Nam Payment Metho

Dat Edit Profil

Amount Notification Setting

CTA ‘’Log out’’

Tool Used: Figma

Low Fidelity Wireframes (Skeleton)

The foundational UX blueprint. Building the structure with wireframes, the skeleton
sets the visual and structural framework, laying the groundwork for seamless user
experiences

9:41
9:41
9:41

9:41
9:41
9:41

9:41
9:41
9:41

9:41
9:41
9:41

Add ard Details

C Map View C afe Details
-

Tool Used: Figma

High Fidelity Wireframes

raft seamless user ourneys with UX Flow Writing. Elevate user experiences
C j

through intuitive content, ensuring a smooth and engaging interaction at every

touchpoint.

User Side Wireframes

C he kou c t W ork Aw ay e ar s Hu
R w d b

C afe de roof 4.6 Image Here

Berlin, Germany
Earn Points
Image Here Wifi | Printer | offee
Book a workspace: +10 points
I
C

04:30 PM 8 Oct, 2021

Leave a review: +5 points

$30.50
W ll i iam James Refer a friend: +20 points

Senior UX UI Designer
Additional Services Attend a networking event: +15 points
Pro ector
j $15
User Mode Provider Mode
atering $10 Earn Badges
please
C
Start for free
14:02 Payment Method Booking History
First Booker: On your first booking.

Networker: Attend 5 networking events.

S g i n u in p

om for my work. C ash Payment WorkAway Explorer: Try out 5 different workspaces. Name
Cash pay
14:02
Preferences your full n
C ard Payment C ha en es
ll g
enter

+Add card details

Monthly hallenge: Book at 5 different locations in Email
Payment Methods C

Paypal a month and earn +50 bonus points

w are you today? pay through paypal Enter your emai

14:02
Order Information Edit Profile e eem Poin s
R d t Password
Subtotal $30.5 100 points: 10% discount on your next booking.
6+ C haracters,
Additional Services $25 Notification Settings 200 points: A free drink at your workspace.

500 points: Enjoy 4 hours of workspace, on us!

C ommission Fee $3.0
Hi
Tax $5.0
14:02 Memberships
Total $63.5 Log Out
Sign in with
C heck Out (Pay $63.5)
Home Map Bookings hat Profile
C
Alread

C rea e Your Profi e

t l C he kou
c

Image Here
re Image Here

Click to upload Profile pic

Additional Service

Job Title Pro ector

j $15

Catering $10
your job title
y
enter

Payment Method
ompany (if applicable)
C afe e roof
d
C
4.6 50km C ash Paym
ash pay
enter your company 2400 US-30 Suite 106, Oswego, Germany C

Wifi | Printer | offee | up C C C ard Paym

Location +Add card de

enter your location Location Paypal

pay through

Bio
Order Information
write your bio Image Here Subtotal
Additional Services
C ommission Fee
Tax

Gallery Total
n in with Linkedin
Save & Set Preferences € 30.50 C
Pay Now
Sign in 1-4 Dec

u b C on ra u a ions!
g t l t
Searc h here... Filter
M em ershi sb p

It’s a Match!
C urrent Plan
All Localities Private Room C o Working Space
-

B asi c

nts
95%

Matched!
€99 .99 F ree W ll i iam Jam
Senior UX UI Design
$20.25
40.20
€
Features
User Mo
No exclusive offers or discounts

€99 .99 Stay updated, but no 24 hour head Booking H

ents.

start on new listings.

ent workspaces. Image Here Image Here

€ 40.20
Unsubscribe Preference

Alb er t Sw an Open to Networking

ent locations in UX/UI Design
Payment M
s Cafe de roof 4.6
Finance
Berlin, Germany
Marketing
Image Here
5/day | /hr | 00/Month
Software Development Premium
€7 €7 €7

Edit Profile
Book Now
ext booking.
€ 8 Per Month / € 80 Per Y ear
kspace.
Notificatio
pace, on us! € 20.25
Special Offer: To let you savor the
20.25
€
premium experience, we re offering a 14 ' -

€99 .99 day free trial. Dive into the world of Membersh
unlimited bookings, exclusive deals, and
more. Plus, keep an eye out for our referral
C hat with our Match
Y program and occasional discounts to
Home Map Bookings C hat Profile make your WorkAway ourney even more j Home Map
rewarding. Upgrade to premium and
redefine the way you work and network!

Provider Side Wireframes

Payments Add New Space M y ookin s

B g

Upload Images New Approved

Fri Thu, Aug 2021
€12,874
-

€ 80k Image Here Image Here

54,329 lick to upload

C
€ 60k €

€ 40k
vider Mode € 20k
C hoose Space
0
1 2 3 4 5 6 7

select space

Transactions History Space Name Image Here

afe de roof
+ 50.37
C
enter space name
€
Aug 27

Luxury Sweet
+ €99 .0 Location
Aug 27

afe de roof enter location

+ 50.37
C
€
Aug 27
Image Here
Luxury Sweet
Set Time
+ €99 .0
Aug 27
select time

Select Days

select da s y

Set Rate Save

C hat Profile My Spaces Bookings Payments C hat Profile My Spaces Bo
set rate

Tool Used: Figma

U ser Interface Design (Style Guide + UI)

Elevate user experiences with our meticulous user interface design. We seamlessly
blend creativity and functionality to craft intuitive, visually appealing interfaces for
optimal user engagement and satisfaction.

Style Guide

Ty o ra hyp g p

S a oshi on ami y
t F t F l
ABC DEFGHIJKLMNOPQRSTUVWXYZ

a bcdefghijklmnopqrstuvwxyz
Satoshi font offers a clean and modern aesthetic,
enhancing readability across various devices. Its 1234567890
versatile design ensures visual consistency, making it
an excellent choice for web and mobile.
‘?’“!”(%)[#]{@}/&\<- ÷×=>®©$€£¥¢:;,.* +

Aa Aa Aa A a Aa Aa
Light Regular Medium B o ld Black Italic

Heading H1 Fon t W ei h g t F on ize

t S Line Height Sp a in
c g

Heading H1 B old 28px 34 0 %

Heading H2 B old 24px 30 0 %

Heading H3 B old 22px 28 0 %

Heading H4 B old 18px 26 0 %

C A T B old 16px 24 0 %

Body Large M e ium

d 16px 24 0 %

Bod y Large R g e u ar l 16px 24 0 %

Body Small M e ium

d 14px 22 0 %

Bod y Small R g e u ar l 14px 20 0 %

C aption M e ium
d 12px 15 0 %

Caption R g e u ar l 12px 18 0 %

C o or y esl St l

Primary
#1876d2 Base #65a4e1 50% #65a4e1 40% #8cbbe9 30% #b2d1f0 20% #d1e4f6 10%

# 1876d2

e on ary
#9618d2 Base #a83eda 50% #b965e1 40% #cb8ce9 30% #dcb2f0 20% #ead1f6 10%
S c d
#9618d2

om imen ary
#9618d2 Base #9618d2 Base #a83eda 50%
C pl t
Alternati e v

en
#9618d2 Base #9618d2 Base #a83eda 50%
Acc t
Alternati e v

Gradient

Gradient

Grid

C oun t Ty e p W dt i h M ar in g Gutter

4 Columns St re hc A uo t 15 15

15 15 15

Grid Used

88px 88px 88px 88px

B u ons tt

Button Text Here Button Text Here Button Text Here

Outlined Butto Text Butto

Filled Butto
Full Length Button Full Length Button
Full Length Button

Button Text Here Button Text Here Button Text Here

Filled Butto Outlined Butto Text Butto

Short Length Button Short Length Button Short Length Button

I n u ie s
p t F ld

Lorem Ipsum Lorem Ipsum Lorem Ipsum

Searc h here... Filter Lorem Ipsum enter time

Field with Leading + Trailing Ico Field with Trailing Ico Field with no Ico
Full Length Field Full Length Field Full Length Field

User Side Nav Bar Provider Side Nav Bar

Home Map Bookings C hat Profile My Spaces Bookings Payments C hat Profile

Home Map Bookings C hat Profile My Spaces Bookings Payments C hat Profile

Map Home Bookings C hat Profile My Spaces Bookings Payments C hat Profile

Map Home Bookings C hat Profile My Spaces Bookings Payments C hat Profile

Map Home Bookings C hat Profile My Spaces Bookings Payments C hat Profile

Ic ons

Logo

Logo on light Background Logo on Dark Background

Structure on Dark Background Structure on Light Background

U ser Interface Design

Signin
User can signin using their email, Google & Linkedin. If user forgot their
password so they will tap on “Forgot password” TA and then user can C

reset their password.

Signin

Reset Password

Signup

Process
User can signup using Email, Google & Linkedin. After clicking on
“Next” User will go to the reate your profile screen, where user need C

to Upload Image, Job title, ompany, Location & Bio. After that user will C

click on the “Save & Set Preferences” and it will take user to the Set
Preferences Screen where user will set their preferences and “ reate C

Account”.

Signup

C reate our Profile

Y Set Preferences

Home & Interactive Map

User an apply filters & search for the localities, Private Rooms & o Working Spaces. On the service card user will have Name of the Place, Location, Additional Services, Star
C C -

Ratings, Price per day, per hour & per month. Then user have clear TA “Book Now”. Same as home this application will have interactive map where user see all the services in C

collapsed state taping on that will open the complete details, also user will have the view of Share, Solo & Premium spaces.

Home Interactive Map

F ilters
User can Select multiple filter to take their search to the advance level.
These filters includes: Time Range, Date Range, Price Range, Type of
Workspace, Special Atmosphere, Unique Place with Special
Atmosphere, Availability, Flexible Booking Option, Amenities, Size &
Capacity, Reviews, Networking Option & Location.

Filters

Detail Page

& Checko t u
After clicking on the space from home page, user will navigate to the
Space Detail page, where user will see Image, Information, Location,
Gallery, Review, Price, date & “Pay Now” TA. After clicking pay now C

user will have pop up where it user will be asked for “If they are open to
networking” in this step after making the decision user will go to the
checkout screen, where all the details will be available to read and a
C TA “ heck out & Pay Amount” After that if the user already added the
C

payment method so the payment will be made otherwise user need to

“Add Payment Details” and Tap “Save Details & Make Payment”.

Space Detail Screen

ard D etails
Add C

C heckout

et wo r k ing
Open for
N

Matching UI
After making the payment, if user selected “Open for Networking” so
the user will match with other user on the basis of the Skills. And also
user will have TA “ hat with our Match”. After taping on this TA
C C Y C

user can chat with his match.

Matching Screen

Chat Module
After clicking on the “ hat with our Match” hat module will open and also user can also see all the chat he did with others.
C Y C

Chat Box C hatting

Booking
From Nav bar user can see all the booking he made, also the status of
the booking e.g Approved, Re ected & Pending. j

My Bookings

Profile
From Nav bar user can access his profile and under profile user will
have Booking History, Memberships, Payment Methods, Edit Profile,
Notification Settings, WorkAway Reward Hub & Set Preferences. And
also user will have “Logout” TA.

From here user can also switch to the “Provider Mode”

User Profile

Membersh
ips

Notificat
ion Setting
s

WorkAwa
y Rewards
Hub

Provider Side UI
After clicking on the “ hat with our Match” hat module will open and also user can also see all the chat he did with others.
C Y C

My Spaces

Bookings

ce
Add New Spa

file
Provider Pro

Payments

Tool Used: Figma

Prototyping
Explore innovative ideas with our Prototyping services. Transform concepts into
tangible models, accelerating development and ensuring efficient design iteration
for optimal results

Thanks for your Time!

Want to Hire Me? Its too simple! JUST TEXT ME.