UI/UX Case Study: H&M Indonesia Redesign.

Making a new design aims to solve the problems that are being faced by the user. Therefore the five respondents who previously did the UT will now do the UT again in terms of testing the new design. This is because to find out whether the new design is suitable for the user or maybe add to the exacerbation of existing problems. Therefore, the five responses that previously did UT will now do UT again.

Objectives

• Find out user’s behavior when using H&M application feature (Favorite, Add to cart, Check out).
• Find out user’s pain points when using H&M application feature (Favorite, Add to cart, Check out).

Methodology

Qualitative — Usability Testing

Sample specification

• Male / female
• Nationwide
• 16–30 years old
• People who use have used H&M application

Task

Task #1

Aim: Change the gender category.

Scenario: Imagine you want to buy your girlfriend H&M clothes but the homepage currently contains promotions and male products, how do you change the gender?

Result: All respondents can complete the task easily, because the gender category on the homepage is located at the top left of the page with red writing so that it is easy to see.

Recommendation: No recommendation.

Task #2

Aim: Find a product using search field and clothes category.

Scenario: Imagine you want to buy a hoodie, but don’t know for sure what kind of hoodie to buy so you want to see H&M’s hoodie first, how do you find the hoodie collection? If you have more than 1 way, please tell me all the ways.

Result: There are 2 ways to search for hoodie products in this application, the first is to use the search field and the second is to use the product categories on the search field page. 1 person used the hoodie category to search for hoodie products because he saw there was a hoodie category on the homepage. While 4 respondents used the search field to search for hoodies because according to them it was easier to use the search field than to search for the hoodie category. Five respondents said that the existing search feature is quite easy and has other features such as showing search history and also last viewed products that were not owned by the previous design.

Task #3

Aim: Checking out clothes from favorite.

Scenario: Imagine you want to buy 2 clothes that are in your favorite. how do you do it?

Result: 5 respondents can checkout easily. it’s just that there are some confusing user interfaces such as on the favorites page, 2 users are confused when they want to move 2 clothes from the favorite page to the shopping bag because there are 2 “move to shopping cart” buttons. then on the checkout page, users don’t like the apply discount column where users have to type the voucher code because according to the user they might not know that H&m gave them a discount voucher, therefore they would prefer if there was a button that could display the discount voucher without having to type the code.

Overall, the checkout process for this new design is easier and simpler than the old design which has 3 screens and a lot of information is repeated on each screen, such as address, discount vouchers field, and terms and conditions.

Task #4

Aim: Checking clothes details on product page.

Scenario: Imagine that you want to buy a shirt but you want to make sure that this shirt is exactly what you want from the material to the quality of the shirt. how do you do it?

Result: The user managed to check the details of the clothes easily, and the user felt that the user interface on this page was better because it made more use of the available space on this page. In addition, the product page is now also equipped with a review feature that makes users more confident about the product they are going to buy.

Design recommendation

There are some changes made based on user’s feedback.

• There are suggestions from users which for them do not have a big impact but are good if fixed, user say that the whitespace on the product card makes the product card look more empty.

• The delivery method and payment method color are too light, hence users ask for darker for color to make it more visible. And the price details on the checkout page are too small, so I decided to make it 2px bigger than before.

• At first the user didn’t realize that there was a search field because the color was too bright, so a line was added below the search field to make the search field more visible.
  Then the user also feels confused because if they want to move 2 clothes to shopping bag, there will be 2 buttons to move them, therefore the button is made to 1 and will be moved to the bottom.

• Same as favorite’s page, the user also feels confused because if they want to move 2 clothes to favorite, there will be 2 buttons to move them, therefore the button is made to 1 and will be moved to the bottom.

What is BLU?

Blu BCA is a mobile banking service from BCA Digital which is designed and developed to make it easier for its customers to make financial and non-financial transactions via mobile phones. With this service, customers can carry out financial activities anywhere and anytime. Because all these activities can be done using only a cellphone. However, Blu BCA does not have a branch office like most conventional banks. However, all of its services can be accessed on your cellphone.

Interestingly, to be able to enjoy this service you do not have to become a BCA customer. All Indonesian citizens (WNI) who are at least 17 years old, have an E-KTP, and have no tax obligations in other countries can enjoy this service.

Design Thinking Process

1 — Empathize

The design thinking step starts with the empathy stage where we as UI/UX designers put ourselves as if we are users of an application. this stage can be done through personal experience, analyzing user opinions about this application in the play store/AppStore, and conducting interviews or other methods with the aim of knowing the user’s goals, needs, and pain points.

Objective

• Know user behavior while registering and verification.
• Know user paint points while registering and verification.

Problem Statement :

• Help users to understand more about Blu’s services and products.
• Motivate users to complete all the registration steps as well as verification steps.
• Provide a good user experience for the registration and verification process.

Below are some of user’s reviews regarding Blu’s register and verification process:

