UX Design Portfolio 2021 - Dewinna Farah Puspita

UX Design Portfolio Dewinna Farah Puspita 2021

EXPERIENCES July 2020 - Present

StickEarn

UI/UX Designer

Responsible for GRID dashboard (internal), current ads.stickearn.com website, and an ongoing commercial product. StickEarn is an advertising company that sells OOH medias.

(+62) 813 - 1878 - 7726 dewinnafarahpuspita@gmail.com

November 2019 - February 2020

Purwadhika Digital Technology School

UX Design Student

Batch 2

issuu.com/dedewinn

Connector UX Design, had done 2 mobile app projects with different roles, as Product Owner (Parkin App) and as UX Strategist & Information Architect (IKEA Indonesia Mobile App Revamp), graduated with excellent scores.

SKILLS & STACKS

April - June 2018

User Flow, Information Architecture

HACKTIV8

Persona, Journey Maps

Part-time course Front End

linkedin.com/in/dedewinn/

User Research, Mapping Problems Usability Testing

Job

FrontEnd Web Development Basics Student

Web Development Basics, created profile website for archived architecture project in Indonesia aai.netlify.com, took references from Dezeen and Archdaily

Wireframing Figma Sketch + Invision

ACADEMIC

BACKGROUND

Adobe XD

2013 - 2017

Adobe Photoshop

Bachelor’s Degree in Architecture Institut Teknologi Sepuluh Nopember (ITS), Surabaya

HTML CSS

Projects

IKEA Indonesia Mobile App Revamp (2020) Sociolla Dashboard (2020) Parkin App (2020)

Sit tight and have your popcorn ready, we’ll start the journey now...

IKEA Indonesia Mobile

App Revamp Purwadhika Final Project 2020 team: Dewinna Farah Puspita (as UX Strategist & Information Architect), Melati Wijayanti, Rihan Rizaldy Wibowo

Goals

Overview IKEA Indonesia current digital product

To match the brand identity that’s already embedded in IKEA (Minimalistic, Scandinavian, Modular) to blend with the Indonesian culture in the new IKEA Indonesia app design.

To create IKEA Indonesia application as a companion app for in-store experience , so it increase the level of enjoyment when people visiting IKEA store. (Smart Shopping Experience)

claimed to be a smart shopping companion platform where users can shop IKEA products online or in-store in a simple and easy way. From planning to purchase product wherever the users are to finding every products when visiting IKEA store.

Finding the purpose Understanding the problems and user needs are the key to find the purpose that leads to achieving the goals. We listed out several activities to understand better so we can create design that works well for the user.

Understanding app pain points from google play store review Thoroughly experiencing IKEA Indonesia Mobile App from search to checkout the product Visiting IKEA store to observe their store experience while using their app as shopping companion Distributing questionnaires to get insights from research participant

App Reviews

There’re some pain points that stand out among other reviews, “flow gets weird after clicking the product details and want to go back to last view product list”, “its very hard to explore product, I have to scroll many times to find the product/category I want to buy”, “promotion banner you click goes to their website, I can’t purchased everything through their app”, “harder to navigate than their website”.

Experiencing IKEA Indonesia Mobile App

By thoroughly experiencing the app, we found several insights and pain points: There are 3 ways for user to explore the product, explore by category, by rooms, and by searching the product keywords.

Product details include a meticulous detail of product info, from the price, sizes, to care instructions pdf with picture.

Few features can be use as companion in-store shopping experience, such as article product number that shows product location Hard to navigate when exploring product category, some categories defined by unfamiliar names.

Annoying user flow after arriving at product details and click the back icon, it doesn’t go back to last view sub menu, it goes back directly to home page, user have to scroll many times again to find their last view.

Visiting IKEA store

Distributing

By visiting IKEA store and experience the

questionnaires

process we get some insights: Customers take notes on their desired

We conduct small qualitative and quantitave

product from the showroom area and

research using google forms to get insights

collect the product themselves at the

from user and IKEA store customer. We

