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