PARAH ! berkali2 vc udh ada lagunya ditungguin dr antrian 100 lebih smpe 01 smpe nomor antriannya ilang tapi ttp aja gaada vc / gak diangkat, terus pake cara gmn lg sih, ribet bgt, lagunya doank “ tanpa ribet urus uang “ jangankan uang, verif aja ribet bgt !! sinyal 4g+ pake wifi jg ttp aja gabisa, …

Dari belasan rekening yang saya buka secara online. Buka rekening di blu bca adalah yang terburuk bersama com*bank. susah untuk proses verifikasi melalui vcall. Sudah nunggu dari antrian 170an eh bgitu tersambung malah di suruh vcall ulang karna koneksi nggak stabil kata cs nya. Padahal di aplikasi lain ok ok aja. Sudah 2 minggu rekening belum terbuka .

awkakwkk ini sistem aplikasinya badut banget. verifikasinya ribet, ngaku digital tapi ribetnya ngalahin yang konvensional. uninstall bye. balik lagi kalo sistem verifikasinya udah bener.

2 — Define

After the stage of empathy with the user, the next stage is called define. at this stage we will analyze all the information that has been obtained in the previous stage which will produce a list of pain points and how might we solve those problem.

Competitor analysis

Bank Jago is one of the largest digital banks in Indonesia and this time it will be used as an object for competitor analysis. At the register and verification stage, Bank Jago provides a much shorter step by step with 6 steps other than the intro page and requires fewer documents than Blu. (currently, Blu is 16 steps)

Bank Jago has used the intro page well because it introduced this application and some of the advantages of this app, whitespace has also been used to its full potential, the only disadvantage is new users must verify using a video call on right away.

3 — Ideate

After the stage of understanding the user’s problem and analyzing it. the third stage is ideate, where we think of as many ideas as possible that can be implemented in the application. maybe many of the ideas that have been made will not be used later but this stage will certainly provide some of the best ideas that can be implemented for application changes.

Useflow

For userflow, there are some changes regarding several steps such as account registration using a BCA account that is placed at the beginning and also maximizing whitespace by combining 2 screens into 1.

This has succeeded in making the registration and verification process shorter, where previously registration using a BCA account contained 16 screens that could be made into 9 screens and registration without a BCA account from 12 screens to 8 screens. The shorter registration process is expected to make the user more comfortable and motivate the user to continue the registration process until verification.

User Interface

UI Changes (Before and after)

One of the reasons why users stop registering is a lack of information and not knowing what to do. With the addition of the chat feature with cs, users will find it easier to get help that is not on the help page. Then change the long progress bar to a 3 step radio button. Because users may feel that the long progress bar makes the registration journey long, thereby reducing the user’s intention to register.

The changes made on this page are to explain further what is blu and what are the benefits that users get if they create a blu account. In addition, the BCA logo was also added to inform that blu is a product of BCA bank, so users will be more interested in registering

This page adds information about the method most used by other users to register.

creating a blu account using an existing BCA account will certainly make it easier for BCA to carry out further development

On the terms and conditions page, actually there are 2 pages for terms and conditions, but because users rarely read terms and conditions. these pages are put together to make the registration process more efficient.

In the initial design, both pages had too much whitespace. so it is necessary to do whitespace efficiency by putting it together, and adding an atm card image with an explanation, with the aim of giving directions to the user where the card number is located.

In the initial design, both pages had too much whitespace. so it is necessary to do whitespace efficiency by putting it together.

On the document page, there is a new feature that makes it easier for users to fill in data, namely the photo upload feature that allows users to upload their e-KTP and NPWP from their photo gallery. because not everyone has an e-KTP and NPWP next to them 24 hours a day.

In the initial design, both pages had too much whitespace. so it is necessary to do whitespace efficiency by putting it together. And user usually has the same address as e-KTP. but if they don't, they can scroll and fill the form.

The problem that is most often found by users is that the verification method is difficult, many users complain that they have waited several hours and spent a lot of mobile data but apparently their verification failed. this can be overcome by adding a self-verification feature that allows users to verify without the help of customer service. examples of self-verification such as they must mention today’s date, custom verification sentences, and other necessary things.

4 — Prototype

This is the prototype of the new Blu registration and verification process.

Click below here to access the full figma file:

Full figma file

5 — Testing

For the test step, I used usability testing to test this new user interface. The 2 respondents who did this UT, both felt that the registration process now feels shorter and faster than before because they had to press a lot of “next” buttons which made the registration process very long. according to respondents, they do not like the existing radio button step, because it is too obstructive. The step radio button is better placed in the top navigation bar.

Thankyou!

Overview and Problem

Website https://www.astramotor.co.id/ is the official Astra Honda website to serve their customers. There are 3 main things/core features of this website, namely booking service, booking visit service, introducing the Motorku X application, and also introducing Honda products to the wider community. According to the Honda Astra team, the team feels that this website has shortcomings in terms of user experience, therefore they want to improvise the current interface design to improve user experience, encourage users to explore this website further and also increase the number of transactions.

Empathize

Existing app

