App Design - Hebaragi Designs

This was an app project from my interactive media I course and it was designed in Adobe XD. I designed an app inspired by the promotion of zero waste. The goal was to reduce the usage of plastic and take small steps to encourage the production of less waste.

Overview

A clean and modern design focuses on keeping the audience interested in completing
interactive daily challenges. Even if the audience or the user participates in the daily
challenges, they will be educated on the negative effects of plastic and waste on the
environment.

Goal

The app’s overall goal is to educate and inform people about how to create less waste by
designing an interactive app that engages the user and provides awareness of the current
problem with the impact of plastic pollution on the planet.

Features

Zero-waste shopping is new to some areas of the country so the app would have a map to
find zero-waste store locations and bulk shopping locations. There would also be a
community for users to join to give feedback to the app developers and they will be able to
find a community for zero-waste support groups. The app would allow users to share to
different social media platforms to raise more awareness of practicing zero waste. There will
be daily and weekly challenges for users to engage and users will be able to earn badges for
completed challenges. Signing up for an account with the app, the user will have options for
email, Facebook, Apple, and Google. There will also be a resources page for various green tips.

Competitive Analysis

I chose two apps to conduct an analysis of the apps. The goal is was to analyze reviews, study
the overall UI design, observe the display of elements, and the strengths/weaknesses the
apps offer.

Go Zero Waste
◦ This app “helps you buy locally and plastic-free and live a Zero Waste life. Find local
stores and products near you and learn Zero Waste tips at your own pace.”
◦ Provides a map to find stores and products near the user that use less plastic or less
waste
◦ There are challenges and zero-waste tips
◦ User can collaborate to suggest stores in the user’s area to add to the map, get
feedback to improve the app, and help the zero-waste community grow

Zero Waste Goals
◦ This app is more about challenges for environmental sustainability.
◦ This is a feature more commonly used in other listed apps and a feature I’d like to
include in my project as well.

Card Sorting and Flow Chart

I listed elements and pages to test with multiple participants using Optimal Workshop
online. I knew where I wanted the elements, but I also needed confirmation of the
results from the participants. Based on the card sorting results, I created a Flow Chart
in which elements belong on each page in Lucid Chart.

Sketches and Wireframes

During the process of drawing a wireframe, I originally didn’t think I would need many pages
or steps, so I only drew the main pages I wanted the app to have.

In Adobe XD, I began to think about where features would belong and how my pages would
transition. I also began to think about how the user would interact with a feature and how
that feature would react upon being activated.

High-Fidelity Wireframe and Design

I created my high-fidelity wireframe and tested the prototype to get feedback about the
design and user experience. I also created a style tile showing the colors, patterns, and fonts
used for the app.

My goal for the overall design was to give the app a simple, clean design using comfortable colors, appeal to anyone interested in becoming greener, especially a younger audience, and by using comfortable colors, as well as easy usability. In the initial prototype, based on some feedback, there were some unexpected deadends with how I wanted each feature to interact.

Feedback

I conducted Prototype testing via Adobe XD share link with a few participants to get feedback on my overall design. Most participants suggested filling up empty space, to make the icons larger, and adding some type of instruction on how to use the app. The resource element on the collaborate page led to a dead-end, so the page and link were to be revised. The profile page took up too much of the page and caused another dead-end link. One participant suggested changing the Games page into Challenges in order to avoid confusion about being a mobile game app. One participant suggested calling daily challenges weekly challenges to create less stress on the user and to emphasize the tagline “one step at a time.”

Redesign

I minimized the profile page so that it becomes less distracting to users and gave it a more sleek design. The profile page was looking to be an actual page rather than a side tab. I also changed the menu in order to incorporate animation and visual appeal.

I changed the page name from Games to Challenges and I also changed daily to weekly. I also changed the layout of how each challenge was displayed and removed daily puzzles. The new design includes a drop-down animation when each plus button is tapped.

The Collaborate page went through the most redesign process. The new collaborate page buttons have drop shadows to indicate they are clickable buttons and the pop-out tabs will appear on the same page to avoid any dead ends as well as fill up any empty spaces. In the final design, the Collaborate page has a pull-up tab above the menu for social sharing options.