PERSONAL PORTFOLIO (2018 - 2019)
Sylvie Stephanie UX Engineer
UX ENGINEER
X
2018-2019 Sylvie Stephanie UX Engineer
Hi! I’m Sylvie, a designer-developer hybrid who enjoys building things that live on the internet. I’m passionate about building thoughtful and impactful experiences. My mission is to help bring more beauty, creativity, and good ideas into the world through web and mobile design that connects to millions of users and leave a positive impact on society. I’m still learning every single day to ensure I can deliver the most effective solutions to the ever-changing user preferences and expectations. During my professional career, I have learned the importance of empathizing with the end-users and placing myself in their shoes in order to understand their behavior and cultivate their trust. I personally enjoy working on projects that require both strategies as well as visual design. I’m always hungry, ambitious, and love to provide the best experience for users.
+628979405116 | sylviestephanies@gmail.com
2
Being attracted to technology, I equipped myself with bachelor’s degree in Computer Science. Shortly after graduating, I joined Product Design BASIC & CONTACT INFO
team at Tokopedia where I get to work on variety
EXPERIENCE Feb 2019 -
Senior UX Engineer at Tokopedia
Present
• • • •
of interesting projects. I enjoy crafting user-centric, delightful, and engaging experiences. Location
Jakarta, Indonesia
Birth date
30/09/1995
Phone
+628979405116
sylviestephanies@gmail.com
linkedin.com/in/sylviestephanie
Github
github.com/sylviestephanies
Built and maintained component-based UI documentation (storybook) for fintech products Built and improved fintech web products with UI / UX and engineers Mentored and coached junior team member to ensure the best design implementation Conducted design sprint with engineers, business, and design team
Oct 2017 -
Front-end Designer at Tokopedia
Feb 2019
• • •
Joined financial technology (fintech) team on October 30th, 2017 Learned front-end coding using React.js and wireframing using Sketch app Built and managed fintech web products: Tokopedia ReksaDana, Tokopedia Emas, Tokopedia Saldo Prioritas, Tokopedia GiftCard, Tokopedia Modal Toko
•
Worked closely with UI / UX / Product Managers and provide technical perspective throughout the design process
• •
LANGUAGES Indonesian English
EXTRA
SKILLS
• • • • •
Web Development (HTML, CSS & JavaScript)
Collaborated with engineers to ensure clean, optimal, and scalable front-end code Researched best practice approaches to build seamless web experience that integrates well with backend APIs and works consistently across a wide range of browsers and platforms
SYLVIE STEPHANIE | PORTFOLIO
9
Resume
X
EDUCATION 2013 - 2017
UNIVERSITAS MULTIMEDIA NUSANTARA
Web Framework (React.js, Laravel & CodeIgniter)
Bachelor of Computer Science (Sarjana Komputer)
Wireframe (Sketch & Balsamiq)
CGPA: 3.84 out of 4.00
Prototyping (InVision) Multimedia (Adobe Photoshop, Adobe InDesign & Adobe Premiere Pro)
• •
Database (MySQL & Oracle) Version Control (Git)
3
X
HARD WORK + INSPIRATION
•
UX ENGINEER
00
4
With your vision, my
design and
tech savvy, plus a hefty amount of coffee, we can create a digital experiences that help make life
easier and more productive
X
00
Portfolio Content UI / UX DESIGN
06
Tokopedia ReksaDana
12
Tokopedia Gift Card
16
Celengan (Jenius Hackathon 2019)
08
Tokopedia Emas
14
Tokopedia Modal Toko
18
Goodreads App - UX Case Study
10
Tokopedia Saldo Prioritas
Page 09
SYLVIE STEPHANIE | PORTFOLIO
WEB DEVELOPMENT (React.js)
Page 10
Page 07
Page 14
5
X
WEB DEVELOPMENT (React.js)
01
Tokopedia ReksaDana UX ENGINEER
www.tokopedia.com/reksa-dana
Tokopedia ReksaDana was my first project at Tokopedia and also Tokopedia’s first investment product. It brings digital convenience to manage mutual fund investments. The minimum purchase of a mutual fund unit starts at a very low nominal, which is IDR 10.000. Users can do trading activities and monitor their investment online from dashboard easily. Funds from sales are received directly into the user’s account and can be easily transferred to the user’s bank account. The main purpose of Tokopedia ReksaDana is to provide intuitive product for beginner investor as well as informative product to experienced investor. UX DESIGNER
UI DESIGNER
Redho Yurizal
Andrew Ignatius Sugijanto
UX ENGINEER
Sylvie Stephanie
6
Dashboard - Desktop
X
CHALLENGES
First time hands-on React.js First time creating responsive web design Graph feature to track Net Asset Value (NAV) Digital signature feature on the registration form
KEY FEATURE
• Subscription Subscription feature helps users to reach their investment target by setting a nominal and schedule as needed. Funds will be routinely channeled to mutual fund balances. Users can also change settings and stop their subscription at any time.
SYLVIE STEPHANIE | PORTFOLIO
• • • •
• Dream Saver (Dana Impian) Dream saver is a an automatic savings that helps users reach their saving targets. Users can have the freedom to decide on their goals and the amount of money they want to save periodically. Users can also set the end date and the initial deposit for each of their goals. Landing Page & Dashboard - Mobile (from left to right)
7
X
02
Tokopedia Emas www.tokopedia.com/emas
UX ENGINEER
Tokopedia Emas is the second investment product from Tokopedia, partnering with Pegadaian. Unlike conventional gold investment system, users can buy, save, and sell gold at any time when the market price is profitable. The advantage of Tokopedia Emas is that users can buy and sell even the lowest amount of gold, a minimum of IDR 500. UX DESIGNER
UI DESIGNER
Lizia Meldiana
Andrew Ignatius Sugijanto
Ivan Bagus Pinuntun UX ENGINEER
Sylvie Stephanie
Dashboard - Desktop
8
X
CHALLENGES
•
Send Gold interaction feature
KEY FEATURE
• Send Gold Send Gold feature was one of the biggest challenges in Tokopedia that I’ve ever encountered. Users can send gold to other Tokopedia users by entering the desired amount, choosing the preferred design and writing a personal message. The recipient will be able to read the message with engaging interactions and receive the amount to their savings balance. •
SYLVIE STEPHANIE | PORTFOLIO
• Subscription Similar to Subscription feature on Tokopedia ReksaDana, users can buy gold automatically with specified time through various of payment methods.
Membership
There are three levels of membership available in Tokopedia Emas. The higher the level users have, the more benefits users get. Users can upgrade membership level by filling out online KYC form or searching for the nearest Pegadaian office to do offline KYC.
Dashboard, Membership Page, Send Gold Page - Mobile (from top to bottom) 9
X
03
Tokopedia Saldo Prioritas
www.tokopedia.com/saldo-prioritas/dashboard/about
Tokopedia Saldo Prioritas is a whitelisted product targeted to loyal
UX ENGINEER
Tokopedia merchants. Saldo Prioritas allows Tokopedia merchants to withdraw part of the funds from their sales transactions before the buyer confirms receipt of the item. After merchants enter delivery receipt, they can immediately withdraw a certain amount of money according to the predetermined percentage of their sales, so that it can facilitate merchants cash flow. When the buyer confirms receipt, merchants will receive the remainder of their sales that has not been withdrawn at the beginning. UX DESIGNER
UI DESIGNER
Lizia Meldiana
Andrew Ignatius Sugijanto
UX ENGINEER
Sylvie Stephanie
10
Dashboard - Mobile
X
Dashboard - Desktop
•
Many corner cases; have to be extra detail to check all the cases from disbursement to recovery.
KEY FEATURE
• Withdrawal Percentage Users can set withdrawal percentage in advanced with
SYLVIE STEPHANIE | PORTFOLIO
CHALLENGES
maximum withdrawal 80% from total sales.
11
X
04 UX ENGINEER
Tokopedia Gift Card www.tokopedia.com/gift-card
Tokopedia GiftCard is a digital product for
Users can choose the design options provided
UX DESIGNER
UI DESIGNER
sending money in the form of OVO Points. It
or upload their own designs and edit it as
Lizia Meldiana
Andrew Ignatius Sugijanto
can be easily redeemed into OVO Points where
desired. They can enter the desired amount
1 OVO Points equals to 1 Rupiah. Recipients
and write a personal message. The recepient
can use it to buy various products from
will receive the gift card via e-mail or SMS.
Tokopedia marketplace or OVO merchant.
12
UX ENGINEER
Sylvie Stephanie
X
Landing Page - Desktop
CHALLENGES
• •
Upload and Edit feature Less than two weeks development for first phase, worked in parallel with engineers
SYLVIE STEPHANIE | PORTFOLIO
Send Gift Card - Desktop
KEY FEATURE
• Digital Gift Card Sent directly to the recipient’s email or phone number.
• Physical Gift Card Print gift card (PDF version) & give it directly to the recipient.
• Upload and Edit Users can upload their own photos and edit it with crop and rotate feature to get the best card design.
13
UX ENGINEER
X
05 Tokopedia Modal Toko
www.tokopedia.com/fm/modal-toko/
Modal Toko is a capital loan facility provided to Tokopedia merchants to develop their business. After registering and
UX DESIGNER
activating, merchant can immediately withdraw loans up
Redho Yurizal
to IDR 300 million and can use these loan funds to increase
UI DESIGNER
stock and variants of goods.
Andrew Ignatius Sugijanto UX ENGINEER
Mathias Damar Agung Prasetyo Sylvie Stephanie
14
X
CHALLENGES
Entry point / Discovery Repayment
KEY FEATURE
• Instant Withdrawal After merchants have successfully registered, they can instantly withdraw loan funds and transfer it to their bank accounts
• Autodebit Repayment
SYLVIE STEPHANIE | PORTFOLIO
• •
Loan repayment can be made automatically by deducting funds from merchant sales.
15
X
UI / UX Design
Celengan (Jenius Hackathon 2019) PROBLEM
UX ENGINEER
Based on 2017, GoBankingRates survey found that most “young millennials” (18-24 years old) only have less than $1000 in their savings accounts. Research shows that young millenials don’t have adequate knowledge in managing personal finance. SOLUTION
We present Celengan, a mobile app that helps educate the importance of saving to children (age less than 17). Celengan’s main idea is to cooperate with schools canteen because we believe that’s where children make their first payments. Instead poking the fintech giants, the payment is integrated with existing e-wallet payment services such as OVO, GoPay, and Dana.
TEAM MEMBER
MY ROLE
Devin Ryan Riota, Nelson Wijaya,
UX Researcher, UI/UX Designer
Sunderi Pranata, Sylvie Stephanie
16
06
X
SYLVIE STEPHANIE | PORTFOLIO
Celengan has two types of accounts:
• Parent account
• Child account
Parent can open child accounts, allocate pocket money,
Children can learn simple investments and save their money
create and manage task to children, set investment plans for
on investment plans made by their parents. They will receive
their children as well as review their task and give rewards.
pocket money directly from their parents balance every specified period. They can also get tasks and get rewards from tasks given by their parents. 17
07 X
Goodreads - UX Case Study
UX ENGINEER
https://medium.muz.li/goodreads-app-ux-case-study-2e63214fc005
My first UX case study is about Goodreads, the most popular book review and recommendations platform for book readers. The full article was published on Muzli Medium publication. This case study covers research on the Goodreads app (Android and iOS) and explore ways to improve the overall experience. The design process consists of four general steps: research, define, design, and validate.
18
01 RESEARCH
Conducted user research by distributing survey to Goodreads users which vary from daily active users to infrequent users. The aim of this survey is to: • Find out their reading habits • Identify their pain points and needs • Define personas • Determine a set of actionable solutions to improve their experience
02 DEFINE
Pain Points • Incomplete mobile app • Search engine is very limited • Friends updates on being friends with other people Needs • • •
Personalized book recommendations Better browsing feature In control of their content
Main Focus • Improving search engine design and make it simpler for users to navigate through the app • Enhancing book recommendations feature that is personalized based on user preferences and history • A more informative book details page where users can conveniently search for other editions.
Personas developed from the survey (sample of 35 users)
03 DESIGN
Browse the full experience using the prototype: https://invis.io/VGSW1IKP93A
04 VALIDATE
Conducted user testing using Maze.design
• Search Book. 90% of users got direct success finding the book by the given title. It can be concluded that there are no difficulties with the search book feature.
• Browse by Genre. 90% of users were able to find browse by genre page with 80% got direct success and 10% got indirect success.
• Search Group. 60% got direct success. One user commented that he struggled a bit finding the group because he can’t click the group icon on search page. The testing prototype on the first design didn’t cover all icons cases to be clickable. Thus, on the second iteration, group icon on search page is made to be clickable.
• Personal Shelf. 60% got direct success. The assumption for users who failed the mission is because they misunderstood the task description.
LEARNINGS
This project gave me an understanding of how important to create personalized content for each different user and helped me improve myself in learning the broad spectrum of UX design from the initial research phase to user testing and design iteration.
tel. +628979405116 sylviestephanies@gmail.com
THANK YOU
let’s work together.