Mobile E-Commerce App

I designed a complete mobile e-commerce (marketplace) experience for a large enterprise looking to expand their portfolio. The goal was to design something in-line with the existing brand language while keeping the visuals and experiences comfortable for every day user.

User Research

The project was kicked off by interviewing potential users of our platform and defining user personas and empath maps. Based on learnings from these exercises we defined some key takeaways that we wanted to consider throughout the rest of the design process.

Learnings from the research

Product visibility: Detailed product thumbnails and descriptions, high quality images, prices, easily accessible product reviews and ratings

Seller visibility and control: Credible sellers, detailed seller description, visible seller ratings, well-defined seller guidelines and regulations

Seller stories: Help users stay up to date with new launches, sales, other stock updates etc., Increase seller credibility

Searchability: Prominent search function, set above the fold, highly responsive and functional, the search results should not be set to exact match

Make use of mobile features: Features such as image search, voice activated search etc. Are key differentiating points

Application speed and loading time: Minimum application lags and very short loading time

Navigation patterns: M-commerce applications should always offer easy, thumb-oriented interaction patterns i.e., the app should be designed around the thumb.

Customer service: Highly regulated customer service with the shortest possible response time to complaints and queries

Well-defined return and refund policies: Well-defined and consistent policies, should be visibly placed within product descriptions

Feature Prioritization

Partnering with our product and business stakeholders we conducted workshops to finalize our feature prioritization:

The Design

There are three important aspects of this project worth highlighting apart from the visual design exercise. These decisions helped me build a stronger foundation early on and as the project grew, it made my life easier.

Designing a modular home page at the wireframe stage
Working on the design system since day one of high fidelity design
Everything is an Auto Layout in high fidelity.

Low Fidelity Designs

Designing a modular home page at the wireframe stage

We didn't want a random home page to the webstore. We needed some structure to this (obviously). Another constraint I got from the business was that the homepage needs to be editable by business users to promote different product lines or individual product.

After some brainstorming I came up with the following recommendation of having a repeatable component on the homepage with different elements whose visibility can be triggered on or off to create unique sections in the homepage.

Working on the design system since day one of high fidelity design

I understood that this project's scale was going to make things tricky in the later stage to manage assets. So once I had finalized the wireframes, I started creating components for each element. A gem of a Figma plugin called Pop a component, helped me massively to improve my workflow.

For example, once I had the vertical product card component created and all my screens in the file were using the same component. When I wanted to create a horizontal tile view, I only had to create a variant of the original component, duplicate the screen and swap the instance.

Everything is an Auto Layout in high fidelity

All the screens and components were religiously made exclusively in auto-layout. This meant as I worked on the screens and we were reviewing designs with the stakeholders if I had to add anything new in any part of the screen or modify any component that I made, everything flowed beautifully and I did not had to worry about spacing rules after setting the auto-layout guides for the first time.