journey of an
UI / UX DESIGNER MELISA
MELISA’S PORTFOLIO
MELISA ANTONIUS
Education 2012 - 2016
Bina Nusantara University 2009 - 2012
SMA Bunda Hati Kudus 1998 - 2009
TK/SD/SMP Hati Kudus 01
Experiences
Knowledge & Skills
Jan 2019 - Present
UI / UX Design
Product Designer & Manager Experiences of Kontrak Hukum
Knowledge & Skills Product Management
UI/UX, Creative Designer of Nostra Solusi Teknologi Mid 2015
Volunteer of Desain GraďŹ s Indonesia in FGD Expo 2015 Mid 2015
Participant [Kelumbi’s Designer] of Panen Raya Nusantara 2015 2014
Selected Volunteer of Fresh n Brite Bina Nusantara 2013 - Present
Freelance Graphic Designer 2010 - 2011
Chief Design Editor of School Magazine [Dominos]
Customer Analysis Adobe Illustrator Product Strategy Adobe Photoshop Creativity and Problem Solving Adobe InDesign Time Management Sketch Agile Project Management InVision Sketch UI / UX Design InVision Branding Adobe Illustrator/Photoshop/InDesign Social Media JIRA Trello Contact Contact melisaschleiden@gmail.com melisa.antonius@gmail.com +62 811 833 6007
UI / UX JOURNEY
Mid 2015 - Dec Present 2018
02
ARTWORKS
MELISA’S PORTFOLIO
MUFIT 2018
Exercise direct in your house? Or maybe in your office with friends? It’s all possible with MUFIT. This platform connects gym-doers and various trainers without gym membership.
05
First, it comes with android based app for user and trainer, landing page and admin dashboard. You can find the beta version on Google Play. For the landing page, check them on mufit.id.
MELISA’S PORTFOLIO
ABOUT
07
MUFIT is a start-up based in Jakarta. Their concept is to provide an online-on demand platform where users can view fitness trainer profiles and specialty and choose the best option for self/group workout.
CHALLENGE Creating easy access to the trainers’ search and profile page. Designing a simple user-flow and convincing trainer’s presentation, with various types of fitness workout categories.
MY ROLE Do the research, do the concept design the whole visual identity of the web and app, also test the prototype. Learn to be a product manager too.
RESULT The app allows users to seamlessly choose their favorite trainers and time to do the workouts. The friendly interface helps the clients trust in the service of MUFIT.
MELISA’S PORTFOLIO
DATA RESEARCH
Research time! We collect data and information in this phase. We did surveys and interviews in the define-phase to determine user journey, problem statement, and solutions.
09
DATA RESEARCH In this research phase, I wanted to understand the fitness world itself from mega-gym to small-gym. USER RESEARCH As the first step, I did surveys and interviews (Design Thinking Process) to discover the user needs and problems.
PERSONA I Ellen, 32. The house wife. Mostly at home, doing chores.
Goal: 1. Flexible time to workout. 2. Can workout in favorite place. 3. Be sure about the trainer.
11
Frustration: 1. Can’t stick to scheduled training. 2. Can’t go to far places. 3. Doesn’t have enough information.
PERSONA II Andre, 26. The start-up employee. Has time after office hours and weekend only.
Goal: 1. Flexible time to workout. 2. Can workout comfortably with his friends. 3. Prefer to train in the office/near office/home. 4. Be sure about the trainer.
Frustration: 1. Only do workout if he want to. 2. No motivation to buy gym membership. 3. Bored to train without friends. 4. Doesn’t have enough information.
12
MELISA’S PORTFOLIO
APP CONCEPT
Feature Prioritization Using MoSCoW Method and Value Quadrant to see the MVP for the first phase. Sitemap To see the high-level navigation in the app to find the information that user needs.
13
User Flow This is the path taken by the user on the app to complete a task. In this step, I made lo-fi prototype in paper too.
SHOULD HAVE
MUST HAVE Landing page
Trainer’s Informations
Prices
History
Mobile App
FAQ
Availability of Trainers
My Profile
Filter
Type of Workouts
About Us
Rating & Review
Contact Us
COULD HAVE
WON’T HAVE
Availability of Trainers
Wishlist
Articles/Blog
Videos
Social Media
Track Trainer/Show Location
Chat with Trainer
Paid 1x24 hr Filter
Home
Trainer's Schedule
Success
Booking Confirmation
Trainer's Option
Check Address Add Voucher
Checkout
Pay
Via Midtrans
Booking Resume Pay Now
Booking Created
Training Session
Move to History - On Going
Trainer's Profile
Cancelled
Order Completed
Unpaid 1x24 hr Move to History - Completed
Order Cancelled Move to History - Cancelled
Resell by Customer Service/Sales
Rate/Review
MELISA’S PORTFOLIO
DESIGN PROCESS
Color The Main Color is Red Orange. Orange combines the energy of red and the happiness of yellow. The colors represent enthusiasm, fascination, happiness, creativity, spirit, determination, attraction, success, and encouragement. Form and Shape I used rounded buttons to make the style more dynamic and less formal. As a request from the stakeholders, I used bold colors for the buttons.
13
#D33B11 playful, energetic, engaging. #F5A623 happiness, excitement, enthusiasm. #979797 conservative, sophisticated. #4A4A4A contrast.
#000000 strength, authority, elegance.
FONTS
Trueno light, regular, semibold
abcdefghijklmnopqrstuvwxyz ABCDEFGHKLMNOPQRSTUVWXYZ 0123456789&% abcdefghijklmnopqrstuvwxyz ABCDEFGHKLMNOPQRSTUVWXYZ 0123456789&%
UI / UX JOURNEY
abcdefghijklmnopqrstuvwxyz ABCDEFGHKLMNOPQRSTUVWXYZ 0123456789&%
14
MELISA’S PORTFOLIO
HI-FI PROTOTYPE
High Fidelity Prototype I used Sketch and InvisionApp to create the hi-fi prototype. With this, Ellen and Andre are able to find their suitable trainer and feel confident to choose their favorite trainer. At the end of service, they can rate the workout sessions of their trainer.
15
User Interface design for Mufit’s Trainer App
17
Landing page design, check it on MuďŹ t.id
MELISA’S PORTFOLIO
CARI PARKIR 2017
Nowadays, many people come to places with their own vehicle. But not all places have spacious parking lot. To reduce time spent, Cari Parkir is one of solution where Jakarta peoples can ďŹ nd their own parking faster, right in their hand.
19
MELISA’S PORTFOLIO
APP CONCEPT
Busy People
Fast Booking
The User Experience was made to guide user to find and book parking space easily. The main target user are 20-30 years old, so I used simple, clean yet playful design look for the User Interface.
21
Easy Parking
There are two platforms of this app, one is for people find parking, and the other is for parking owner who lend their place to Cari Parkir. Also there are admin dashboard and landing page. You can find this app on Google Play and Apple Store.
Parking Location Info
Parkir Motor Hj. Rahman Tersedia 120 - Rp 2.000 /jam Parkir Motor, Parkir Sepeda
Menu
Jl. Kerinci X no. 50 Kebayoran Baru, Gunung, Jakarta 12120 Jakarta Selatan
Selasa
Profile
History
06.30 - 22.00
News & Promo ATM Mushola
Setting
Wallet
Logout
ATM
Toilet
GO!
Wash
Repair
UI / UX JOURNEY
FindParkingLocation
22
MELISA’S PORTFOLIO
BLINKZAP 2016
Blinkzap is a platform that connects online publishers and media owners. It comes with website for public and admin dashboard to manage the internal business and data. Mine is the ďŹ rst design they launched. You can see the evolving design and ideas here https://www.blinkzap.com/
23
MELISA’S PORTFOLIO
Web Overview
25
MELISA’S PORTFOLIO
TRAVELOKA TEBAK SKOR 2018
Who doesn’t know FIFA World Cup? Traveloka had an idea to make the hype to all people in Indonesia about FIFA World Cup 2018 (Russia), to guess the score of the match.
27
The concept is fast yet easy design. The main color is Traveloka’s blue. This project deadline was only 2 days for design and 7 days for development. See the overview of my design on the right side.
MELISA’S PORTFOLIO
INTERDECO 2018
This is a presales project for one of my office’s client. The idea was a website that can be portfolio source of many Interior Designers out there.
29
It’s like building the community of interior lovers, where they can sell or buy the idea, or maybe the real things too inside one website. The concept is minimalist.
MELISA’S PORTFOLIO
SAYURBOX 2016
Sayurbox is one of platfom with farm-to-table concept. They help farmers to distribute their goods to people in town directly. The design concept is earthy.
31
I did photo editing and graphic goods for their markerting department. Until now, they are still using my illustrations or their paper bag and business card. Check it out.
Business Card design for Sayurbox
33
Illustrations on paper bag for Sayurbox
this book containts
100% CREATIVITY THANK YOU!