warehouse or market hall area.

asked them about:

There’re several IKEA shopping assistants

1. Store visit goals

around to help customer with the shopping

2. Store visit impressions

experience.

3. Positive in-store experience

A long queue in IKEA restaurant section

4. Negative in-store experience

indicates that people enjoy the experience

5. Existing app experience

there.

6. Opinion about in-store experience

Products in market hall area divided

companion feature in IKEA App

based on rooms category.

Customers given choices to either pickup

52 people participated in this research, and

and bought the product home by

we synthesize their answer to get

themselves or by home delivery method.

prioritization of problems we want to solve.

People come to IKEA with various motives

In general, people got a positive impression from their IKEA in store experience

The positive experiences are the product quality, store flow, flexible service system, various room display, etc

The negative experiences are finding the product’s location, product availability info not clear, finding shopping assistant, self-service system hard to understand

Some of the respondents want an app to enchance their in store experience, while some of them prefer the website or visiting the store.

Some of the respondents who already tried the IKEA Indonesia mobile app think that the app is good, while some of them think it is bad

The questionnaires criteria is for the people who has visited and experiencing IKEA store in Indonesia.

From 6 question we ask we synthesize the answer and break down the problems into How Might We to get clear purpose on what features we want to include in our design.

Facilitate IKEA Restaurant’s ordering process become easier

Provide additional feature for user to be able to take notes on shopping list

Let users be able to explore products by search in product category

Integrate user experience in IKEA store with the experience in the app

Creata IKEA mobile app UI more famliar for the user

Provide rack and section info where product is located

Provide product navigation info in markethall

Create “All Products” categorizing more general

Create product recommendation visualization more familiar for the user

User Research KIARA SALINAS DEMOGRAPHICS AGE

EDUCATION

STATUS

LOCATION

JOB

26

MBA

Single

Jakarta

An employee for retail company

STORY Kiara is a 26-year-old woman. She want to find an inspiration to decorate her old bedroom. In addition, Kiara also wanted to find items to fill the room based on the inspiration she had seen. Kiara plans to come directly to the IKEA Indonesia store because she knows that IKEA provides some inspiration to decorate a room as well as the items they use in it.

FRUSTRATIONS

PERSONALITY

- I want to decorate my old bedroom but do not know where to start

- Hard to find the right inspiration for my old bedroom

- Hard to find the products I want once I got the inspiration look

Introvert

Extrovert

Thinking

Feeling

Curious

Creative

GOALS - Get an inspiration to decorate the bedroom

- Get the products I want based on the inspiration I see

- The payment process went smoothly

- Get the product in my hand safely

We create persona and do comparative research to define our app user segmentation and features comparation.

User Flow Before we go to the next step, which is design the UI, we arrange the IA and user flow to create a better flow for the design.

Arranging the IA from categorizing all product category to smaller category, add/reduce/maintain the info for a better user experience.

Focusing on enhancing user experience in searching & buying for products also adding new feature to make IKEA mobile app goals as a companion app when shopping in-store realized.

The app also maintain the previous user flow from the existing app such as the delivery method, searching for products by rooms category, inspiration, etc.

Low-Fi Wireframe

Based on the research process, our team did design exploration on low-fi wireframe to get the visualization on how the app will be develop at the next step.

Hi-Fi Design The upper part of the page consists of user IKEA logo, search bar, shopping cart icon, and customer service chat icon.

The app also be able to show structured information about product categories, discover by rooms, new product in IKEA, find inspirations, and IKEA restaurant foods.

Bottom navigation bar provided that contain 5 pages consist of: Home, Notifications, In Store Experience, Wishlist, Account.

Home Page

http://bit.ly/ikeaprototype

prototype works best with iPhone X

In-Store Experience

Shopping List Experience

Culinary Experience

The app provide user to add product to shopping

It allows user to be able to get information about

list by scanning product’s QR Code to ease their

IKEA Restaurant current menus, with price, rating,

hassle when they have to write down the desired