For the first step, I tried this website for the first time and analyzed its usability of this website. after I know the use of this application, I feel this application does not highlight the usefulness of this website. Before concluding the cause, I conducted a few interviews with respondents to find out what other people think about the lack of a website and also observed similar websites to this Honda Astra.

Objectives

• Find out the user’s pain point when using this website
• Find out what features should be highlighted on this website to encourage users to use this website further

Define

Competitor analysis

Below are 3 competitor websites, namely Suzuki, Kawasaki, and Yamaha. The similarity between these 3 websites is that these brands really highlight their motorcycle products because the purpose of this website is more to introduce their motorcycles to users and also make sales through the available contacts.

Problems

Based on the affinity diagram and interview results, there are several problems with the Astra Honda user interface:

• There is no motorcycle catalog on the homepage (Critical).

Kok dihomepage gaada catalog motor sama sekali ya? padahal ini kan web honda dan itu juga ada section untuk catalog motor.

Users find it strange because on the Honda Astra homepage there is a section for Honda motorcycles, but the section is very small and cannot be clicked. they feel that Honda Astra should be able to show a catalog of motorbikes owned by Honda even though the main purpose of this website is motorbike service services.

• Users don’t know that they can book service on the website (Critical).

Kalau secara sekilas liat gatau kalau kita bisa book service diweb, kirain harus download app dulu

On the homepage, there is an explanation of the available services. but it does not highlight that they can make a booking through the website.

• The website doesn’t promote Motorku X.

Kata nikmati layanan terbaik astra (dibawah banner) kayaknya ga cocok deh, kirain isinya penjelasan layanan apa aja yang ada, ternyata aplikasi motorku X.

The website doesn’t promote the Motorku X application on the homepage, there is a small banner that directs the user to the download page for the Motorku X application, but the user doesn’t expect that it is a button on the Motorku X page.

Ideate

Solutions

• Displays some Honda motorcycles on the homepage and provides a “more” button which is connected to a complete page or directed to Honda website.
• Give a sneak peek of the appearance of the Motorku X to notify the user that Honda has provided an application to make a booking service.
• Provide an explanation of what booking service and booking visit service are and added a “Pesan sekarang” button to let them know they can book through the website.
• Changing Honda outlets in Indonesia to nearby outlets because users feel more interested in knowing the location of the nearest outlet, and also changing some of the layouts of Honda Astra’s social media to make it more visible

UI Design

below is the Honda Astra user interface that has made some of the changes that have been mentioned in the previous stage

Style Guide

A style guide is a document that contains rules and guidelines for a project. This encompasses several items, including voice, tone, style, and so on.

Prototype

After making a UI design, the next stage is making a prototype that allows this design to run as if the development stage has been completed. You can access the figma prototype file below and click run:

Link: Prototype

Before and after

Thankyou for reading :)

Disclaimer: This is personal project and not affiliated with H&M.

Overview and Problem

H&M is a Swedish multinational clothing company headquartered in Stockholm. As of November 2019, H&M operates in 74 countries with more than 5,000 stores under various company brands, with 126,000 full-time equivalent positions. H&M finally expanded into Indonesia by opening its first branch at Gandaria City Mall in 2013.

In a pandemic like this, people are forced to make online purchases to fulfill their needs. HM already has an application that is specifically intended for the Indonesian and Thai regions. but this application turns out to have a bad image in the play store because users find it difficult to use the application. The bad reviews are more towards a less friendly UI, and also the lack of features.

Challenge

The challenge in this case study is to know the pain points experienced by users when shopping using the H&M application and overcome these problems by making changes to the application such as revamping its user interface, changing or creating a new flow, etc.

Process

Design Thinking

Phase 1: Empathize

Observation

I started by downloading and trying the H&M app because my friend told me she had a bad experience using the app. After a few minutes using this application and testing several features, I found some problems that might be problem for other people too. I made several scenarios that will be used in usability testing to find out if other users also feel the same and find out the pain points based on the user perspective.

Research Plan

Background

Based on the Playstore review of this H&M application and there are several people who complain about the user interface, still showing products that are out of stock, difficult to search for a product, confusing checkout process, etc. Therefore, UX designers want to know the pain points experienced by users by evaluating existing applications and overcoming these problems by revamping the user interface to improve the user experience when using this application based on these insights.

Objectives

• Find out user’s behavior when using H&M application.
• Find out user’s pain points when using H&M application.
• Find out user’s behavior when checking out an order.

Methodology

Qualitative — In Depth Interview & Usability Testing

Sample Specification

• Male / female
• Nationwide
• 16–30 years old
• People who use have used H&M application

Key Information Areas

• User profile
• User behavior when checking out an order
• User behavior when searching for products

Timeline

18 November 2021 Research plan

22 November 2021 Observation

25 November 2021 Conduct research

Discussion Guide

Conduct Research — In Depth Interview

At this stage, in-depth interviews were conducted with 5 respondents and conducted remotely. at this stage of conduct research, respondents will answer all the questions contained in the discussion guide above and also several tasks regarding the use of this hm application.

