PORTFOLIO
Gisela Angelina 2021
Table of Contents
I.
II.
III.
An Introduction
02
Experience
04
UI/ UX Case Studies
06
IV.
Research Project
T-bike Apps
Create Personas
Switch Revamp
Usability Testing Process
17
Fundamental Research
V. VI. VII.
Workshop
31
Other Projects
35
Connect with me
38
01
Product Design
Hey! I am Gisela Angelina and you can call me
UX Research
Gisel or Sela
You can reach me on
0889 0899 0203
giselangelina22@gmail.com
@giselaangelina
I. An Introduction
02
The Girl that never sleeps. She decided that work around digital products and research was what she wants in this field. So to achieve it she starts to develop her ability and improve her skills. With her ENTJ personality, she believes there are no irrelevant actions, that every move and every idea is part of something bigger. So to satisfy her curiosity she like to observe and explore something in detail to get the new experience and never miss a moment.
While she is not in the field, she likes to experimenting with various new recipes , discovering corners to relax and enjoy a coffee , and craft something to satisfy her mind I. An Introduction
03
My Working Experience
Creative Lead
Dream Factory Event Organizer
February 2015 -
January 2017
Responsible to create an event concepts and idea to bring a beautiful moment to the clients. Illustrating design ideas based clients and teams needed and become a supervisor for creative teams.
Jr. UI/ UX
PT Ako Media Asia (SALT)
April 2017 -
April 2018
Responsible to evaluating user requirements, in collaboration with product managers and developers. Illustrating design ideas based on discussion with director and designing graphic UI elements. And also contribute to make proposal for pitching.
Sr. UI/ UX
PT Ako Media Asia (SALT)
April 2018 -
April 2019
Responsible to gathering and evaluating user requirements, in collaboration with product managers and developers. Concepting workflows, user flows and wireframes. Maintain ongoing project and become a supervisor for Junior UI/UX Designer.
Product Design
Switch Mobile
April 2019 -
December 2020
Effectively improve user experience based on product goals, define user flow, wireframe and present the ideas/ solution to the team. Do iteration using usability testing, A/B test method and keep improving the apps by analyze the data also from benchmarking methods.
UX Research
Smartfren
Be
January 2020 -
Present
II. Experience
liable to understand both perspective, business objectives and user needs, conduct user research, competitive research and analyze the product, evaluate by doing qualitative and quantitative methods. Provide reports of findings, insight and suggestion to stakeholders.
04
Last Formal Education
Tools
Bina Nusantara University, Alam Sutera Main Campus
Bachelor of Art (SSn.)
Adobe XD, Ai, PSd Sketch
Expertise
Marvel App and InVision
Teamwork
Competitive Analysis
Project Management
Data Analytics
Adaptable
End-User Research
Communication
Usability Testing
Details
Visual Design
Achievement
Google Analytics and Firebase Appsflyer Miro.com and Mural.co Maze.co and usertesting.com
Switch Best Employee 2020
The Winner of switchnovation 2020
II. Experience
05
UI/ UX Study Case Below this I will share my project about UI/ UX I’ve worked on before
Enjoy;)
T-bike Apps INTRODUCTION Telkomsel M2M (Machine to Machine) service called T-Bike. Through a device that has been implanted with a special SIM card, vehicle owners can track, monitor, guide and control the motorbike directly from the cellphone.
PROJECT BRIEF Create a user friendly application with a few features that facilitate and provide customer needs regarding the tracking tools apps, and also dashboard to manage the operation.
ROLE UI/ UX,
Together with project managers and creative lead to define the solution, create high-fidelity wireframe collaborate with UX team and do the interface, at last validate the design with Usability testing.
III. T-bike Apps
07
INTERVIEW WITH STAKEHOLDERS AND USER
PRODUCT CHARACTERISTIC People
Urgency
Tracker
Trusted
Secure
Data
TARGET MARKET Primary Target
Delivery Services and Dealers
Spesific for the use of motorbike as the main instrument, so as the company have intention to maintain and track the vehicles also the driver job. Secondary Target
Personal Owner
Anyone who wants to insure his motorbike to be more safer.
Vision and Mission Develop a smart and Innovative tools that can be used for all target market
Providing an apps to facilitate the tools and dashboard for managing the bigger field
Focus on customer needs and safety
T-bike in the next 5 years
A very convenient and secure GPS tracker with the apps and dashboard as the facility to support the usage Biggest Challenge
1. Information overload
Generates a huge amount of data for fleet managers to review
2. Many Chance of assets ‘disappearing’
Or not being used to their full potential, which represent a significant loss.
3. Small problems in a large enterprise unnoticed
Sometimes these problems are only discovered after a major crisis.
III. T-bike Apps
08
HI-FIDELITY WIREFRAME Homepage
Smartcard, showing the information about latest activity and other information that useful for customer
III. T-bike Apps
ON button indicate that the motorbike active
My Bike Detail Page
This page have information about the bike, trip history and settings to contorl their tools
Notification Page
Notif format adjusted with each category of alert
Trip History Detail Page
Showing detail info about the location and other information about the motorbike
09
My Bike Detail Page
Notification Page
DESIGN Phase 1 Homepage
III. T-bike Apps
Trip History Detail Page
10
Community Detail Page
Statistic Information
DESIGN Phase 2
TESTING
Community
Last step, before going to development process, we do Usability Testing, to validate the design and how user experience it. From our user perspective we can got a few feedbacks and insight to improve the apps in accordance to user needs
III. T-bike Apps
11
2. Switch Apps Switch, digital telco with application based. User can do anything in apps, from buy SIM Card, do activation process, check quota balance, purchase data package and all activities in one apps.
PROJECT BRIEF Revamp the checkout process and allow users to utilize the promo/voucher/discount easily. Business hope to increase conversion and retention through the use of discounts/vouchers.
ROLE Product Design
In collaboration with product owner to create a good product based on business needs, current situation and our user behavior to see what opportunities that can be improve, also work together with developers.
III. switch revamp
12
THE OBJECTIVE Increase the conversion by giving them the best experience for purchasing our product. Treat them by giving more rewards to make them return to using and make a purchase in convenient way.
DETAIL REQUIREMENTS User can choose the avaliable voucher without input the voucher code
Include multiple ways where users can get this discount/reward
Convert loyalty points into discounts
Using double rewards (voucher+loyalty points)
Upsell purpose voucher
III. switch revamp
FUNDAMENTAL RESEARCH To see what is the PROs and CONs to have voucher in our checkout process, what is the type of voucher that suite to each user segments and how to make voucher/ promo can influence impulsive buying. CURRENT SITUATION REVIEW Take a look the existing data about promo/ voucher journey happen in switch apps, the usage so far, user behavior in using voucher and also spending the loyalty points data to see the possibility of how to utilize the loyalty points. COMPETITIVE ANALYSIS Do competitor and other digital product analysis to see whats other do in terms of voucher flow and get the best practice approach for voucher flow, what can be readjust to switch apps
13
HI-FIDELITY WIREFRAME Homepage
Free text promo code intended for partner’s promo
Checkout Page
Upsell information to get more voucher/ discount Small highlight section to triger user to check it now
III. switch revamp
Multiple Rewards
Input Voucher Page
Available voucher and user can se the details
Loyalty Points (Ruby) converted to cash just by switching the button
Card for apply promo
14
DESIGN FLOW Homepage
III. switch revamp
Your Voucher
Voucher Applied
Product Choose
Voucher TnC
15
Promo Info on Payment List
OTHERS SCREEN Checkout Page
III. switch revamp
Promo Page v1
Promo Page v2
Multiple Rewards
16
Research Project Below this I will share my process and project about research I’ve worked on before
Enjoy;)
switch Personas BACKGROUND Switch committed to address some of the user pain points in the telco industry:
Limited Option
No Transparency
No Rewards
No Backup
(Numbers & Data)
(Sedot Pulsa)
(Loyalty Programs)
(Emergency Quota)
Gain results of users that fit with switch segmentation to be able to deliver a convenient product in the future.
ROLE Product Research,
Create a personas for the right switch target market by find out the product characteristic, compare to the existing users type and behaviors then adjusted to a 4 type of personas
IV. Create Personas
18
B. Set the behaviour and Characteristic
A. Set the Audience
C. Do Interview
D. Create Personas
A. SET THE AUDIENCE (based on business models)
1.
2.
Primary Target
Secondary Target
B. SET THE BEHAVIOR AND CHARACTERISTIC Decide what can be a standard/ benchmark for each character
For example we set into this categories:
IV. Create Personas
Age range
Hobbies
Region
Gadget
Total Spending per month
Subscription
Quota Spending
Entertainment
Lifestyle
Accommodation
19
C. INTERVIEW SESSION To validate our right personas, doing deep interview is really important to makesure that our persona is valid and to get the persona as close as possible.
Idealy we choose 4 type of user that suite to the product, like the youngest (college student/ first jobber) and the adult (manager/ executive/ entrepreneur etc.)
The things needs to prepare Research Plan
To ensure the background, objective, Methodology, how we measure the Success Task, Key Needs and the Hypothesis 2. Discussion Guide
Detailing the question or scenario that we want to ask,
for example:
a. How do you typically spend your day?
b. What is your favourite food/ drink/ fashion/ things to wear
3. Observation List
Write down all the answer from our user exactly what they said and highlight the important points from user’s perspective. 4. Report
Last make the reports and put all the information into personas template, so the stakeholders can see it clearly and understandable.
c. Question about telco (because our product is Telco) etc. SEE THE RESULT IN THE NEXT PAGE > IV. Create Personas
20
D. CREATE PERSONAS
IV. Create Personas
21
2. Usability Testing BACKGROUND Switch wants to revamp the checkout process and allow users to utilize the promo/voucher/discount easily. The business goal is to increase conversion and retention through the use of discounts/vouchers.
We want to include multiple ways where users can get this discount/reward so we will conduct Usability Testing to test the new prototypes for checkout and voucher, so we can get user feedback and validation.
ROLE Product Research,
Conduct a Usability Testing to validate the user experience and needs, start from build the research plan, create discussion guide as a guidance, observation list to get the raw data, create the report and present it as well.
IV. Usability Testing Process
22
THE PROCESS A. Create Research Plan
B. Discussion Guide
Objective
Tools Checklist
Why we do the UT and what is the goals
The tools/ things that needed for UT (pen paper,
Research Methodology In-depth Interview and Read Say Hear Analysis Participant Criteria Define the participant age, gender, character/ any criteria Key Metrics How we measure the success task Key Needs What we’re want to identify and how far the product needs Hypothesis
recording, phone etc) NDA Paper
Confidential Sign Off Introduction A few words for opening the conversations Fundamental Question
Basic qustions that will support the data Scenario Test Put what we are going to test, the objective of the scenario, steps and the question in running a test
What we expect and the estimate data that we want to collect so that we are not miss it
IV. Usability Testing Process
23
THE PROCESS C. Prepare the Prototype
E. Set the Observation List
Work Together with Design Team
Create a Table list
Help to prepare and walkthrough the scenario together
This file will covers all question, answer and all insight from our user, open to all relevant teams so every people can read and know what exactly our user say
Share the Plan Telling the team about what we are going to do and discuss about the question, any additional scenario or input before do the Usability Testing
D. Conduct the UT Participant List Choose and make an appointment with the participant
F. Make a Report After the data collected, we summarize and processed the data by giving an important point and a relevant suggestion. With a user friendly report, all the teams, other department including stakeholder can understand the result.
Do the UT Set the comfortable environtment either do it offline/ online, we can do a little rehearsal before it
IV. Usability Testing Process
24
SAMPLE RESULT Sample of success scenario, state the score (measurement) and give the description about all happens in this screen
If there’s a suggestion/ issue from our user, we put it right away
Sample of failed scenario, state the score (measurement) and give the description about all happens in this screen
Put all the bad/ good experience that our user feels in this scenario IV. Usability Testing Process
25
SAMPLE RESULT For the RSH analysis, we observe all the details about user expression, the tone when they perform the scenario and all the gesture happen on the field
And for the important points in this report, we summarize all the findings that we think its super relate with the task, state the priority issues, and give some recommendation
IV. Usability Testing Process
26
3. Fundamental Research BACKGROUND It’s very important for us to take a look into digital platforms, like apps and website, yes website very convenient to promote the product and the easiest one to acquire new user before they take a step to download the apps
So, by improving smartfren website in order to increase acquisition number, we do some research to support the development process.
ROLE Product Research,
Do a Fundamental Research to breakdown all the problems and issue happen in the current situation, analyse the market, the our user behavior on website, do competitive analysis, and small survey to support the qualitative data
IV. Fundamental Research
27
THE PROCESS Introduction
3. Market Analysis
Define the Objective, Goals, Challange and the methodology of research using in this project
Using Google Analytics, review the market, who is using the website, what type of person and the criteria.
Qualitative: Dekstop research, competitive research and interview
Quantitative: Google analytics analysis and funnel analysis
Analyse the web overview, the technical (bounce rate) and preview their intention and needs when visit smartfren web
2. Web Performance Analysis Take a look overall website performance from 3rd party online tools like GT Metrix, Google Page Speed Insight, Similar Web etc
IV. Fundamental Research
28
THE PROCESS 4. Web User Behavior
6. Short Interview towards website
Analyse the user behavior who visit the web, either they new or returning user, take a deep review on their journey and also the funnel
With the spesific criterias, we want to know their opinion about smartfren website, what are their habits and what their expectation for smartfren website
Question like Do you know the difference between web and apps What did you do first when hear about new digital product Are you aware about the changes/ update on the website What your intention when open a website What a telco website should have on their website?
5. Competitive Analysis Do benchmarking and competitor analysis to know the current digital situation, either in the same or different categories, take the excellence and Key Takeaways from each product’s website
Sample competitor: By.U, XL, Verizon, AT&T
Sample benchmark: Tokopedia, Ticket.com, Kopi Kenangan
IV. Fundamental Research
29
THE PROCESS 7. Finding and Suggestion
8. Propose Flow
Few findings from competitive research, we can take it as our insight and giving the suggestion based on problems, insight and the web overview
Recommend the best flow to describe it clearly to business and product team
Fix the Hygiene Factor
Page Load Speed : Consider about the content size (image, banner, icons), Bounce rate : Pay attention to the highest bounce rate, Is cause of the load page, user didn’t get what they want and direct source (we can change the URL if it come direct) Easier for all type of user
Because in this stage we must fulfill all user from different channel (counter/ apps/ web), make the information clear, simple flow, short steps and giving them an option to catter all type of user Acquisition and Services
Trust on the first attempt, give the complete information and how to enjoy it. Maintain user satisfaction by giving the credible customer support, promos update and supporting articles Mobile Friendly
97.4% Smartfren users open the website from mobile, so make sure it’s easy to navigate and faster page load
IV. Fundamental Research
30
Workshop Moreover, UX research accomodate some workshop like Design Sprint and Design Exercise. And this an example of one of them
Enjoy;)
Design Sprint INTRODUCTION Gather insights and make a decision what is the best experience for user from choose the product until they make a payment.
OBJECTIVE Increase the conversion by giving them the best experience for purchasing our product. We can also treat them by giving more rewards to make them return to using and make a purchase.
WHY DESIGN SPRINT Working together in a sprint, we can shortcut the endless-debate cycle and compress months of time into a single week.
ROLE: FACILITATOR Prepare the deck, explain why and how to run a design sprint, set up the room and equipment, control and moderate during the design sprint
V. Workshop
32
DEFINE THE CHALLENGE How Might We, In 2 years, Can We and the Maps
Participant will given a time to find out the clear issue and needs of the product inovation, and unify the opinion between business, other department and stakeholders
PRODUCE SOLUTION Lightning Demos, Crazy 8’s
Observe the other similar products, review and learn the excellence in each product, put the idea on paper and sketch the prototype
V. Workshop
33
VOTE ON SOLUTION Heat Map Vote, Solution Presentation, Final Votes
Share the idea to others, have a QnA session and do a straw poll by the partticipant and the decider, so in the end all participant agree with 1 or 2 big picture
THE STORYBOARD User Flow, Storyboarding
After the ideas has been determined, all the participant create a user flow, in max 6 flow then put together into the storyboard to complete all the journey
V. Workshop
34
Other Projects These are the other collection of my project done so far, please!
Revamping Sequis.co.id
Revamping BAF online
Create a website for G20 Conferences
Reskin website for emina
VI. Other Projects
36
Or you can visit the project details here:
Web/ Apps Project
VI. Other Projects
37
Thank You for enjoying my showcase,
Let’s connect!
0889 0899 0203
giselangelina22@gmail.com
@giselaangelina
linkedin.com/in/gisela-angelina
VII. Connect with me
38