iOS App For Ecommerce

E-commerce customer portal Mobile app

Created An Ecommerce Mobile App

My Contributions

Market Research

Competitive Analysis

User Interview

Flow Diagram

Improvements

Wireframes

What

Web-based ecommerce vendor dashboard

When

June 2020 – November 2020
March 2022 – May 2022

Role

Product Designer

Goal

Encourage shoppers to shop locally and support small businesses while fighting against inflation.

Project background

After the lockdown in March 2020, most Canadians started shopping online, which created opportunities for selling online. At the same time, local retail was hit badly, especially for small and medium businesses.

Thanks to the Canadian government, the CANADA DIGITAL ADOPTION PROGRAM was launched in March 2022. Businesses in BC could apply for the grant for up to $2,400 to build their online presence and move to digital. MallToGo provides a new channel for local businesses to polish their online presence.

Market Research

The Claim
The eCommerce industry had been overgrowing since the pandemic hit. The biggest growth at the beginning of 2020 was from March to April, when the pandemic started and quarantine became a socially responsible act.

The problem

When shopping online was a trend in society, local small to medium businesses struggled the most. Shoppers were easily distracted by the information on the internet and shopped from various long distances.

Competitive Analysis

User Interview

I conducted semi-structured interviews with the target audience in person. The interviews were to let the users who had never or barely used these three apps before explore and use them with assigned tasks.

“Amazon ships only within few days, that’s fast!”

“It will be great if I can chat with the seller”

“I like how they(Shop) have so many unique stores I never heard of”

💡Insights

Most female users are sensitive about UI and love discounts.

Non-binary users are more interested in unique products.

Shoppers want to interact with real sellers.

Having images + text combinations for categories helps increase navigation speed.

Users constantly seek a better price that matches their interests or things related to what they have purchased.

Always reminds users what they have done in the apps, including browsing history, and purchase history.

Flow Diagram

High fidelity UI Design

Color palette

Icon

Font

Montserrat

AbBbCcDdEeFfGgHh

  • Designed the icons within a standard grid to ensure they are visually weight balanced.
  • It is also efficient when delivering to front-end developers. They don’t need to adjust the different spaces for each of them in CSS.
  • Icons are exported with an invisible grid at the back.

Hi-fidelity mockups and design decisions

Takeaway 1:

Most female users are sensitive about UI and love discounts.

Takeaway 2:

Non-binary users are more interested in unique products.

Takeaway 3:

Shoppers want to interact with real sellers.

Takeaway 4:

Having images + text combinations for categories helps increase navigation speed.

Takeaway 5:

Users constantly seek a better price that matches their interests or things related to what they have purchased.

Takeaway 6:

Always reminds users what they have done in the apps, including browsing history, purchase history, and even products related to what they have purchased.

Alignment and grid

I picked an 8-point grid for this project and set the margins at 4, 8, 16, 24 depending on the relation of groups.

4

8

16

24

4

8

16

24

Challenges

I faced many challenges during my end-of-school-year internship project. The team was incomplete, and I worked closely with the project manager. I sketched a prototype and continuously tested hypotheses while waiting for a developer to join. I contributed to coding and research simultaneously due to time constraints. We received plenty of feedback for user research on e-commerce, but as a small team in a startup with a tight timeline, we had to prioritize tasks for the beta version.

Summary

Being a designer and a developer at the same time was not as efficient as I expected, particularly on larger projects, even though I only helped write the React Native components. This experience taught me the importance of focusing on UI/UX, which is my passion. Additionally, in the future, I will also pay attention to the tools and technology developers use to better build the bridge between design and development.

My Task:
• Redesigned the exsiting app UI and logo;
• Modified existing front-end code from previous development team;
• Worked with a backend developer on three portals: user app, vendor web-based dashboard and delivery driver app
Client:
Speedy Technology Inc.
Design Tool:
Illustrator, Photoshop, Figma, Principle (for minor animation)
DEVELOPMENT TOOL:
HTML, CSS, React Native, Redux, Xcode, Postgres, MySQL, Visual Studio Code, Git, PHP, NodeJs
Date:
2021
Date:

03/11/2022.

Category: