Re-designing a popular app

Objective

As a multidisciplinary artist, I relish a good challenge, whether it’s transforming photos into artworks using programs like Photoshop or Illustrator over the past 10 years as a photographer/ photo artist, delving into full-stack web development in JavaScript the last 2 years, or professionally expressing myself through dance also for more than a decade in a not so far away past. I’m always drawn to diverse challenges.

What I did

In my role as a UX designer, I was tasked with the following challenge: to re-design a popular app based on heuristic analyses, following the method of Jakob Nielsen, from the Nielsen Norman Group, which consists of 10 principles designed to identify issues with the user experience.

I saw it as a compelling challenge to apply these principles to Ali Express, considering Nielsen’s method was developed within a Western context. Recognizing that cultural differences can significantly impact interface usability, I aimed to explore the consequences of applying these heuristics to a platform with a predominantly Asian user base. My objective has shifted; it’s no longer about re-designing the app, but understanding how a different culture influences an interface. I’ll reserve my findings for another time, given my current lack of experience. Cause I’m just getting into the game, to be honest.

However, I focused on three of the 10 principles related to Ali Express, and I’ll now explain my process in straightforward steps:

Prioritize identified issues

After choosing to examine Ali Express, my next move was to thoroughly understand the app. I visited all pages, took screenshots on my mobile phone, and conducted heuristic analyses, highlighting an “issue” for each of the 10 principles. I then assessed these issues based on severity, where ‘0’ signified no user inconvenience, and ‘4’ indicated significant user inconvenience requiring immediate intervention before the product can be shipped (released).

Considering Ali Express serves a non-Western market, the following three principles had the highest priority for me:

1. Match between system and the real world

Issue: The modal button directing to the “Deals” page lacked clear identification as a button, particularly given the visual complexity of the page with various colors, animations, and text elements.

2.  User control and freedom

Issue: On the “Deals” -page, the title was closely positioned to the back -navigation button, creating confusion about navigating back to the Deals -page, even when already on that page.

3. Help and documentation

Issue: Notably, on the app’s homepage, there was no clear navigation to the FAQ section, visible only after selecting a product. This gave the impression that assistance was only available after a potential purchase attempt.

Ideation

After selecting issues deserving immediate attention, it was time to explore solutions. I employed the crazy 8s-method, generating numerous ideas within 8 minutes for each issue.

1. For the first issue, I arrived at a solution involving adding a stroke and drop shadow to the modal button, enhancing its visibility, along with an accompanying text for guidance

2. Regarding the title proximity issue, I considered two ideas. While initially contemplating a swipe gesture for navigation, I recognized potential issues with inadvertent clicks on links or buttons during the swipe, leading to unintended page changes. Consequently, I proposed a more logical solution: increasing the left padding of the title to center it in the navigation bar, acknowledging the user’s accustomed aesthetic preferences. Although I’m aware that titles on other pages are also left-aligned, which somewhat hinders consistency in the headers.

3. For the missing help-function on the homepage, my solution was straightforward: add a navigation button in the header where space permitted, offering users immediate visibility on where to seek assistance and fostering trust in the platform’s support.

Style tile and Components

After devising the solutions, I recreated the pages in Figma. To simplify the process, I used the Chrome inspection tool to understand the app’s structure, including sections, divs and CSS. This facilitated the creation of components. In doing so, I took into account that the responsive website might differ somewhat from the native app (I use Android).

Hi-fi Designs

Now, I can proceed to develop the high-fidelity designs and implement the proposed solutions. Below, you’ll find the results.

What I’ve Learned

This project in particular served as a valuable lesson, emphasizing the significant influence of the target audience’s culture on app/website design. Additionally, I developed a newfound appreciation for the Ali Express app. Not because I’m an avid shopper, but due to its dynamic nature, constantly evolving with global transactions and an ever-changing product catalog. This demands a well-thought-out design, and I find that aspect particularly appealing. This might also mean that my solutions may not be relevant at all. It also reinforced the understanding that design principles can vary significantly from those advocated by Jakob Nielsen.

Above all, it underscores the paramount importance of knowing your target audience, as it fundamentally shapes the success of your app/ website.