Conduct Research — Usability Testing

After conducting an in-depth interview, the next step is usability testing where these 5 respondents will be given 3 tasks which aim to find out their experience and pain points when using this application. Usability testing is also useful for providing additional insight from users in addition to answers from previous interviews.

Task #1: Imagine you find 2 nice clothes, but you don’t want to buy them now and want to add them to your favorites. how do you do it?

Task #2: Imagine your friend telling you that in H&M there is a nice dress called airy, you want to buy the dress but you don’t know the details of the dress, how do you check the details?

Task #3: Imagine that you already have 2 clothes in your shopping bag, and 2 clothes in your favorites. And now you want to buy those 2 favorite clothes and 1 clothes in the shopping bag, how do you do it?

All insights from interviews and usability testing will be poured in the next phase.

Phase 2: Define

User Persona

based on insight from 5 in-depth interviews and also usability testing of the HM application. The next step is to conclude the insight, here the user persona is used to represent the user who will use this application later. This user persona contains biodata, goals, needs, and pain points.

Customer Journey Map

In addition to the user persona, the user’s journey in using the application is also quite important to know. Therefore, a customer journey map was created which contains the steps that have been passed by users when using this application, how they feel, what they think when going through this step, and what difficulties they face.

Competitor Analysis

For competitor analysis, here are used 2 applications that are also engaged in clothing retail, namely Uniqlo and Berrybenka. At this stage, an analysis will be carried out on how competitors design their applications, especially on the homepage and product page.

For the homepage, Uniqlo and Berrybenka have a slightly different hierarchy where Uniqlo shows their products according to gender segment, while Berrybenka emphasizes their promotional banners, such as discounts. Berrybenka does not have a gender segment because the products made by Berrybenka are specifically for women

The homepage currently owned by H&M is more similar to Berrybenka compared to Uniqlo with many promotions on the homepage. however hm has a slightly different arrangement of the navigation bar where cart and favorites are in the navigation bar while other applications are in the page header.

For product pages, the hierarchy owned by these three applications is more or less the same, starting with the product name header, photos, details, and also the add to cart button. Then for complete clothing details, Uniqlo really provides very complete clothing details with a review feature. Berrybenka also provides good detail by providing details of the size of this shirt and also the height of the model.

Unfortunately, HM has too much whitespace on the page and does not have complete details of the clothes, for example, the size of the clothes given in the details is the size of the clothes in general, not the size of the product.

Problem

Based on user persona, customer journey map, and usability testing that has been done, there are several problems that are being faced by the user.

• The homepage is too plain. (Critical)

Page: Homepage

Problem: As a user who wants to shop at H&M, the current homepage is not very friendly because the current homepage is too mixed (promotion of catalogs for children, boys, girls) all of which are placed on the homepage. the user feels that it is necessary to divide the banner promotion banner according to gender category.

And as a user who wants to shop but doesn’t know what to buy, the absence of clothing recommendations makes it difficult for users to explore clothes.

• Complicated and incomplete product page. (Critical)

Page: Product page

Problem: The product page is another problem for the user, according to the user, the product page has too much empty space that is not used, for example, the user has to press the “detail” word to see the details of the shirt. users find it easier to scroll through a page than having to press the “details” word to open the product details. There are also users who do not know that the “detail” word can be pressed, so they think that H&M does not provide detailed information on this product.

Another problem is that the user feels that H&M should provide review and stock availability feature and for the size guide, it should be the original size of this product, but the size guide provided by H&M is a general size of clothing which may not be very accurate.

• Confusing and complicated checkout process.

Page: Checkout page

Problem: For users, the current checkout process for H&M is too long because the user has to go through 3 screen pages (choose delivery method, address, payment method). This is due to repeated content on each page such as terms and conditions.

Users also feel confused because on the delivery method and address page There are 2 buttons, one of the buttons is disabled.

• Can’t select specific products to move/check out.

Page: Favorite and shopping bag page

Problem: This is not critical but better if fixed. The user finds it difficult if he/she wants to move certain products into the shopping bag, but it cannot be done at once because there is no option to choose several products at once so it must be done one by one and also when in the shopping bag, user cannot select certain products to checkout before they throw away all the products that do not want to be checked out. Users feel the need for a feature to select products to facilitate product selection.

Phase 3: Ideate

The next stage is ideate, this stage is the stage to create as many ideas as possible to solve the problem as discussed in phase 2, namely define.
In this phase, I created the userflow, information architecture, wireframe, UI design (system design), and mockup before everything was brought to the interactive prototype.

User flow

User flows are visualized steps that the user can follow through the application to complete one or more tasks. These steps provide a path that can take the user from the entry point to the successful outcome and final action.

In this user flow, we can see the steps the user takes from accessing the homepage to the user adding favorites, adding to cart, and checkout.

Information Architecture

Information architecture is closely related to user experience (UX) design. Information architecture is information that is madein the form of charts, columns, or structured designs that are interrelated to make it easier for others to understand.

