All projects

DOOKAN | ECOMMERCE PLATFORM FOR MENA BUSINESSES

My role
Sole UI/UX designer (UI design, Usability testing, Desk research)
Category
Ecommerce platform
DURATION
6 months in separate times
Tools
Figma, Notion, Google docs

Project overview

Background

In the last 5 years ecommerce is thriving in the MENA region and especially Saudi Arabia, and considering the 2030 Saudi vision. There's a huge amount of money and investment for companies and infrastructure which make it promising for high range of businesses planning to show up in MENA region. People are competing to start their small and medium size business online and need usable, affordable and easy way to make it happen.

Problem

There are tons of ways to create an ecommerce website, none of them are easy enough for normal people. they need a local, affordable and easy way to launch their own business online, and what people are frustrated about in this whole thing makes it clear that nobody has solved this equation completely yet.

Goal

The goal was to find the pain points people have in real life and in competitors apps and create usable and accessible user interface that solves their problems.

Process in practice

I used a framework that I think fits the context of me trying to design a huge platform for both mobile and web, Although I'm pretty sure that this work should have been done by a team of designers not just one, But you're not always in the ideal context.

1

Discover & understand

- Discover industry
- Business objective
- KPIs & impact
- Competition analysis
-Analyzing deliverables (Wireframes)
- Early usability testing

2

Ideate & communicate

- Analyzing insights
- User stories
- Communicating

3

Design

- Design System
- Animations & interactions
- High fidelity prototype
- Meet Dookan

4

Validate & improve

- Validated learning
- Conclusion
- Key learnings
- Retrospective
- Next steps

Discover & understand

Understanding market

The type of market that I was digging into was new to me, so I had to discover what I need to know about it including what it actually serves, what technologies(e.g, APIs) available to use, In what sectors it works, and the many contexts it deals with, and finally where the market stands comparing to other regions.

Business objective

The business wanted to take a huge part of this growing pie in the MENA region lastly and firstly in Saudi Arabia by taking the current opportunity that all competitors are just starting and none of them is huge or mature enough. working on serving the main tasks users need in a usable way with local features and services.

KPIs & Impact

The business needed their mobile app and website to reach an impact outperforms all major competitors
- Less bounce rate
- High conversion rate
- Low learning curve

Competition analysis

Where competitors stand in the market and how are they performing? These questions were highly important to answer. finding the gaps they left could make us understand where we should stand and which opportunities we can take. So I started researching and here's what I found
Unstable mobile apps, usability problems, and low rates except for Zid the only one that got good performance numbers but not good mobile app reviews.

Key takeaways

- There's no good enough mobile app experience -Platform wise
- They all have design inconsistencies which leads to user frustrations -User interface
- Two of them suffer from high bounce rate -Business wise
- People are not so satisfied with the current competitors -User experience & usability

Analyzing deliverables (Wireframes)

When I first entered the challenge of designing this product. Part of it was understanding key business knowledge through the iterative meetings I was conducting and through research, but I had to ask about whether there's any artifacts or documents at hand. and there were some wireframes featuring main flows, but there's no product launched and the designer who designed it is gone, I worked on improving it in some ways based on assumptions and then test it with users.

Early usability testing

Objective
Testing early on main flows to answer the question of what is the best way to approach users problems
Participants
- Gender: 3 males
- Age: ranging from 20 to 24 Yrs old
- Duration: 25 mins average
Findings
As this was the main flow where users are supposed to add products, one of the tasks I asked users to conduct, and I got an insight that says 75% has not noticed the upper tabs and that led to drastic change. for more about the findings, View on Notion

Ideate & communicate

How might we (HMW)

People working in this type of products need fast workflow, low learning curve, consistency and accessibility. To make their lives easier we had to think about possibilities of reaching this goal.

Analyzing insights

Ideating different solutions, and based on usability testing I got an insight that 2 of the 3 participants didn't notice the upper tabs, so I chose the 2nd solution, going in this process back and forth helped me in drawing the bigger picture of users' pain points and how to address them the right and usable way.

User stories

Making sense of all the findings and framing all user needs in hierarchical anatomy. I had to think of all the findings that I got to try putting them in one place so I can have a documented artifact to empathize with.

Communicate

There's actually an iterative communication between me and the team, to make sure all of us are aligned with same idea heading towards the same goal with user and business objective in mind.

Design

Putting it all together

Final solutions I reached with the data at hand

Tour guide

Onboarding new users

This type of web apps require sort of experience not so many have. So I put an onboarding experience along with a whole section for learning content and popup menu for support page with a learning flow for everything on the site for non-experts in such type of apps

Analytics

Data to keep you in control

Data is one of the most important tools for any business owner, keeping users updated with latest analytics make them take the right decision based on real data.

Orders

Adding orders in an intuitive way

Orders is the most important flow any sales team run into. That's way offering a mobile fluid interface can lead in more orders accomplished in less time, but at the same time there're fields that we can't miss just to make less steps it. getting both trade-offs at hand is very hard but we managed to get to a results in the middle of that.

UI strategy

This kind of applications is more likely to scale, and it deals with a complex set of data so I had to think of scalable, functional, interactive and pleasing user interface. I was choosing between getting started with design system at first and then start with the UI and building as I go, and obviously chose to build as I go.

Components library

Building components as I go helped me in scaling the project and communicating to developers fast and quick.

Colors

Picking colors suitable to the project, based on its identity and accessibility reasons

Typography

Building a robust typographic scale to design legible fonts.

Typography

Iconography

Icons is the main visual element that triggers, indicates, and visualize what we want the user to know in a visual and interactive way.

Illustrations

Representing the brand and communicating the message is what an illustration do greatly.

Final product

Putting all of this together.

Validate & improve

Validated learning

Depending on the analytics and numbers that will reveal after launching the web app. We'll take an action upon it. to continue building and improving on real contextual data.

Conclusion

Designing website and mobile for an ecommerce platform is highly overwhelming and extensive especially when you're a solo designer, but luckily I had separate timing in a 6 month to do that.

Key learnings

-I learned how to manage a whole big project on my own
-Now I truly know how design systems can shape the whole process of designing
-Usability study is priceless and It's a top priority with low budget

Retrospecives

I guess I could have paid more attention to research, I should have documented the design system in a better way. I could have been more engaged in company policy and be a game changer in some cases. and lastly I could have organized it better than that.
PROCESS –
PROCESS –
PROCESS –
PROCESS –