UI/UX DESIGN
PORTFOLIO Theresia Sherly
Hello, you can call me Theresia.
I am a fresh graduate from UI UX bootcamp with dibimbing.id
In this portfolio is my representation of all that I’ve learned and accomplished as a bootcamp student.
I also have experience in leading and supervising projects that include internal and external communication. My skill sets includes translating a brand’s identity and presenting it in design's visuals.
I am eager to take every opportunities to grow my skills in UI/UX Design and always have a hope to get experience from anyone, anywhere, and at any time.
Work Experiences PT. ASTA ASRI ATELIER
Creative Designer
Education Bootcamp Design
UI/ UX Design
Dibimbing.id
November 2021 - May 2022
• Learning the basics of UI UX from how to understand design thinking to prototyping in Figma and redesigning to improve applications
DAEBAK STUDIO
Freelance Creative Designer PT. LELCO TRINDO GRAHA NUSANTARA
Project Coordinator/ Designer
Skills Design Thinking
Bachelor of Architecture
Architectural Engineering Major
Tarumanagara University - Jakarta, Indonesia
2013 – 2017 Cumulative GPA: 3.27/4.00
Design
Research
Prototyping
User-Centered Mindset
Problem Solving
Collaboration Communication
Copywriting Teamwork
Design Project #1 End to End Purchasing Flow Improvement on Astro Mobile App
Time Frame:
8 weeks
Roles:
UX Researcher, UX Designer,
UI Designer
Overview
What is Astro
Problems
Goals
One of start-up e-grocery, which offers
Users need some
To improve the best shopping
daily necessities products and free
additional features
experience needed by users when
delivery services to their destination.
that help in making
shopping for daily necessities online.
With this quick commerce service,
purchases as well as
Astro gets a positive response and
taking orders.
feedback from most of the customers.
UI/UX Case Study App - Astro Mobile App
Design Thinking
Emphatize
Define
Ideate
Prototype
Test
Explore to understand the user experience, user needs regarding the use of the app.
Analyze and observe to define the core problem to solve.
Gather, brainstorm ideas and challenge the assumptions to get innovative solutions.
Create a scaled-down version of the product from exploring solutions to user problems
Test the product using the best solution.
UI/UX Case Study App - Astro Mobile App
Research and Design Report (Medium) Click here
Research EMPHATIZE and DEFINE
scan me
✱
Plan and Prep
✱
Data Collection
✱
Findings and Insights
Plan and Prepare
Methods Targeted Participants ✱ Astro app users
✱ Who have used Astro at least once
✱ Using other shopping applications
(as a comparison)
✱ Quantitative Method; conducts a survey with closed-ended questions and
✱ Qualitative method, 1 on 1 interview with open ended questions
✱ Desk Research
Business Goals ✱ Increase the number of transactions
✱ Increase the level of user satisfaction
✱ Create new opportunities with feature improvements in the app
UI/UX Case Study App - Astro Mobile App
Timeline Week 1 Research Plan Research Question Data Collection Data Synthesizing Reporting
UI/UX Case Study App - Astro Mobile App
Week 2
Week 3
14 - 16 Mar
16 - 18 Mar
21 - 25 Mar
28 - 30 Mar
31 Mar -
1 Apr
Data Collection INTERVIEW GUIDELINES
Key Information
Behavior
Areas ✱ User profile
Impressions ✱ How do you meet your daily
✱ Users’ motivation to make
needs during this pandemic
online purchases in app
✱ What factors influence you to
✱ Users’ pains and needs in
shop for daily necessities onlin
buying products in online
✱ How do you choose a product?
apps
Expectations and
✱ What made you interested in trying this app ✱ How was your shopping experience ✱ Are there any problems when using the app ✱ What are your reasons for using this app again?
UI/UX Case Study App - Astro Mobile App
Findings and Insights AFFINITY DIAGRAM Efficiency and Money Join the hype
Reason of using apps
memudahkan tidak perlu keluar rumah, banyak promo, gratis ongkir Time
Pains
tidak ada estimasi kapan dibalas CS
Shipping
Needs
UI/UX Case Study App - Astro Mobile App
delivery later (pengiriman dapat di tentukan waktunya)
lihat influencer pakai, lihat di konten ig lalu download apk
Feature lihat fitur screenshot di apps store
Information tidak ada notifikasi driver sudah mau sampai (saat meeting cukup mengganggu) Products Ada jaminan untuk produk unik (seperti frozen, pecah belah)
Communication chat customer service memiliki estimasi berapa lama dibalas
Notification Notifikasi detail membantu persiapan penerimaan
Findings and Insights USER PERSONA
Belinda, 26th, Jakarta
Maya, 30th, Tangerang
“Tiada hari tanpa scrolling promo aplikasi online”
“Serba online mempermudah memenuhi kebutuhan”
Extroverts
Sale Hunter
Tech Savvy
Active
Efficiency
Very busy
Belinda is an employee who works flexibly (WFO also
Maya is a housewife who who runs her own business.
WFH). While working at home, Belinda also goes
Maya splits her time not just to work from home, but
shopping for daily needs with her family. Meanwhile,
also to decide what to buy for the family.
when at the office, shopping for snacks with friends.
Her Pain Points
Her Needs
Her Brands
Her Pain Points
Her Needs
Too much need
Simpler U
Limited tim
Entire requirements in a
Easily bore
Promotion are easily visibl
Technology illiterat
single applicatio
Delivery time in the middle
High accuracy product
Products are difficult to
Clear and simpler U
of working hours
delivery time
search using keyword
Can ask customer service
Product information is
fast
unclear
UI/UX Case Study App - Astro Mobile App
Her Brands
Findings and Insights
Thinking
Ingin Membeli
Memesan
Pesanan Selesai
Wah produk A lagi mura Kok produk B tidak ketem Ini pasti ada kan produknya
Yes, promo masih berlak Beli produk (frozen/ pecah belah) aman ga y Benar kan ya pesanannya
Asik pesanan sudah mau sampa Eh produk A tidak ad Bagaimana cara komplainnya
Catet harg Ingetin mau belanja apa saja
Masukkin prom Memperhatikan alamat pengirima Mengecek kembali pesanan
Menerima pesana Mengecek pesana Mencari cara
mengontak CS
Senang produk yang dibutuhkan ada potongan harg Produk tidak ketem Belum menentukan apa yang mau dibeli
Teliti mengecek pesana Senang promo berlak Senang produk ada
Senang pesanan lengka Bingung pesanan tidak lengka Mau komplain/ chat CS
Harus belanja dengan
aku Notifikasi tidak bisa dibaca ulang
Belum tau mau beli ap Cari produk dari keyword tidak langsung ketem Stok produk tidak ada
Produk frozen rusa Pesanan tidak tahu sampai di jam berapa
Kontak CS lam Tidak tahu pesanan ada diman CS berpindah aplikasi
Belanja sebagai tam Bagian notifikasi tersimpan
Section produk bran Informasi produk lengkap
Ada promo apa saj Tadi ada notif promo belanja apa y Males keluar de Aduh lupa belanja
Lihat hp ada promo ap
Buka aplikas Lihat wishlist belanja
Feeling
Touchpoint
Doing
CUSTOMER JOURNEY MAP
Memilih produk
UI/UX Case Study App - Astro Mobile App
Opportunity
Pain Points
Iseng scrollin Mau belanja kebutuhan
Delivery later di jam yang
dipili Garansi produk
CS di dalam aplikas Tracking driver via map Notifikasi keberadaan pesanan
HIGH
Findings and Insights
CS di dalam apk,
Notifikasi
ada nomor
keberadaan
antrian
pesanan
Prioritization Matrix
Garansi produk retso sherly
Delivery later di jam yang dipilih
Tracking driver retso sherly via maps retso sherly
retso sherly
retso sherly
IMPACT
For identify which opportunities from the Customer Journey Map have the greatest impact on application implementation.
Ada informasi produk lengkap
Bagian notifikasi Belanja sebagai
brand
tamu
retso sherly
retso sherly
Feature already exist
Inefficient features
UI/UX Case Study App - Astro Mobile App
tersimpan
retso sherly
retso sherly
LOW
Section produk
LOW
EFFORT
HIGH
Findings and Insights
Insight #1
Insight #2
The problems is..
Detailed Product Purchase
users do not have complete information about products and orders
Tracking Order
users don't know where the order and driver is and are in a hurry when they have to accept orders
Customer Service
users receive the product in an incomplete/damaged state and the complaint queue has no certainty of time
and the strategy is..
provide more complete information and provide open options for selected products
there needs be information on the positions of drivers that can be tracked and the amount of time to take orders
improved customer service faster and easier
UI/UX Case Study App - Astro Mobile App
Insight #3
Solution IDEATE
✱ Solution Ideas
✱ User Flow
✱ Information Architecture
Solution Ideas
Detailed Product Purchase
Tracking Order
Customer Service
Orders are given the option to be delivered at certain hours, there is a guarantee for frozen / broken products.
Added live tracking feature and step-by-step notification of order presence
The customer service feature is in the same application as there is a queue ticket
UI/UX Case Study App - Astro Mobile App
User Flow Looking for Products
Start
No
Open app
No
Pay for th
Choosing the products Is the order correct?
Open Categories card
Does the product meet your needs? Yes
Product added to cart
UI/UX Case Study App - Astro Mobile App
Yes
Order processed
Order shipped
Is the order received correct?
Order accepted
Order checking No
Yes
add promo Open the car
Complain to customer service
End
Information Architecture Open App
Home Page
Transaksi Page
Keranjang Page
Astro Care Page
Alamat kirim
Riwayat Transaksi
Alamat kirim
Pesan
Pesan Masuk Page
Status Pesanan 1
Produk 1
Balasan Pesan Tulis Pesan
Pesan Promosi 1
Live tracking
Produk 2
Pesan Promosi dst
Informasi Pesanan
Subtotal
Kategori Produk Card Navigasi Bawah
Navigasi Bawah
Jenis Pembayaran ... etc Bayar
UI/UX Case Study App - Astro Mobile App
Prototype PROTOTYPE
✱ Wireframes ✱ Design System
✱ Mockup
✱ Prototype
Wireframes
UI/UX Case Study App - Astro Mobile App
Design System FUNDAMENTALS Typography
Montserrat Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq
Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 Category
Size
Type Weight
Title / Hero 32 Bold
Colors
Iconography
Primary Colors
Icon + Text
#236EE5
#535965
#FFFFFF
Secondary Colors #060C48
Line Height
100% 100%
Icon Only
Transaksi
Astro Care
Akun
Colored Icon
#DD342F
Colors Roles Primary Action, Primary Button
Title / Large
18
Semi Bold
Title / Midi
14
Semi Bold
100%
Dashline, Outer line
Title / Midi / Bold
12
Bold
100%
Title / Midi / Medium
12
Medium
100%
Title, Body Copy, Text
Body / Small
10
Medium
100%
Caption / Small
8
Reguler
100%
Brand Identity Error, Button Background Inactive Text. Unselect Choice Button, Dashline
UI/UX Case Study App - Astro Mobile App
Beranda
Spacing 4 . tiny 8 . small 16 . base 24 . large
Layout Grid
Design System UI KIT 1
Beranda
Transaksi
Akun
Astro Care
BCA Virtual Account OVO E-Wallet GoPay E-Wallet ShopeePay E-Wallet
Pesanan Diproses 18 Mar 2022
50% Rp120.200
Pesanan sudah diterima dan selesai 7%
Bayar
7%
Hemat Rp82.600
Bayar
18 Mar 2022
Rp60.100
Rp4.400
Pesanan dibatalkan
Batiste Original Dry
Teh Botol Sosro Jasmine Tea Botol
18 Mar 2022
Astro 10 menit yang lalu Drivermu sudah dekat! Pesananmu hampir tiba, jangan lupa pakai masker saat menerima pesanan ya
Astro 3 menit yang lalu Pesananmu sudah diterima Terima kasih, jangan lupa segera periksa pesanan kamu ya.
UI/UX Case Study App - Astro Mobile App
Stok 3
1
Buka 24 jam non stop
Kamu punya 1 promo menarik
Astro 23 menit yang lalu Drivermu sudah dalam perjalanan Putra Septian sedang dalam perjalanan mengantarkan
pesanan kamu, ditunggu ya!
Stok 2
Batiste Original Dry Shampoo 200ml Kebersihan Diri
50% Rp120.200
Rp60.100
ABC Sirup Squash Delight Jeruk 460ml Minuman 7% Rp13.400 Rp12.500 Garansi produk
1
Belanja cepat, gratis ongkir. Cek selengkapnya di sini
8 hari yang lalu
Yang spesial hanya di Astro🧑
1
Produk baru spesial dari Astro, ada kopi, biskuit cobain sekarang. Cek selengkapnya di sini
6 hari yang lalu
2
Mockup
UI/UX Case Study App - Astro Mobile App
Mockup 1 Understand the product Adding information to increase users' trust in the detail of the product to be purchased.
Additional information in the form of an explanation of product stock, a guarantee for glassware or frozen products, and being able to review the promotions offered. UI/UX Case Study App - Astro Mobile App
Open Astro App - you can see products divided into easy-to-search categories
Click a category to search for a product - click the plus button to buy
Product added to the cart and user can specify the delivery of the product
2:29
2:29
2:29
Click the message button to view promotional offers 2:29
Mockup 2 Time is Money By adding the live tracking driver feature, it provides time value to users who are waiting for orders to arrive. Not only users can monitor the whereabouts of drivers, this feature also helps users prepare for the time to receive orders.
UI/UX Case Study App - Astro Mobile App
Open order status and monitor orders via live tracking 2:29
Automatic notifications to help take orders
Slide screen to see can communicate with driver
Mockup 3 Users need to ask Sometimes users face difficulties that can be confusing in the purchase process.
Therefore, customer service assistance is needed to help direct the user on what to do next with the queue number listed to find out how long to wait.
UI/UX Case Study App - Astro Mobile App
Open astro care - to ask about orders or have something to ask 2:29
Floating and clickable customer service button to return
Prototype
Prototype link click here
scan me
UI/UX Case Study App - Astro Mobile App
Usability Testing
UT Report: Click here scan me
TESTING
✱ Plan and Prep
✱ Test Results
✱ Insights
✱ Lesson learned
Plan and Prepare
Methodology Quantitative Usability Testing
Tester Specification ✱ Active Astro users
✱ 18-35 years old
UI/UX Case Study App - Astro Mobile App
to test additional features, collect qualitative and quantitative data and see the level of satisfaction with the design
Tools Figma
Objective
Maze
Test Results Task #1:
Search for products in the card category Start shopping and find the requested product from the existing category card
Scenario During the pandemic, an apps appears for more online shopping and you try to find some products from the existing categories.
100%
100%
Succes Rate
Succes Rate
All participants can complete the tas A few participants pressed the button in the right plac A few participants can understand the tas Some participants find the redesign very helpful
UI/UX Case Study App - Astro Mobile App
Check the time order
Test Results Task #2:
Check cart to order Check your cart and choose delivery time and add product warranty Scenario When you find the product you want to buy, you go back to the cart to check the order before paying.
100%
90%
Succes Rate
Satisfaction Rate
Issue: User don’t want many changes, font too small All participants can complete the tas Most participants pressed the button in the right plac All participants can understand the tas Most participants find the redesign very helpful UI/UX Case Study App - Astro Mobile App
Check the guarantee
Back to Home
Test Results
Locate the driver
Task #3:
Tracking the order Make payment and look for the information you noticed while your order is in process Scenario The order has been processed.
100%
70%
Succes Rate
Satisfaction Rate
It's time for you to pay attention to where your order is.
Issue: users feel too much information on the screen at first,
add back button at the bottom of the order page, font too small All participants can complete the tas Most participants can understand the tas Most participants find the redesign very helpfu Most participants want the feature in the real design UI/UX Case Study App - Astro Mobile App
Test Results
Task #4:
How to ask or complain There is an order that is missing.Complain about the lack of order to Astro Care.
Scenario Your order is missing. You are upset and want to make a complaint to
100%
100%
Succes Rate
Succes Rate
the astro team and follow the steps to chat with them
Issue: Participants aren't familiar with Astro Care's name
Most participants can complete the tas Most participants pressed the button in the right plac All participants can understand the tas Most participants find the redesign very helpfu Most participants want the feature in the real design UI/UX Case Study App - Astro Mobile App
Most users find CS
Users already knew
in this button
how to start chatting
Lesson Learned
Next Action
✱ Participants' opinions are very important in the design research and development process
✱ Execute an iterative UX and UI design approach based on user feedback.
✱ Participants do not necessarily understand the designer's intentions so they need the right direction
✱ Continuing design research and development
✱ Making guidelines for interviews, wireframes and conducting back-tests to participants is very helpful for application development
UI/UX Case Study App - Astro Mobile App
Thank You Reach me on theresia.sherlyokv@gmail.com +62 878 8532 9177 linkedin.com/in/retsosherly/