this Information Architecture (IA) will be the structure of the wireframe that will be created.

Wireframe

This is a wireframe that has been created using Figma, the purpose of making this wireframe is to provide an initial design before proceeding to the mockup stage.

Design System

UI Design

Below are all mockup designs that have been made, later there will be an explanation of the differences between the old and new designs and also the reasons for changing or adding views.

Homepage

The new homepage design has a gender option at the top left of the page, this aims to make it easier for users to see H&M promotions and products. The promotional banner is also made into a carousel slider so it doesn’t take up a lot of space.

This page also provides clothing categories and displays some H&M clothes because not all users know what they want to buy. In addition, the order of the navigation bar will experience a slight change in location.

Search page

The search feature will have its own page in the navigation bar, on this page users can see the products they last viewed, and also search history. The back button on this page will also be moved to the left (using icon) to be the same as other pages.

Search result

In the initial design, the user is provided with a “category” feature to select products according to the category, but it turns out that the category that can be selected is only “all” therefore it will be replaced with a sorting feature based on order. In addition, the product card will be reduced to show more products in 1 screen.

On this page will also display a review of each product.

Product page

In the current design, when users open the product page, they can only see pictures of the clothes and it takes up too much space, therefore the product images are minimized and there is a slider to see photos of other clothes. besides that, users can also access their basket by pressing the bag button on the top right.
Also added the stock quantity feature to notify the available stock of clothes because the user finds it a bit difficult to buy clothes with a certain amount

Then the user can also see the reviews that have been given by other users.
The favorite feature in the initial design was too small and sometimes blend withthe photo background, so it was moved below near the add to cart button.

Favorite

On the favorites page will be added a checkbox that allows the user to select several items to be moved to the shopping cart at once.
To make it easier for users to find their favorite clothes, a search feature was added. this might be very useful if the user has a lot of clothes in favorites

Shopping bag

The changes implemented on this page are almost the same as the favorites, namely the addition of a checkbox to select several clothes at once. This page will also display the total price of the selected clothes

Previously there was a field to enter a discount code, but it was moved to the checkout page. This page will also display the total price of the selected clothes.

Checkout

this is an old checkout process, at this stage the user is asked to fill in 3 information, namely address, shipping method, and payment method which is divided into 3 screens. However, these three screens have the same terms and conditions and on the first 2 checkout pages there are 2 buttons that confuse the user.

Therefore for the new design, the page for selecting the address and shipping method will be made into 1 screen, the discount code will also be displayed only on this screen. Then on the next screen there is only a selection of payment methods, price details and also terms and conditions.

Phase 4: Prototype

At this stage, the mockup will be given a clickable interactive design. This stage will cover the user’s journey from accessing the homepage to checkout.

To try the prototype, you can use the prototype frame below or use the figma link.

Try H&M prototype

* Set screen to fit to see the full screen*

Phase 5: Test (Usability Testing)

After making a new design, several respondents will be tested to find out whether this latest design can solve the problems, respondents who will participate in usability testing are the same respondents as the previous one.
The testing scenario used in this usability testing stage will be more or less the same as the usability testing stage that has been carried out previously.

To access the full report please click the link below:

Usability testing report: H&M Indonesia.

Task #1

Aim: Change the gender category.

Scenario: Imagine you want to buy your girlfriend H&M clothes but the homepage currently contains promotions and male products, how do you change the gender?

Result: All respondents can change the gender category easily because the gender category is located on the top left of the page in red so it is easy to see.

Task #2

Aim: Find a product using search field.

Scenario: Imagine you want to buy a hoodie, but don’t know for sure what kind of hoodie to buy so you want to see H&M’s hoodie first, how do you find the hoodie collection? If you have more than 1 way, please tell me all the ways.

Result: Five respondents said that the (new) existing search feature is quite easy and has other features such as showing search history and also last viewed products that were not owned by the previous design.

Task #3

Aim: Checking out clothes from favorite.

Scenario: Imagine you want to buy 2 clothes that are in your favorite. how do you do it?

Result: Out of 5 respondents, all of them were able to check out their favorite items, only 2 respondents experienced a little confusion when moving 2 items from favorites to shopping bags at once where when the user has selected 2 items there are 2 buttons to move items.

For the checkout process, users feel that the new checkout process is simpler and faster because 2 screens have been merged into 1 and have deleted duplicated information.

Task #4

Aim: Checking clothes details on product page.

Scenario: Imagine that you want to buy a shirt but you want to make sure that this shirt is exactly what you want from the material to the quality of the shirt. how do you do it?

Result: The user managed to check the details of the clothes easily, and the user felt that the user interface on this page was better because it made more use of the available space on this page. In addition, the product page is now also equipped with a review feature that makes users more confident about the product they are going to buy.

Design recommendation

• Delete whitespace on product’s card
• Change the color of payment method, delivery method color, and increase the font size of price details on checkout page.
• On favorite page, a line was added below the search field to make the search field more visible and the “move to shopping bag” button is made to 1 and will be moved to the bottom.
• On shopping bag page, the recommendation is same. The “move to favorite” button is made to 1 and will be moved to the bottom.

