Industry Project

Our work with Loblaw is a prime example of our ability to work closely with clients to develop custom solutions that are tailored to their unique requirements. Our collaborative approach, combined with our deep technical expertise and commitment to delivering high-quality results, enables us to consistently provide exceptional value to our clients and help them achieve their business objectives.

My Role: UX/ UI designer

Time Frame: 24 Hours

Tools: Figma, Figjam, Slack, Google Meet, Paper, and pencil

Back end:

Node.js

Express.js

MySQL

Front end:

Javascript

React

Sass

Before commencing our project, we held a virtual meeting on Google to facilitate introductions and establish a professional rapport. This initial meeting served as an opportunity for us to get to know each other and build a strong foundation for our future collaboration. By fostering a comfortable and collaborative working environment, we aimed to improve communication and enhance productivity throughout the project lifecycle.

During our initial meeting, we engaged in a thorough discussion of the problem at hand and developed a strategic solution to address it. To ensure effective project management, we designated specific roles and responsibilities among team members based on their skill sets and expertise. Additionally, we created a comprehensive project timeline that outlined each stage of the process and allocated appropriate timeframes to each task. By adopting a collaborative and structured approach, we aimed to ensure successful project outcomes and deliverables.

Problem space

The act of grocery shopping is expanding well beyond the wall of physical grocery stores.

COVID skyrocketed the demand for online grocery experiences and home grocery

delivery.

This consumer trend has continued, however, online grocery shopping still faces barriers:

High-cost expectations
Poor product selection
Lack of flexibility

How might we

Imagine the future of online grocery utilizing innovative digital solutions.

Market Growth

The percentage of Canadians who grocery shop online rose from 5% to 17% between 2016-2020

Demographics

Gen Z and Millennials shop online more than any other generation

55% of Gen Z and 42% of Millennials use their smartphone to order online

Persona

Features

Following extensive research, we began ideating potential features to incorporate into our design solution, with the aim of effectively addressing the identified problem. This process involved brainstorming creative solutions and considering various design elements that could enhance the user experience and achieve project goals. Through careful consideration and collaboration, we were able to develop a comprehensive list of features that align with user needs and project requirements.

Add optmized recommended section

Voice-based shopping

Chosen feature

Given the time constraints set for the project, our team has collectively agreed to prioritize the implementation of a recommended feature that adds value to the user experience. This feature will incorporate a unique approach by providing users with personalized recommendations based on their historical purchasing behavior. Upon checkout, users will be presented with a recommended item that they haven't purchased in a while or an item that is frequently purchased by them. By leveraging this feature, we aim to enhance user engagement and retention on the platform, while also improving the overall shopping experience.

WireFrame

After the ideation phase, our team has decided to move forward with creating wireframes as the next step toward developing the application. This will allow our software engineers to begin coding the app based on a clear visual representation of the design and functionality of the product. By creating wireframes, we can ensure a smooth and efficient development process and minimize the need for extensive revisions or changes down the line.

Brand colors

Primary colors

Colors

After the wireframes were completed, my team and I began our research on color schemes for our next step in the development process, which is creating high-fidelity mockups. By carefully selecting appropriate color palettes, we aim to enhance the user experience and create a cohesive and visually appealing design. Our research will involve considering various factors such as branding guidelines, user preferences, and industry trends. This will ensure that our hi-fi mockups accurately reflect the design goals of the project and effectively communicate the intended message to our users.

For the brand color, we decided to add colors that can represent

professionalism, trustworthiness, and cleanliness

excitement, warmth, and friendliness

health, freshness, and nature

Accent colors

Neutrals colors

Typography

As a team, we chose 3 fonts and decided to go with one font that we thought conveyed the desired personality and characteristics that we want our brand to represent to our target audience.

High Fidelity

We have finalized the design of the application, incorporating the selected color scheme, typography, and features that we believe will provide an optimal solution. These design elements have been carefully considered and tested to ensure they meet the project's objectives and effectively communicate the intended message to users. With the design finalized, we are confident in moving forward with the development phase and are excited to see the project come to fruition.

As UX/UI designers, we have completed our end task of delivering the final design to the developers. We remained available online to address any queries they might have had regarding the design, but we are pleased to report that they were able to handle the implementation of the design as planned. We are excited to witness the project's development and confidence that the design will be effectively translated into the final product, which will meet or exceed the project objectives.

Tech Stack

Front end: Javascript React Sass

Back end: Node.js Express.js MySQL

Database Structure

Scenario 1: Add product to cart

Step 1

Scenarios

Step 2

Scenario 2: Checking out