Eco-Snap is an app that helps price-conscious consumers go green one step at a time. It does this by allowing the user to quickly snap a photo of a household item, learn about the availability of eco-friendly alternatives and compare their cost. By focusing on phasing-in green products, the user is not overwhelmed by initial start-up costs.
Client Name: Class Project
Timeframe: Oct 09, 2017 – Nov 17, 2017
Platform: Mobile App
Key Performance Metrics: N/A
Responsibilities: Research, design, and test all UIs related to the project.
Team Members: Various Volunteers
UX Methods: Clickable Wireframes, Rapid Prototyping, Card Sort, Surveys
Tools: Sketch, Illustrator, XD
Today, mobile applications for finding eco-friendly alternatives enable people to search for alternatives via keywords and filters. However, this is still a cumbersome task - there is no fine-grained way to filter specifically what someone wants, for example, a specific price range, or type of product. This app enables users to upload pictures for what they look for in a product, and enables personalized searches according to those photos. This allows users to choose a photo of what they want to search with, and find the most relevant results according to that photo, which allows the user to find the eco-friendly alternatives for whatever product faster.
- Drive users to a website
- Find out what users are looking for
- Sell more products through pre-packaged kits
During the discovery phase I created two personas that would emulate both a small business owner and a student. Both of these personas represent two target audiences that would both be key users of Eco-Snap. Creating the personas taught me their pain points and helped me strategies content across the app.
After making my personas and scenarios, I starting to think about solar panels. This would not be a simple item to break down and itemize. Not to mention, there are countless designs for a roof. This means that the photo-snap feature may recognize it. There are many parts of a house that would have this same problem. On the other hand, my friend showed me an app that could recognize almost any picture. It would give suggestions with similar pictures. It wasn't perfect, but it was close. Due to social media, and crowdsourcing, this could be plausible.
Card Sort and User Flow
After distributing my card sort, made a mind map to sort out information architecture.. From there, I created my user flow. I did not initially present the categories in my card sort. As a result, volunteers made their own. This was very confusing. I had to work through and reverse engineer the product and store options to the initial start screen. Next time I will definitely present category options.
After getting feedback from my user-testing, I realized I need to provide some more detail on my wireframe. I provided three tasks for the user to do but I did not make it clear when the user got the task right. I also need to have the menu on all pages.
After researching, I came up with two different style tiles. The first was made off of my mood board. The second aligns with the Google Material Design specifications.