Conclusion

After making several changes to the appearance of H&M Indonesia. Users feel that the appearance of the h&m application is cleaner and easier to use, especially at the stage of moving items on the favorites page, moving items on the shopping bag page, and checking out an order. In this case study, the user plays an important role in determining what components must be changed in order to provide a better user experience.

Thank you for reading :))

SejutaCita is Indonesia’s No.1 Student & SMA/K Events application that aims to democratize youth event information ranging from webinars, competitions, classes, conferences, scholarships, internships, and more. Now the committee can easily upload events & accept participant registrations in the SejutaCita application and at the same time promote to 1,700,000+ young application users. And other young people can find more opportunities to build a CV and develop themselves through the SejutaCita application.

Challenge

40% of the users said that did not they can upload their own events in SejutaCinta. Therefore, redesign of the current user interface is needed with the aim that users are more aware of the upload event feature in the Sejutacita application.

Challenge was given by SejutaCita.

User Persona

Based on the challenge, this user persona is an event organizer not student.

• Male — female 16–22 years old, University event organizer student.
• Goals: Promoting events, gaining more audience.
• Needs: an app to easily promote their events.
• Pain points: hard to find the event upload feature, there is no tutorial for uploading events, there is no clue for uploading events on the homepage which makes users have to look for themselves.

Problems

Based on the persona, there are several problems users currently encounter:

• No tutorial on how to upload an event.

Users are not aware there are two tabs on profile page, for PejuangCita and Event organizer. And there is no tutorial or information such as a pop-up window.

• Little information about event upload feature on application intro.

SejutaCita has an application intro that mentioned to the users that they can upload events just in one click. But the problem is the font is too small and located at the last. This application intro did not appear every time, I tried to register 5 times with different emails to get a screenshot of the application into but the application intro only appears at the time of first registration.

• The event upload feature is too hidden.

Users will not be able to see this feature on the homepage because this feature is only available on the event page and profile page.

Ideate

Solutions

• Redesign the existing application intro, especially the event upload feature by creating a separate application intro page.
• Create tutorials on the homepage and profile page that highlight the upload events feature.
• Added a section for upload event feature below the user’s level and balance section and floating add event feature button on bottom right.

User flow

User flow is created to see what the user has to do to upload events in the Sejutacita application.

Wireframe

After creating a user flow, the next step is to create a wireframe, a wireframe is created with the aim of creating a design that will be updated/added and this step is done using Figma.

Prototype

The purpose of making this prototype is to display an updated user interface that is equipped with flow and motion design to give the appearance of the application when it is later developed. This prototype includes 10+ frames which you can try by clicking the link below:

SejutaCita prototype

UI Design

Below is the user interface design used during the process of making a high fidelity prototype with the aim of providing consistency to the design such as buttons, typography, and color.

link to UI/UX case study full version:

UX Research Case Study: Traveloka Eats

The new design that aims to solve user pain points (in the define phase) may still have shortcomings, therefore usability testing is carried out with the aim of finding out whether the new design can solve user pain points. Usability testing is carried out on cancel order, chat, and driver tracking activities.

Objectives

• Identifying user behavior in cancel order, chat, and driver tracking.
• Identifying user pain points in cancel order, chat, and driver tracking.

Sample Specification

• 18–30 years old.
• Female / male.
• Users who have used Traveloka Eats for more than 1 month.
• Nationwide scale.

Methodology

Usability Testing — Qualitative

Task Given

Task #1

Imagine it's been 1 hour since you made the order, but there is no update on order details and you want to ask for an update, what will you do?

All 5 respondents managed to chat with drivers or restaurant successfully even it takes a while. Some respondents need some time to think because there are 2 buttons for chat before they realize one is for the driver, and the other one is for the restaurant. The button for chat and call is too close and small it caused one of the respondents accidentally press the call button instead of chat.

Respondents also find that the chat screen is not convenient because there are 2 chat screens (one for driver, and one for restaurant), and adding driver’s information in the chat room would be great.

Recommendation: There needs improvement regarding size and position of the button due to press by accident issue and the confusion between those two chat buttons. A bigger CTA button with a vertical layout may help the buttons looks bigger without taking another whitespace and change existed button to be an icon-only button as it is very commonly used in today’s applications. Add driver’s information and make a tab chat for the chat room so users can switch the chat easily.

Task #2

Imagine the driver told you that the food is sold-out or the restaurant is closed and don't want to change the order to another food/restaurant, what will you do?

For the cancel task, there are two methods to cancel an order, first is by a cancel button located on the order page, and the second is from the kebab menu (the three dots) located in the chat room.

Respondents can easily cancel an order by the cancel button on the order page because of its conspicuous color (red), but some respondents think the button is too small. There is no issue regarding cancellation reason, cancellation confirmation, and cancellation success page.

