STUDENT PROJECT 2023
app DESIGN | Illustrator & Adobe XD
ShutterScrub
The goal of this project to create a mobile app prototype solving a problem users have in their daily lives. This was a team project, and we wanted to solve a problem many users have; not knowing how to clean up a mess, by using AI to recognize a photo, scan, written subscription, and audio recognition. My part of this project was the brand matrix, sitemap, personas, icons, screens and interaction mockup.
Brand Matrix & Sitemap
I used a brand matrix to compare different features of several cleaning apps. The comparable apps included Handy House, Matic, Veracity, House Chores, and Tidy. This helped determine what features Shutter Scrub should have.
Based on the brand matrix, I created a sitemap of all the features that would beneficial to include on my app, including the home screen, describing the mess, scanning the mess, taking a photo of the mess, speaking the mess, generating a cleaning task, and a calendar for cleaning tasks.
Personas
I first created a persona to gauge who my audience was and how they would benefit from this app. I found 4 users, ranging from high school students taking on more cleaning responsibility to young adults finding their way to living alone or with their families. This allowed me to see what features were necessary for each user and how they could benefit from the app.
Layout
The entire team sketched logo variations including cleaning aspects, scanning and photo feature, and styles using the app name. I went with shades of blue since users associate blue with cleaning and a fresh feeling. Making the sparkles in a very light blue gave enough contrast for the sparkles to be easily recognized on the phone's home screen.
App Screens
The UI screens were hand drawn in black and white first to create a low-fidelity wireframe of the app's main screens, such as the speak, describe, scan, photo, task generation, and calendar.
Final App Design Choices
We wanted to incorporate a large circle icon for the home screen to replicate the photo feature, since many users recognize this button from a phone camera or the popular app; Snapchat. The bottom navigation icons were kept together so the user knows the difference between recognizing a mess and the cleaning tasks/calendar feature. (Includes icons for speaking, scanning, and describing the user’s mess). The top of the app homepage stays locked throughout every screen, holding the home icon, profile icon, and the app feature the user's utilizing at the time.
When creating the final screens, I used similar colors to the app icon to stay consistent, while making each main feature screen simple with a light background so the user could focus on what was needed for each action.
