top of page

Course

Google UX

Role

UI/UX Designer

Duration

Mar - Jun 2022

smartmockups_l414hmln

Google UX project 1

Problem

The current dedicated Amazon application lacks a unique consistency. It requires enhancing both the user experience and user interface. The most important in this work was to provide my vision, and outline of an alternate model. How they will simplify the lives of the customers.

Goal

The current dedicated Amazon application lacks a unique consistency. It requires enhancing both the user experience and user interface. The most important in this work was to provide my vision, and outline of an alternate model. How they will simplify the lives of the customers.

Solution

With this in mind. I built a design system with less complicated elements and colors, conducted usability studies on high-fidelity prototypes, and iterated on designs to come up with the final design.

hi-fi mockups

Header

In the beginning, I started working on header enhancement. Having a hamburger menu for more navigation options is vital, users tend to get confused that it was within the footer instead of the header.

Then I went on and added access to the profile for more convenience and speed for the users to be able to look into their profile details. 

Amazon app header

Footer

First I looked at the current footer design which has no labels below the icons, which means for elderly users or users with disabilities might have a hard time figuring out what each option means.

I used the material design icons throughout the whole design for more recognizability and faster navigation.

Amazon app footer

Cards

Cards are where the user's attention goes first and the design must be easy to process and take in, without any unnecessary elements.

I left some more space in between cards to let the content breathe and made the background all white to present the cards clearly.

Typographic Hierchy

I made sure that each group of cards had a see-all option next to the title of the group.

Titles, paragraphs, and details of the cards had different font weights and colors for hierarchical clarity.

amazon cards
Amazon Home

Visual Hierarchy

For the product details. I rearranged elements like icons, product price, title, location, and share button. for a clear visual hierarchy.

Screenshot_20220605-204507_Amazon Shopping

Reachability

Next, I made sure that all the necessary elements were in reach and visible when opening product details.

Product
SNM mac mockup

Google UX project 2

Problem

Users have a hard time locating desirable stores nearby them and need a way to access the different categories of stores from one space.

Goal

My goal was to create a responsive website where the user will be able to navigate thousands of stores registered on the website and select routes on the map while displaying reviews, categories, working hours, and website to give more details about the store they are looking at.

Overview

My role in this project was to lead the SNM responsive website design, doing user research, conducting interviews, paper, and digital wireframing, prototyping, usability studies, iterating on designs, and responsive design.

Persona - Madison

Problem Statement

Madison is a mom and a product manager who needs a convenient way of locating and selecting routes for desirable stores because as a mom she wants to be able to take her daughter to various stores while spending less time locating them.

User Research - Painpoints

I conducted user interviews, which then I turned into empathy maps, to better understand users' needs and wants. There are several pain points during interacting with online store finders.

  •  Issues with the option to see suggested stores near the users. to help them make a choice faster and easier.

  • Access categories of stores to see which kind of store they might want to visit.

  • Users want the website to locate where they are so it can automatically filter out the available stores nearby.

I solved this by making users take control over their journey, by giving them the ability to see suggested stores near them, a categories section to explore, and an auto-locate feature on the homepage.

User Journey Map

Mapping Madison's user journey revealed how helpful it would be for users to have access to the categories section, nearby feature, and auto-locate option. From the Problem statement, we already know that Madison is a working mother who needs a clear web page with categories, suggested stores nearby her & auto-locate feature, to help balance her work-life better.

User journey map - madison

Paper Sketches and Wireframes

Next, I sketched out the paper wireframes, brainstorming possible designs and looks for the website and after a few iterations, I decided to continue working on the latest designs.

Screen Size Variation(s)

Because users site on a variety of devices I decided to work on the design of additional screen sizes.to make sure that the website would be fully responsive.

Digital Wireframes

Moving from paper to digital wireframes made it easier to understand how the design would help users in solving their problems and pain points.

Screen Size Variation(s)

After additional screen sizes on the wireframes, I started working on polished versions of the digital screen size variations.

low-fi prototype

Low-fidelity Prototype

To create a low fidelity prototype I connected all the screens involved in the primary user flow of finding and selecting a store and adding its route on the map.

High-fidelity Prototype

The hi-fi prototype followed the same user flow as a low-fi prototype and included some design changes after usability studies.

Hi-fi prototype
Save an iguana - ipad mockup

Google UX project 3

Problem

There is not a product useful enough that could help the users who want to contribute to the cause of preserving the endangered species of iguanas.

Goal

Design a dedicated app and responsive website to make people aware of the issue and let them be able to help by donating or volunteering, engaging in the community, and messaging each other regarding the topics.

Overview

My role in this project was to lead the app and responsive website design from conception to delivery. Conducting interviews, paper, and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.

Persona - Mariana

Problem Statement:

Mariana is a Zoo keeper who gets to work with animals every day, she's frustrated that endangerment numbers are getting worse year by year and wants to do something about it. But is unable to since there is not a suitable platform that could make it possible for her to be able to volunteer or donate & engage with the community.

User Research - Painpoints

I utilized the available data sourced from various preservation websites dedicated to endangered iguanas to gain a comprehensive understanding of potential interview inquiries, which subsequently informed the development of targeted questions used during the user interview sessions, facilitating a more thorough exploration of pertinent topics.

The majority of interview participants expressed a profound sense of concern and dismay regarding the plight of the endangered iguanas and their uncertain future, yet they expressed frustration over their inability to actively contribute towards effecting positive change for these vulnerable creatures.

The feedback gathered from comprehensive research clearly indicated that users expressed a high level of openness and willingness to actively engage in efforts to save endangered species, provided they were equipped with convenient access to a user-friendly platform that would make the conservation journey enjoyable and accessible.

User Journey Map

Mapping Mariana's user journey revealed how helpful it would be for users to have access to the donations and volunteering options on the go, news, and blog about conserving iguanas. From the Problem statement, we already know that Mariana is a Zoo keeper who gets to work with animals every day and needs a platform where she would be able to engage with the community, read news and donate/volunteer.

5 User journey map 1
crazy 8s

Ideation - Crazy 8s

I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on Implementing the donation and volunteering features on home screen for easy access.

Digital Wireframes

After ideating and drafting some paper wireframes, I created the initial designs for the Save an iguana app. These designs focus on delivering the main user needs which are abilities to donate and volunteer easily.

galaxy s8 mockup

Get informed section

Donation and volunteer cards

News section

Global navigation

SAI low-fi prototype

Low-fidelity Prototype

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of the community page and donations.

High-fidelity Prototype

The hi-fi prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.

SAI Hi-fi prototype

Responsive designs

The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit the specific user needs of each device and screen size.

Mobile

SAI mobile

Tablet

SAI ipad

Desktop

SAI desktop

Impact:

Users shared that the app made engaging with the community and donating easier and that they are happy contributing to the great cause.

SAI iPad Mini
SAI iPhone 12 Pro

What I Learned:

I learned that it is crucial to make sure that you design for every device and screen size because users can access your products from anywhere and on any device.

Let's Connect

Togodzn 2025© | Product Designer

bottom of page