However, none of the respondents know they can cancel an order in the chat room. From the beginning until the end of usability testing none of them clicked the kebab menu (the three dots) on the top right because it is not noticeable.

Recommendation: Unlike the chat and call button, the style of the cancel button will be the same just with a different size, because the cancel button should not be too stand out (such as adding an icon) to prevent intimidation of users to cancel. In addition, more price details are provided instead of just the total price. To make the kebab menu noticeable, there is a modal window (popup) to inform respondents are able to cancel or chat with customer service. This modal window only appears when the user opens the chatroom for the first time.

Task #3

Imagine the driver already picked up your food 30 minutes ago and you want to track where is the driver now, how do you do that?

This problem is more likely caused by the back-end where the system failed to maintain real-time tracking, but to make sure there is no other problem for map tracking, UT is needed. All the participants pass this usability testing easily, where they need to open the map first to track the driver, there are 2 ways to open the map.

From 5 participants who joined in this UT, 3 participants opened the map by tapping the map while the other 2 by clicking the Track your driver button. In addition, all the respondents know they can open the map by tapping the map, and by clicking the button. After the map is opened, all the participants know they need to tap the “GPS” button on the right bottom to automatically relocate to the driver’s location. There is no confusion from the respondents so the user interface for map tracking is fine.

Design recommendation

To fix users’ pain points there are several changes implemented based on users' feedback.

The first change is the size of the button of call and chat on order page. The button is made into an icon only because the user knows what the button is without requiring additional information. Another change is the pricing section at the bottom where some users think they’d like to see the full calculation of their order.

Same as order page, the button on map tracking screen also made into icon-only button.

in the chat room, there are 2 chat tabs for driver and restaurant chat on the same page screen so that if the user chats with the driver, they don’t need to go back to the order page and click the restaurant chat button to chat with the restaurant, now they can easily tap the chat tab . Another improvement is the popup window that appears if the user opens a chat room for the first time to make the kebab menu visible.

Overview & problem

Traveloka is Southeast Asia’s leading technology company providing access for users to discover and purchase a wide range of transportation, accommodation, lifestyle activities, and financial services products founded by Ferry Unardi, Derianto Kusuma, and Albert Zhang in 2012. As the Southeast Asia’s lifestyle super app, Traveloka has a comprehensive product portfolio that includes transport booking services such as flight tickets, bus, trains, car rental, airport transfer, as well as access to the largest accommodation inventory in Southeast Asia, including hotels, apartments, guest houses, homestays, resorts, and villas, making Traveloka as a booking platform with widest selections of accommodation and packages.

Since 2015, Traveloka has started to expand to a number of countries in Southeast Asia such as Singapore, Malaysia, Vietnam, Thailand, and the Philippines.

After successfully becoming one of the best flight and hotel booking service in Asia, in 2018 Traveloka created a new feature called Traveloka Eats to compete with other food delivery services such as Gofood and Grabfood. Although this feature has existed since 2018, Traveloka has not been able to make this feature to compete with GoFood and Grabfood because lots of bugs and lack of core features that should exist which makes customer have a bad experience when ordering food.

Challenge

The challenge of this research to explore the problems and bad experience the customers encountered in order to provide the best solution.

Design Thinking

Phase 1: Empathize

Background

I have been using Traveloka to traveling for 3–4 years and I had no bad experience with it. A few months ago I notice that Traveloka offer a feature called “Eats Delivery / Traveloka Eats” which is similar to Grabfood and Gofood with interesting discount vouchers and I tried it once. From my first experience using Traveloka Eats, it took almost 2 hours before my “cold food” arrive, I tried to contact the driver but no response from the driver, and when I want to cancel the order I realize that there is no cancel button and the only way to cancel is by contacting the slow response customer service.

Based on Google Play’s review, there are a lot of people who encounter the same problem as mine. Many users complained about how hard to cancel their order and not updated restaurant list.

saya pesan traveloka eats.. sudah dapat driver yg konfirmasi.. ternyata restoran itu tutup sudah 2 Minggu lebih . kok bisa pesan sementara aplikasi resto di off.. dan payah nya lagi cancel aja susah alias riwet..

Sangat kecewa pesan makanan di traveloka eats, sangat menyulitkan karena saya tidak bs cancel (mau ganti alamat pengiriman).. dari driver jg katanya ga bs cancel padahal motornya lagi mogok

Tolong tombol cancel di TRAVELOKA EATS, karena apabila Resto sudah tutup tp masih menerima pesanan yg di rugikan driver sama customer, Terima kasih

SEMOGA DI BACA. Ini TRAVELOKA EATS, GA BISA DI CANCEL yaa? KESALAHAN KARENA TOKO tutup tp ga diupdate, akhirnya yg dirugikan disini adalah customer & driver. AYOO DONG, CS NYA LAMA JUGA.. PADAHAL TINGGAL DI CANCEL ASTAGAAA.

Existing App

Traveloka Eats is a delivery food application developed in 2018 by PT. Trinusa Travelindo. Traveloka Eats is a feature provided in Traveloka application which offer a lot of discounts and voucher for their users. Below is some features users can use while ordering foods.

