UX / UI

UI case study: Launching TheMarket iOS mobile app in 3 days

Background

The development team has created the mobile app, but it was put on hold due to priority changes, and it was not part of TheMarket launch.

I discovered that TWG (The Warehouse Group) wanted to deploy the mobile app as TheMarket eCommerce site went public.

The priorities have shifted for the development team, including the UX/UI team, and we need to start working on the mobile app in order to meet the deadline in less than a week.

Business goal

To launch the mobile app on the day when TheMarket goes public.

Challenges

  • We have less than a week to launch TheMarket mobile app.
  • Apple rejected the first mobile app submission three days before the due date.
  • The mobile app looks exactly like a copy of our mobile web, which is why it got rejected.

Sample screenshots of TheMarket mobile web version

TheMarket mobile web screenshot 1

TheMarket mobile web screenshot 2

Solution

To come up with UI design solutions (dev ready) that developers can build in a day using the existing components.

Role

  • My role is to come up with UI design solutions to support the development team needs.
  • Collaborate closely with the development team: CTO, software engineers, UX researcher and product owner to meet the requirements.

Three days before TheMarket goes public.

3 days left

After getting rejected, we were briefed on the tasks that we needed to deliver.

My thoughts while brainstorming the ideas

  • I need to generate ideas and design solutions that the developers can quickly implement.
  • Building a new component from scratch is not an option.
  • Existing components that we can re-style.
  • The global components would be ideal for reskinning as it affects most of the screens.

 

Ideas that I came up with:

1. Change the header theme from light to dark to differentiate from the mobile web.

2. Homepage

  • Quick links – Allowing users to explore the contents in the app
  • Retain the banner carousel from the mobile web
  • New stores – Allowing the users to explore the stores in the app since we have many shops signing up and getting their products up and running.
  • Static advertising banners
  • Product banner with product cards

 

Ideas from the team

  • We can show the latest products and newest blog posts on the home screen as we can easily pull them from the database.
  • Instead of having two product category landing screens (See screenshot below), we decided to redirect from screen one to screen two.

TheMarket app category landing screens

The team agreed to:

  • Change the header theme from light to dark
  • Add homepage carousel banner, quick links, new stores, ad banner, latest products and blog posts
  • Having just one product category landing screen

 

I started redesigning the header as it affects globally then. Next is the category landing page with minor UI design tweaks. For the home screen, I used the existing components and started restyling it with a technical approach.

Below the screenshot is the final product that we delivered and submitted to the app store.

TheMarket mobile app screenshot 1

TheMarket mobile app screenshot 2

The last part is to update the screenshots using Adobe XD for the app

TheMarket app asset

2 days left

While waiting for approval, I started conceptualising ideas and preparing variations of UI designs for the home screen and category listing screens just in case they got disapproved.

TheMarket design concepts home screen

TheMarket design concepts category landing screen

1 Day left

Just before the end of the day, we received the confirmation that Apple approved our second submission and is available in the app store. We are ready to go public! Hooray!!

Outcome

Thanks to my technical background and a complete understanding of our technology platform, I came up with design solutions (dev ready) and provided the support needed to launch the mobile app on time.

Things I learned

It is a reality where UX research is not always an integral part of the design process when designing and developing a product. I learned to accept this fact and adapt to the business needs.

Connect With Me

I’m currently looking for a new and exciting role and/ or if you would like to collaborate, catch me at

thedigitalambassador@gmail.com / +64 021 157 2214

Under the sea fish wing