E-com
Mobile app
O!Market
O!Market
O!Market
E-commerce inside My O! SuperApp ecosystem including B2C online marketplace and C2C ads service
E-commerce inside My O! SuperApp ecosystem including B2C online marketplace and C2C ads service
Situation and task
Situation and task
Initially, O!Market was a C2C ads platform with a slightly emerging B2C direction. But C2C wasn't in demand, the whole service was silently and slowly decaying. So, the business solution was to shift a focus from C2C to B2C. Plenty of stores were willing to become O!Market's partners and showcase their products on the online platform.
Thus, old O!Market required full reconstruction, strategy revision and, of course, redesign. The platform had its own particular designer. I joined the project to help her and to meet the deadline. So, as a part of total redesign I was in charge of profile section, including user's orders, favorites, notifications and reviews.
Initially, O!Market was a C2C ads platform with a slightly emerging B2C direction. But C2C wasn't in demand, the whole service was silently and slowly decaying. So, the business solution was to shift a focus from C2C to B2C. Plenty of stores were willing to become O!Market's partners and showcase their products on the online platform.
Thus, old O!Market required full reconstruction, strategy revision and, of course, redesign. The platform had its own particular designer. I joined the project to help her and to meet the deadline. So, as a part of total redesign I was in charge of profile section, including user's orders, favorites, notifications and reviews.
Challenges
Challenges
O!Market is a webview service inside SuperApp, so it has its features and difficulties. The design system was really outdated, all components were inconvenient in use. There were a lot of files with the screens, that no longer existed in the app, so it was impossible to navigate.
O!Market is a webview service inside SuperApp, so it has its features and difficulties. The design system was really outdated, all components were inconvenient in use. There were a lot of files with the screens, that no longer existed in the app, so it was impossible to navigate.
Figma's tidying up and design system update
Figma's tidying up and design system update
I discussed the plan of revising and reordering all the O!Market files in Figma with its designer. It was crucial to make them up to date.
In the meantime together with the whole design team we updated the SuperApp design system, thus, the O!Market design system was also carefully renovated. We aimed to make components more flexible and convenient in use for both designers and developers.
I discussed the plan of revising and reordering all the O!Market files in Figma with its designer. It was crucial to make them up to date.
In the meantime together with the whole design team we updated the SuperApp design system, thus, the O!Market design system was also carefully renovated. We aimed to make components more flexible and convenient in use for both designers and developers.
Research
Research
I made a big research on marketplace's drawbacks, collected them and presented my study to the product managers. I also did a competitor analysis for it.
Product managers liked my ideas about product changes and put them into backlog. And we actually used some of those ideas later.
I made a big research on marketplace's drawbacks, collected them and presented my study to the product managers. I also did a competitor analysis for it.
Product managers liked my ideas about product changes and put them into backlog. And we actually used some of those ideas later.
New profile and notifications
New profile and notifications
I restructured the old profile section, because it was oriented on C2C, created new components using new design system. divided the section into several subsections: profile settings, favorites, orders, reviews, personalised picks such as "you've watched" and "for you", notifications, FAQ, support, documents.
I restructured the old profile section, because it was oriented on C2C, created new components using new design system. divided the section into several subsections: profile settings, favorites, orders, reviews, personalised picks such as "you've watched" and "for you", notifications, FAQ, support, documents.
Before
Before
Before
After
After
After
Orders
Orders
The whole design of order statuses was shabby and old-fashioned. There were a lot of order statuses and it was difficult for the user to navigate through them. I reduced them from 8 to 4 and illustrated all the steps with minimalistic icons:
— awaiting payment
— in progress
— in transit (for courier delivery) / ready for pick up (for pick up points option)
— order recieved
The whole design of order statuses was shabby and old-fashioned. There were a lot of order statuses and it was difficult for the user to navigate through them. I reduced them from 8 to 4 and illustrated all the steps with minimalistic icons:
— awaiting payment
— in progress
— in transit (for courier delivery) / ready for pick up (for pick up points option)
— order recieved
Before
Before
Before
After
After
After
I also revised order details screen: made confirmation code bigger and the whole screen more consistent and structured.
I also revised order details screen: made confirmation code bigger and the whole screen more consistent and structured.
Before
Before
Before
After
After
After
Favorites
Favorites
Favorites section was also oriented on C2C. I redesigned its empty state: created a cute cat illustration, added CTA leading to the catalog and personalised feed with recommendations for the customer.
Favorites section was also oriented on C2C. I redesigned its empty state: created a cute cat illustration, added CTA leading to the catalog and personalised feed with recommendations for the customer.
Before
Before
Before
After
After
After
Reviews and dark mode
Reviews and dark mode
I designed the reviews section and the flow of a review creation. Most of all, I illustrated all the screens in the dark mode, using the tokens I'd created.
I designed the reviews section and the flow of a review creation. Most of all, I illustrated all the screens in the dark mode, using the tokens I'd created.
Results
Results
The O!Market Design System was revised
I redesigned the profile section where any user could easily check the order status, order details, collect favorites, and edit the settings
I reduced order statuses from 8 to 4, and made it easier to navigate
O!Market Figma files were restructured and renovated
The reviews are still in development
C2C part is still alive, but is not usable
The O!Market Design System was revised
I redesigned the profile section where any user could easily check the order status, order details, collect favorites, and edit the settings
I reduced order statuses from 8 to 4, and made it easier to navigate
O!Market Figma files were restructured and renovated
The reviews are still in development
C2C part is still alive, but is not usable