Case Study
UI/UX
Web Development

AsmaraKu
UI/UX Revamp

Client

AsmaraKu

Date

Sep’17 – Feb’18

Deliverables

Revamped UI and improved UX

Tech/Tools

InVision, Sketch, Shopify

Visit Website

00 Brief Summary

I was the UI/UX designer and front-end developer during my 6-month internship in the number one e-Commerce for intimate products in Indonesia, where I helped to improve the website and brand to provide the best experience for a million+ page views per month traffic which could be potential customers.

01 The Problem, Goal and Task

The main problem is that the website feels too inconsistent in terms of usability and brand personality.

Although pretty vauge, the main goal is to improve the user experience of the platform by focusing on improving usability and the brand's image.

The task is to use prototyping tools, data and analytics, and benchmarking with top e-Commerce companies to iteratively improve the user experience of the website to be very useable on both desktop and mobile.

Note: Previews shown are the desktop version. Feel free to visit the actual website to see the mobile version, which is equally as useable.

02 UX Challenges

One of the biggest obstacle in improving the website’s user experience is the clear lack of brand consistency and clarity.

In the pictures below, we can see the inconsistency of brand colours, element placement, and the lack of readability.

From the home page, accounts page, and cart page itself, you can see the lack of consistency in the elements and the presentation of information.

Different colours (red buttons, purple text), lack of information hierarchy in the accounts page (important information like order history not focused), and a totally different colour for checkout button in the cart page are just some examples of bad usability.

The product page, one of the most important pages that can increase or decrease conversion rates, also lack information hierarchy.

Product price is not big and/or bolded, especially since its discounted. Steps to purchase product takes too many clicks, and instructions to purchase is not clear/not provided. Again, Add to Cart button is in a totally different colour.

03A UX Solutions – Design System

One of the main overall solution I came up with was to create a unified, evolvable design system that can be used in AsmaraKu as well as its sister company OuterBloom.

I designed the Design System on Sketch, where I created modular, editable components, which the developer can refer to easily. I also initiated a revamp on the web style guides and brand colours to make the website's user interface more consistent. Above are just snippets of the relatively huge system. You can view the whole system through here.

Do note that the system is probably updated by the team since I finished my internship, and hence outdated.

I also worked a lot on the product and cart page, initiating a number of UX improvements from the previous version of the pages.

03B UX Solutions – Product Page

For the product page, I fixed the information hierarchy, putting in priority to the product name and price, as well as the percentage of discount. To improve customer experience, products that have video filmed by the production team will be displayed, so that customers are able to see the product better, building trust on the product and potentially increasing conversionr rate.

03C UX Solutions – Cart Page

In the cart page, I also improved information hierarchy, prioritising how the information of the products in the cart page are displayed.

Screen space (or screen real estate, as they call it in UX) is very important in the cart page, thus the decisions I made in removing/adding an element in this page require thorough planning and benchmarking with the top e-Commerces.

To save space, I used different font weights to distinguish information, rather than stacking the product delivery information on top of one another. I also suggested to add visual cues in case customers still could not differentiate the product image and product information, as well as prioritising the product price so customers can be reminded of the savings (if any).

04 The Outcome

At the end of 6 months, I managed to improve the website to make it much more user-friendly, consistent, and even altered the brand personality/image.

In the comparison slider below you can see the huge difference before and after my work has been accomplished during my internship.

Product Page

Cart Page

Home Page

05 Personal Experience

My first UI/UX-cum-front-end "job" turned out to be really rewarding. There were even customers saying they actually managed to browser through the website much easier.

Although it is nice to hear that other people like my work, I feel that the learning experience is much more important for me. To be working on the user experience of an e-commerce startup that is getting easily a million plus page views a month is no easy feat, especially for my first job in the industry, ever.

Why not view the actual thing?

View AsmaraKu.com

View OuterBloom.com

Next Project

FMS Stories Website

View Next Project