Objectives

• Find out customer behavior and pain points when ordering food.
• Understand the problems they currently facing.

Methodology

In depth Interview — Qualitative

Sample Specification

• 18–30 years old.
• Female / male.
• Users who have used Traveloka Eats for more than 1 month.
• Nationwide scale.

Key Information Areas

These key information areas will be used as material to be processed in making a list of questions:

• User behavior when using Traveloka Eats.
• User behavior when trying to cancel an order.

Conducting Research

In this step, I interviewed 5 interviewees who use Traveloka Eats at least once. Because of pandemic, the interview was held by Whatsapp call, Line call and 1 was offline interview.

Phase 2: Define

based on the results of the interviews that have been carried out, the results of the interviews will be summarized into an infinity diagram, customer journey map, and user persona. The purpose of an affinity diagram is to generate, organize, and consolidate information about a complex product, process, issue, or problem.

Affinity diagrams help the group to develop its own system of thinking about a complex issue or problem. A group can use an affinity diagram at any stage where it needs to generate and organize large amounts of information. Below is an affinity diagram that has been made based on the results of the interview.

Customer journey map is an excellent tool for UX designers because it visualizes how a user interacts with a product and allows designers to see a product from a user’s point of view, a customer journey map has an opportunity to become a cornerstone for strategic recommendations.

besides making affinity diagrams and customer journey map, user personas are also created to identify problems encountered and solutions to solve them. A user persona is a fictional character created based on 5 people who have been interviewed which contains bio, pain points, needs, goals, and interests combined. Below is a user persona that has been created based on the results of the interview.

Problems

based on the infinity diagram and user persona that have been made, it can be concluded that there are several problems felt by the user that must be resolved. these problems are:

• There is no button to cancel the order.

baru kali ini nemu ada aplikasi makanan tapi gaada tombol cancelnya, gimana dah

The cancellation process is the most mentioned problem by customers, Traveloka Eats does not let the customers cancel their order by themself. In order to cancel the order, customer need to contact customer service to help the cancellation process. Customer find this process is ineffective and time consuming. Therefore, The new cancellation process is needed to provide the best experience.

• No chat feature in Traveloka Eats.

Kalau mau chat driver atau resto harus make wa, gabisa chat dalam appnya.

Chat feature is one of the most important feature in this app, but sadly Traveloka Eats did not provide chat feature in the application so customers need to contact the driver or restaurant using WhatsApp. Customers may feel uncomfortable because they have to switch applications and feel insecure because privacy is disturbed.

• Not updated map tracking.

Map tidak update, jadi agak susah ngecek dimana lokasi driver berada

Map tracking is a feature to track the driver’s current location, but the map in this application is often not updated in real-time, Users may feel a little disturbed because they can’t track the driver’s location but they feel this is not too problematic because Traveloka Eats provides a “delivery status” feature that allows customers to estimate the food will arrive. Because this problem is more likely caused by back-end so this problem is ignored.

Phase 3: Ideate

Userflow

The next step is ideate which is generate the best idea to solve the most disturbing problem users currently facing, bad cancellation process.

Information Architecture (IA)

Information architecture is a method used to make documentation of all flows, contents, and design requirements of an application.

Wireframe

The next step is wireframing to get a basic idea of the design I was going to work on. Below is the wireframe I made for Traveloka Eats:

UI Design

This is a mid-fidelity or high-fidelity image that describes the choice of design colors, layouts, typography, iconography, visual navigation, and the overall appearance of the designed product. Below is the upgraded design from wireframe:

Design System

Design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Phase 4: Prototype

After the emphasize, define, ideate phase, the next phase is to make a prototype, the purpose of making this prototype is to display an updated design that is equipped with flow and motion design to give the appearance of the application when it is later developed. This prototype includes 10 frames which you can try by clicking the link below:

Prototype Traveloka Eats

Phase 5: Test

The test phase is the last step of the design think method, where you let respondents use and give their opinion about your latest design. The testing method used is Usability testing, this test is carried out offline and online (Zoom with screen shared). To access the full usability test report, you can access via the link below:

Usability Testing Traveloka Eats

Task given

• Imagine it’s been 1 hour since you made the order, but there is no update on order details and you want to ask for an update, what will you do?
• Imagine the driver told you that the food is sold-out or the restaurant is closed and you want to change the order to another food/restaurant, what will you do?
• Imagine the driver already picked up your food 30 minutes ago and you want to track where is the driver now, how do you do that?

Test result

users find the new design easier to use, but there are some designs that users think should be replaced such as chat and call buttons that are too small, chat features that are too complicated. However for the cancel order process according to the user, the cancellation process and design are easy to use.

Recommendation

Lesson Learned

You, UI/UX designer is not the only user

After making my first case study, I realized that users plays a very important role in making a design. this is proven by the feedback given by the user even though previously the UI/UX designer had made the best design updates. Thank you for visiting, hopefully this article can be used as a reference in making other case studies.