and menu description as the additional infos.

product with pencil & paper. Adding information such as rack and section details and also a button which allow users to see that product on the store map.

Store Map Experience

Store map featured in this app so that the user will be informed where they’re currently located at the massive IKEA store markethall.

We generalize the product naming category from the IA, then we divide this page into two different scrollable section to create an easy experience of discovering a long list of product category.

After select which category of product user want to buy, the app provide user with list products which they can filter and sort them accordingly.

Searching Product via Category

Another way to search for product are via rooms category and through inspiration article. Rooms category allows users to find products based on the room their decorating.

Room inspiration show a curated article that contained how a room designed by designer and give recommendation of IKEA's product that used in that room.

Searching Product via Rooms & Inspirations

On product detail user be able to directly buy and proceed to checkout the product or add to cart first before deciding to proceed to checkout.

Checkout page divided product in ‘family’ category first, because IKEA’s products have specific ‘family’ category which consists of many products with the same name but different type of product.

Checkout Product Experience

Usability Testing Home Page Findings

It present too much shadows, which makes them think more and the group of contents presented on the page are too packed.

UT participants thought that it doesn't represent IKEA branding minimalist image.

Decision

Remove shadows and give more white spaces on the page, so the users will feel that there's intermission before moving from one content to another.

1st Sprint

2nd Sprint

3rd Sprint

In-Store Experience

Usability Testing

Findings The experience they get from the feature is not significant UT participant don’t understand the purpose of this feature

Decision Move In Store call to action (CTA) button to the center of bottom navigation Change contents into tabs which are Shopping List, Culinary, and Store Map. Users could add product to Shopping List, it can only be done inside IKEA 1st Sprint

2nd Sprint

3rd Sprint

store by scan products QR code in showroom area.

Change the bottom nav style, to create focus on in-store experience feature

Retrospective What if?

Understand the users more by doing another usability test to IKEA store visitors Creating flow variations to get another perspectives and test them to users to validate it.

Prioritize action plan to achieve a better mvp Do card sorting to generalize product category and get feedbacks from user

Match the brand identity?

We add some features such as shopping list which user can easily add a product by scanning QR Code on a product tag and also give a store map visualization to help user find their desired product from showroom in the market hall or the warehouse.

Improving in-store experience?

We designed this app with minimalist design, and referencing to several familiar Indonesian app design that works to make our user have an easy and familiar experience to use this product.

Sociolla Dashboard Case Study 2020 Dewinna Farah Puspita

Overview Goals

The idea is to design dashboard for well-known ecommerce with specific

Create ecommerce dashboard for business owners to see the sales results.

demographic of customers to provide insightful data for user.

All metrics need to fit in one page, which are: 1. Revenue

Sociolla is Indonesia's trusted and most

2. Best-selling products

complete online shopping destination

3. Profit growth from a period of time

offering authentic beauty products e.g.

4. Location of people who have bought

make up, skin care, hair care, fragrance and

products from the business owner

beauty tools serving women across

5. Age and gender demographics of the

Indonesia.

customer

6. Number of orders that have been received, processed, and completed Users must be able to extract the data Provide low fidelity and high fidelity wireframe Use consistent colors, fonts, and sizes

Understanding the needs Designing dashboard is different like designing any other web-based design. Because each dashboard has a unique specific purpose and data visualizations that it’s undertaken to serve. The goal of the product is to create ecommerce dashboard for business owners to see the sales results so that they could also extract their sales data, and 6 metrics of sales which are required to be able to be seen by business owner on the dashboard are closely related to analytical data.

What do we know?

By interviewing one of the ecommerce seller we get a glimpse of insights what information users want to be able to access on their dashboard. The main information they want to see are, Are there any incoming orders? Does customers already received the product? How many completed order do I get? How much profit do I get from time to time? What products sold the most?. Seller need those informations to analyse their product trends and to be able to do decision making for their business continuity.

