Table of Contents | Page 1
of Contents Welcome! Enjoy FoodMagic Chapter One: University Project UX Design Groceries and Kitchen Life 1 Speak Up Chapter Two: User Experience (UX) Design Education Competition UX Design 2 4 Munro Shoe Chapter Four: User Interface (UI) Design E-Commerce Shoe Application 5 Pesawaran Adventure Chapter Five: Furniture Branding with application Game Experience User Experience 3 Travel Booking App Chapter Three: Redesign Application UX Pegipegi
Table
Portfolio
Statement
No two projects are the same, I design not to be trendy. Instead, I design what works best for the project.
Analyzing each problem to tailor a plan that fits different project’s needs, budgets and timeline, while also keep in mind the knowledge and skills I have.
My design approach will have:
1. Research
2. Design
3. Prototype
4. Refine
The stages help me ensure the necessities being made will maximize the outcome.
I love to be brave especially working in packaging, and typography with bright colours, where I found inspirations from a lettering artist, Nicolo Giacomin, his thinking, design, discipline and clarity established a set of foundations of a design work that I found astounding. I love Malika Favre, Simon Pan, Don Norman and Ignasi Monreal. There is nothing better than to see an amazing typography and colours in the right platform, it can change your whole mood. I also have a slight interest of User Experience Design.
My Approach in Design
My name is Ratu Hati (Ara) Wibawa
Passionate
Process
1
An
Emphatic ️
Risk-taker
Serpong 2020
a Product (UX) Designer
there!
Based Person President of Art Guild Binus
I’m
Hi
Know Me Well
2 3 4
esearch
R
important
brand, business, and a
Design Developing concepts and exploring design options. Prototype
Solving problems with experiments, through physical and viability testing
Website: Arawibawatech.com
Instagram: Personal and
UX Design
LinkedIn: Ratu Hati Wibawa
Behance: Arawibawa Refine
Present the design solution and execute production. Awards and
Achieve ments Contacts Finalist Student Design Charrate User Experience Design 2022 Best Student Art and Design Binus Serpong 2018 Portfolio Statement | Page 2
step for me to understand a
client.
FoodMagic
1. Background
What s the problem?
2.5 billion tonnes of household food is wasted every year across the world.
That’s 40% of all food produced for human consumption, and means the average global household wastes 1.5 tonnes of food each year. According to a study by the World Wildlife Fund and Tesco.
Without change, experts predict that household food waste may grow to as much as 70% of all food by the year 2050.
2
What is the project about?
FoodMagic is a food pantry checker to help users keep track and manage their groceries. The purpose of this project is to help users reduce household food waste from their expiration date.
reported reason for personal food waste was that it was expired.
2023 | FoodMagic | Page 3
01 Competition: Win As A Finalist Role: UX Designer | Duration: 3 Months
. Research
85% of students and family got their food expired ‘cuz
they don’t have time to prepare complex meals
Competitor Analysis
This analytic table confirmed that there is space for FoodMagic to improve their feature.
Only one app provided rewards and it did not have the other key features such as meal planning and digital pantry. Receipt scanner was another aspect that was not included in many of the app’s approaches.
they usually forgot they
have the ingredients,
Students and family said
they order takeaways instead
Students and family said
they don’t know what
to do with their random ingredients
Information Achtitecture
Key insights
2023 | FoodMagic | Page 4 3. Analyze & Ideation
User Persona
Priority Matrix - Features
User Journey
This allows me to priorities which feature is needed,
I invited 2 more UX designers to brainstorm together.
The ones that are marked are the features that is shown best align with FoodMagic’s goal of reducing food waste.
2023 | FoodMagic | Page 5
Secondary Research
How might we approach this?
There are steps that efficient people do including and after grocery shopping:
Grocery
shopping Storing Focus!
Cooking Consume
We decided to focus on storing and cooking as the focus on our approach in solving household food waste.
We found out that each steps has the biggest potential that can be aligned for FoodMagic.
Domestic Food Waste Insight Report By Shift
2023 | FoodMagic | Page 6
Mid Fidelity High Fidelity 2023 | FoodMagic | Page 7 e ign
Personalisation Meal Plan Quiz 1
Easing the experience through a meal quiz in fun friendly style. The quiz includes allergies, meal size and disliked food.
By applying the interaction data from the quiz, the recommendation tailor will recommend the best recipe for user.
2
Product Recognition Scanner
Barcode Scanner Receipt Scanner
Barcode scanner is when users have countable products. While receipt scanner is used when there are many that users bought.
Users can scan the barcode or receipt of user’s grocery shop to get notification of their soon-to-expired food in the app.
2023 | FoodMagic | Page 8
Recipe Generator
Allows user to input the ingredients they have at home into a complete meal recipe. We felt that this gives an idea to use their ingredients instead wasting them.
In-App Tutorials
No hassle experience to understand the new application for users. This helps easing through the use of application.
3
4 2023 | FoodMagic | Page 9
Usability Testing (UT) Te ting & Iterate
User testers
I conducted a user testing with five students and one housewife.
Testing scenario
“You started the app when you just come back from grocery shopping and want to track your expiry date food when you’re in a tight schedule.”
Purpose
To test the usability of each features and gain insights about how user feels when they navigate the app.
Success Parameters
- When users add food to their inventory
-When users generate recipe based on their 3 ingredients
Generator Findings from UT Iterative Development 1 2023 | FoodMagic | Page 10
Recipe
Tutorial
Plan Quiz
from UT Iterative Development
Meal
Findings
Page
from UT
Development 2 2023 | FoodMagic | Page 11
Findings
Iterative
Scanner Page
from T Iterative Development Barcode Scanner Receipt Scanner 2023 | FoodMagic | Page 12
Findings
Challenges
The quality of finding the right target took a toll of time. I surveyed students and families to test the convenience and suitability of my app. But, this meant that I was able to communicate and research the right target market. The answer from them is a satisfactory.
Summary
Lesson Learned
User testing taught me to elevate my prototype with real users and enables me to pin points the things that need to be improved. Through this process, I can really explore and analyse the user’s behaviour when interacting with Foodmagic.
What Succeeded
Making Foodmagic provided me with the chance to test my assumptions for this project and a reminder that we are designing for users and not for us.
2023 | FoodMagic | Page 13
Figma Prototype of FoodMagic
Speak Up
Competition: Win As A Finalist
Encourage Efficient in for Students Participation and
Communication Online Meetings
1. Research
How Might We?
How do we make students feel encourage to participate in online learning?
Defining The Problem
Students in the US come to a survey with 62% feel discourage to participate in online class. After consideration, we put together 3 most useful insights to make the design solution.
What is the project about?
‘Speak Up’ serves as a digital assistant for students to feel encourage to participate and communicate in online learning meetings by planning an agenda, communicate in chat, and technical problem alert.
The purpose of this app creates an inclusive environment, especially for introverted students, to learn effectively via online meeting.
S
62% Students feel discouraged to participate in online class
Solution: Poke Solution: Write Solution: Prepare
2022 | UI UX Design | Page 14
ur vey Outcome:
2. Key Insights From Sur vey
02
Role: UX Designer | Duration: 3 Weeks
Team: Gulji Chung as UX designer
3. Ideation & User Research
This task helps outline our plan to approach the project. Since it’s a team, we found an agreement to focus on workplace inclusivity, especially to students who have social anxiety.
B. Competitor Analysis
We identify an opportunity to make this as meeting communication assistant that people can add across their meeting apps like zoom, Gmeet, etc.
C. Card Sorting for Users
It gave me an insight into the kinds of features they would like to see from this type of app. It was interesting to see how each participant differed from my version of this task
I made a journey map to understand the scenario of user and their feelings when The most unsatisfied experience happened “during class” which is the event where students preseting and commuicate verbally.
Target Market
After careful research, these are the user’s demographic and psychographic information:
Gets emotionally drained after spending a lot of time with others
2. Enjoys calm, minimally stimulating
environments
3. Age between 18-40 years old, and unisex
2022 | UI UX Design | Page 15
A.
Project Proposal D. Journey Map
Information Architecture
Solution Concept
Our users need to manage & keep track of the content easily. Users particulary like solution #3 because they often get confuse with the agenda of the class an this can keep track of their class while also preparing what to do in class. While Solution 2 is enhance version of video meeting app like Zoom, which they deemed it necessary, however a bit different since there will be a chat pop up shown in solution 2. This is to encourage participation in online meeting without bothering to unmute. After gaining insights and putting their feedbacks into consideration, we decided to adopt and bring these solutions into the final product.
2022 | UI UX Design | Page 16
Students can use the visual chat button to visually display their opinions on the live video. This action aims to encourage students in wanting to participate without bothering to unmute themselves.
4. Design Outcome Finalist
This feature provides a visual agenda for students by showing timer of each scheduled events. This aims to encourage students to participate and be productive by knowing what to prepare during the class.
This feature helps with poking the speaker about the occuring technical issue. Students have the ability to notify the teacher without bothering to unmute, this is to improve online study productivity.
Presentation Slide
2022 | UI UX Design | Page 17
Write Prepare Poke
Website Speak
Up
Pegipegi
Role: UX Designer | Duration: 2 Weeks College Final Project
Challenge
How to elevate the application’s design & experience in booking travels to international users?
Defining The Problem
To answer the question, I conducted a 1 hour interview with 2 interviewees who regularly book their own travel to understand their behaviour.
Interview Pegipegi’s Users
What is the project about?
Pegipegi is a travel booking company based in Indonesia. Their digital product is an application for users to book services to travel like flights, trains, buses and accomodations.
The challenge of the project is to experiment with the idea of capitalising on the potential of a local brand that has the potential to go global, the brand I choose is Pegipegi.
2. Define Problem
Approach The Problem
Pegipegi has 4 page in their application, which are home, booking, inbox and profile page. I decided to focus on home page of Pegipegi as the focus for our approach in solving the problem above. After careful consideration, I choose this because I found out that this page has big potential that can be aligned to Pegipegi’s feature.
02
2022 | Pegipegi | Page 18
1. Research
hosen To Focus!
C
4. Ideation and Exploration
5. User Interface Kit
User Persona
I continued on by creating and defining a user persona based on the target audience criteria
2022 | Pegipegi | Page 19
Solution 1
Hotel Page
Find your accomodation
through an easy and enjoyable
experience
Most of the users had a hard time discovering where is the content of the app, here I made a better layout design of the hotel app to make users easy to navigate and search for their desired accomodation.
Solution 2
Back to the roots:
Pegipegi as The
Travel Booking
To have a cleaner, simpler look, I improved the four icons with one same color. Also improved the layout of the home page. This is to make users enjoy the process of searching services by having structured layout.
I added the wishlist feature at the top right. This is to easy the process to save their list to the app.
I enlarge the title font so users can get a clear and enjoyable experience when booking. This is to improve the attractiveness of the application too.
I improved the order of the content, because the date and rooms are important based on the insights I got from interview.
This is a new feature called a search box. This is to make users easier to search their desired services.
I improved the icons by having the same color. This is to help users understand that Pegipegi has only 4 services that they offer the best.
This is designed to have pictures and description of the promo content. It is because to make users informed the meaning of the promo.
Version High Fidelity
Previous
Solution 3 Search Box
That is actually helpful and make searching experience faster & easier!
Having a search box help users to search their desired booking, especially when users are in a hurry. Hence, I created recent
New Feature
In the search box, there will be recent search for users to be easier to choose their option by their past research
‘Search by category’ is added to improve searching experience through the option of 4 services
When user is about to type, there will show a recent search only I the page.
This is to help users choose their search the easier way. Also, this approach is to make users feel personalised with the app.
Usability Testing
Hotel Page
Users know which button to tap and was able to book and pay.
Some of the participants didn’t realize they can save their recent search in the wishlist.
Objectives
Test the main features, see the usability of each feature, gain insights about how user feels when they navigate through the app.
Testing Scenarios
You want to book a hotel in Jakarta, Indonesia with your partner. There is also a promo that you want to add. Please explore the app.
User Testing Participants
People who regularly books hotel for themselves
How to know it’s success
When users successfully search for hotel accomodation using search box in the home page
When users successfully search for hotel accomodation using hotel page.
Search Page
What Succeed?
This is my first user interface (UI) user experience (UX) design case where I conduct user testing and user research. Overall it was a nice fun project! The research was a bit challenging, considering the different and new research tactics that I learned from online readings and that my graphic design study years don't usually do, nevertheless, it was a fun experience that I got to interact and put my position to understand the users!
Home Page
Users was able to know which button to tap and was able to obtain search recommendation
Some of users feel like there
home screen rather than white background.
Website Site
Munro Shoe
Role: UX Designer | Duration: 2 Weeks
E-commerce for women shoe
Challenge
The challenge of this project is to satisfy Munro’s user by applyig filters, reccommendarion
Defining The Problem
I conducted survey to users that use Munro application, their problem revolves around searching for the right size of shoe.
2. User Persona
What is the project about ?
Mun o S oe is an ame ican b and t at focus on women s oewea . I will be edesigning t ei e-comme ce application to make it easie fo use to buy and filte t e c oice of t ei p oduct t at t ey want to buy.
T e goal of t is p oject is to en ance solutio concept & imp ove use expe ience of t e app to ease use s in s opping t e c osen size by aving filte , ecommendations and filte s.
Problem Statemen
Not being able to filte available s ows by widt Getting fat fewe options w en s e applied widt filte
No ot e ecommended s ows w en s e’s looking at a pai s e likes
02
2020 | Munro Shoe | Page 23
1. Research
3. User Inter f ace Kit
4. Design Outcome
2020 | Munro Shoe | Page 24
Website Site
02
Pesawaran Adventure
Role: UX Design | Duration: 3 Weeks
1. Research
Challenge
How could we, as a region in need, develop pesawaran’s unique fabric to attract young adult travelers?
Defining The Problem
I conducted an individual online research through published surveys and reports from government, their region’s website and other organization.
2. Define Problem
Insights #1
70% of young adults travelers look for souvenirs that matched the modern theme of their house
What is the project about?
Hello Pesawaran is a branding my teammate and I made that explore the culture of Pesawaran, which is a region of Indonesia. We had collaboration with the ministry of tourism, Mr. Sandiaga Uno. The collaboration is to market Pesawaran’s unique fabric called Sulam Jelujur to attract tourists by making souvenirs. With a more innovative approach, We made a fun app for tourist to learn the culture of Sulam Jelujur fabric.
Young adults travelers expect souvenir to be functional and memorable
Insights #2
90% of young adult travelers who come to Pesawaran are not aware of the culture behind Sulam Jelujur
Insights #3
4.88 million young adults travelers relies on phone and internet during travelling in this digital era
Inf
n
The Sulam Jel
ujur
Sulam Jelujur fabric is made into furniture with a modern theme for young adults to feel that the fabric has a function as well as a decorative element
2022 | Pesawaran Adventure | Page 25
tor y in packaging
S
Consists of labels showing the inspiration from their transmigration. This is to encourage travelers to explore more about pesawaran. ormative Game Applicatio
Provide users to learn in an exciting way by playing challenges digitally. This aims to encourage users to explore and learn about Pesawaran
Furniture
3. App Design System
Informative Game Application
I will be sharing the design of the application and how I implemented graphic element to become an intercative experience for users to learn.
Select start to play the informative game.
Animated video will start. Then, click the next button.
Explaining about Sulam Jelujur fabric. Then, click next.
Challenges to complete by taking picture of the furniture bought.
Information about the furniture while user upload photos. Challenge completed!
Video Presentation of Pesawaran Adventure
Click to see Portfolio Website: Arawibawatech.com Portfolio Website | Page 27