Ara Wibawa: UX Portfolio

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

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.

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

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.

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

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.

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.

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

Tutorial

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.

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

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

A.

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.

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

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.

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

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.

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

3. User Inter f ace Kit

4. Design Outcome

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

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