Needs into realisation It’s crucial to organize a ton of information in a seamless way when designing management dashboard. Using grid to design the information layout helps to achieve effective alignment and consistency with little effort and create a basic structure or a skeleton for the design.

Layout Exploration

Based on the way we read information, the top left corner of the screen will naturally get more attention, so key information positioned in the layout from left to right.

When users finish with the first row, they will move down to the next one. Using sidebar for user to navigate the dashboard for clear and hussle-free direction.

Data Visualization

Best-selling Products Sociolla Dashboard provides user with information top three best-selling products

Order Status

from each business owners

Sociolla platform scope of business mainly

in a period of time.

focus on product order, so the information about order received, order processed, and completed orders need to be separated in different cards to make each order information clear for the user.

Demographic Age and gender demographic chart presented in a chart commonly known by many business owners.

Revenue & Profit Growth Combining revenue and profit growth data in one row because those two infos are two-related-key informations needed by the business owners. User could also change the profit growth analytical period of time.

Customer Location Sociolla customer ranging across Indonesia, metrics of customer location presented in Indonesia map with percentage in each region.

Hi - Fi Design

First Exploration

The first design exploration mainly focused on the user needs for clear data visualization which brand owner be able to directly extract from the dashboard and match it with Sociolla design system. Design of the dashboard exploration is an enhancement from previous low-fi wireframe, to make all components alive, and ready to test for feedback from brand owners.

From the first exploration there’re several feedbacks taken, user said that the color already represent Sociolla as the ecommerce owner, but the design itself is too stiff, boring, less fun to use compared to Sociolla ecommerce platform. Data visualization clear enough for them to get information.

The final iteration is to enhance the design more by playing with floating cards, sets of color and shapes.

system recognize what account is currently logged in

clean side bar menu visualization to help user decide action easily

provide dashboard with customer care info in case there’s problem on Sociolla Dashboard

Final Iteration

where user could directly print and extract their sales data

floating card style to make UI more dynamic and fun to use

Design System

The first design exploration mainly focused on the user needs for clear data visualization which brand owner be able to directly extract from the dashboard and match it with Sociolla design system. Design of the dashboard exploration is an enhancement from previous low-fi wireframe, to make all components alive, and ready to test for feedbacks from brand owners.

Parkin App

Case Study 2020 team: Dewinna Farah Puspita (as Product Owner), Rihan Rizaldy Wibowo, Fransiskus Arnold Raharja, Arlin Shiffa, Utami Maharani, Muhammad Asep Damyati, Mohammad Fachry

Goals Helping car drivers from finding available parking spot to park their car at the desired spot as easy and efficient as possible.

Overview Parking has become a major problem that must be faced by most car drivers every day.

Car drivers struggle to find available and affordable parking when visiting a building.

This activity is very time-consuming and take a lot of energy. Parkin's main idea is a mobile application which can find and book parking spot without hassle and as efficient as possible, therefore Parkin should be able to solve the driver's problems in time-consuming process of finding parking spot conventionally.

Understanding the problems

We try to understand the problems by doing interview via phone to people who own private cars and drove them for daily activities, such as to go to college and to office.

There’re 5 people we interviewed with 4 main interview sections, followed by a number of follow-up questions that were situational in accordance with the answers given by the resource persons.

How is your process when you’re looking for a parking spot?

How is your experience in finding parking?

How many minutes/hours do you spend from searching the parking spot to park your car?

What do you think about the signages in the parking area?

Where do you usually park your car in public places?

How do you find your vehicle's parking spot when you want to exit the parking lot?

What is the ideal parking space in your opinion?

What do you think can improve your parking experience?

Interviewees answers are put into affinity map, and we process them into How Might We to summarize which problems will be worked upon and eventually solved in the upcoming design sprint processes.

Make easier for car drivers to understand the parking space flow

Give accurate empty parking spot indicator

Give clear information parking space layout

Give category parking slot information

Give clear empty parking slot information

Shorten the time when entering parking space

