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
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.
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.
The last part is to update the screenshots using Adobe XD for the app
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.
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.
