InstaShop

UI audit of a popular supermaket app

InstaShop is at the fore-front of apps that enable people to order products from close proximity supermarkets. Lately, these types of apps have become almost indispensble for our day-to-day lives due to the change in movement patterns.

While InstaShop is my app of choice when it comes to quickly order something from the downstairs supermaket, I will explore how the app fails to meet basic design principles. Why it’s an uncohesive, loud, unempathetic and inefficient app.

At the end, I’ll show you a few ways how proper design technique can be applied to deliver a better, faster experience.

Fig 1: Current design.

Uncohesive Design

There can be multiple reasons for which the app looks disjointed. Whether we are talking about scarcity of resources, unexperienced designers lacking formal design training, developers that might be unaware of what they have to build, or perhaps management having design as a low priority, it is clear that current implementation is poor. It shows a lack of understanding of very basic design principles.

Let's break these down, shall we?

Iconography issues

  • Mix of outline and solid icons.
  • Mix of detailed colored and simple monocromatic icons.
  • Icons not at the size designed for (oversized, undersized).
  • Not using the same icon for the same concept (eg: instapoints, cards).
  • Using the same icon for different concepts (eg: email vs. help).
  • Low resolution icons.

Typography

  • The lack of typographic baseline and type scale suffocates the page.
  • Font size variation for the same piece of text makes scanning items hard.
  • Wrong typographic hierarchy. The mix of weights and sizes hide what's imporant and what's secondary.

Color and contrast

The design overwhelms customers with color instead of building upon basic and solid design principles. The poor design hierarchy is hidden by bold colors and lack of information density is solved by stock photography. This unfortunatelly amplifies the visual cacophony.

  • Hard to discern icons on very colorful backgrounds.
  • Light text that creates no contrast and is difficult to read.
  • When you make the design black and white, the eye can’t follow the proper flow of information.
  • Products with generic and reused stock photography creates wrong expectations for customers while adding very little value.

Inconsistent layout and controls

There is no consistency of elements in the app, nor a clear design system to create familiarity for the customer. Controls are not reused; devs are wasting time rebuilding instead of improving.

  • Unstandard forms that increase cognitive load on users.
  • Every page has a different grid structure.
  • Reimplemented OS controls that break convention while adding no improvements.
Fig 2: Different issues exemplified.

Unempathetic Design

Because of poor design decisions, the app has acute accessibility issues. It shows the makers have not given enough thought to customers suffering from fine motion or eyesight issues, demonstrating therefore inconsiderate, selfish design.

  • Close proximity targets that are prone to user error.
  • Forms that break convention and can’t be used with accesibility assistants.
  • Small, low contrast text with no regards for people with poor vision. Even worse, the poor implementation doesn't let users change text size from system preferences.
Fig 3: Wireframes.

My solution

To further exemplify the above issues and to show how straightforward is to fix a lot of the problems, I have wireframed and designed some fixes on the marketplace flow.

These are not groudbreaking changes, but shows that even limited time and effort can do wonders for a project.

  • Increased the information density. The design has less navigation and more content.
  • Simplified and cleaned the layout. The use of a sigle grid on the whole app makes the design look cohesive.
  • Reorganized for scannability. The information is displayed as a list to go through it fast and easy.
  • Improved typography. Fewer font sizes and weights and a strict baseline helps with the visual hierarchy.
  • Reduced clutter. Less stock photography; products have photos only when it adds value.
  • Used default interface controls. Using the OS patterns improves familiarity with the app.
Fig 4: Improved UI.

Conclusion

If you put the effort and attention in creating a design language across an app, it will start looking professional and inviting. An easy way to make an experience enjoyable by customers.

When followed by a cohesive design system and strategy, development will benefit too. Developers can reuse the same components across multiple screens, saving time and reducing brittleness of the implementation.

Please invest in good design. It has both tangible and intangible payoffs for both the business and the customer.