Benchmarking other similar app To get more insights about features we want to include in our app, we did comparative analysis with other similar parking app in Indonesia. These aps have different features, ranging from providing information on the nearest parking lot, parking reservation, to payment through the application.

CariParkir Parking reservation Parking availability info Order info Search nearby parking Navigation to parking spot Payment via app Vehicle registration Save parking spot as favorite Parking rating Parking history Notifications

Smark Parking

Parkee

Each three apps have different value proposition. CariParkir Find parking location that is adequate, comfortable, safe, and of course the closest to the destination, Smark Parking Providing a special parking area that is connected to Smark Parking app, Parkee - Special app for paying parking fee in a non-cash way.

Propose the idea

Based on the research our team then define car drivers process when searching for parking spot until getting the parking spot itself. We challenge ourself to sketch 8 ideas in 8 minutes through crazy 8’s based on the process we defined before, and then each of our team present their ideas and we vote for the ideas and to turn those ideas into design realisations.

Define user segment and user flow Adelyn, 29

Each team member propose their user flow and we vote which one will be selected to later become our prototype flow.

CEO, TSL Solutions Jakarta, Indonesia

BIO

Adelyn is the CEO of TSL Solutions who works regularly Mon - Fri 9-5. She always use her car to drive her to the office everyday and also to meet her clients.

Frustations

Frequently get confused if navigating in unconventional parking lot layouts Sometimes late for meeting if the parking lot is very full.

Goals

Quickly get parking spot at any desired spot in the parking building with clear direction/signage, so she always in time for her meeting.

Parkin User Flow

Prototype Home page consists of user info, notification bell, search bar, wallet balance, and nearby parking.

Because Parkin main infos are based on location, the app present a large percentage of map with overview info parking slot availability and nearby parking slot.

Searching for Parking Space

We provide detailed information about the building such as building name, operational hours, and the available parking spot on related building.

When users have decided in which building they want to park their car, the app direct user to choose the expected arrival and proceed to the next step which is selecting parking spot.

After user selected the parking spot they can proceed to the payment option to produce their QR code to scan when entering the building parking space.

Selecting Parking Spot

After user completed payment and get their QR codes, they can proceed to go to their parking spot location.

Parkin provided maps to direct user to their parking location and the app also provided clear direction with signages inside the building when reaching to the parking spot user have purchased before.

Direction to Parking Spot

Usability Testing

Nearby Parking Space Findings

User confused by the lack of information on the map visualization.

User hoping that they can have an overview information about related building on the map.

Decision

1st Sprint

2nd Sprint

We provide building's name and parking spot's availability status in High, Medium, and Low on the map visualization. Nearest Parking page also contain building list info with picture, building name and address, parking fares per hour, rating, availability status, and distance info from the current location.

Usability Testing

Selecting Parking Spot Findings

The information where they get the parking spot is not clear. Users also feel frustated that they can't choose their own parking spot in certain area they want.

Decision

1st Sprint

2nd Sprint

We decide to let the users be able to choose their own parking spot. On the top right corner we informed where the users select their parking spot in a bold frame, so that the information would be clear for the users. Selected spot, available spot, and occupied spot marked in different colors.

Conclusion We set out to solve a very familiar problem to car drivers, especially in Jakarta: the difficulty to park their cars in public buildings. Based on research and ideation, we have presented a high-fidelity interactive prototype that is able to help drivers in finding parking spaces easily and efficiently.

Usability tests show that this goal was largely achieved with several suggestions that we incorporated in the Parkin app's second iteration.

What if?

Lesson Learned

What if we researched deeper, trying

This group project is the first UI/UX

different methods like online survey or

Design group project for most of our

A/B Testing?

team members. As such, we encountered

What if we widened the scope of the

a lot of problems relating to design

project, to include the rest of the parking

methodologies, design tools mastery, the

journey (the exiting parking lot part)?

collaborative design process, and

What if we tested the prototype to more

teamwork in general. We have learned a

people with more diversity?

lot from this group project.

Thank You +62 813 1878 7726 dewinnafarahpuspita@gmail.com