For my “Digital Experience Design Basics II” course I redesigned the Edmonton WasteWise app. This project’s research phase involved determining the city government’s waste management goals, defining users, analyzing competitor products, and creating a mood board and style guide. For the design phase I redesigned the app’s task flow, created low-fidelity and mid-fidelity designs, before moving on to high-fidelity mockup design.
Before
Below is the original app design, as well as the simple UI flow I made for the task of searching a waste item to determine how to (or whether to) recycle it.
Wireframes
Here are some mid-fidelity wireframes for my new app design. I added an onboarding process to ease users into the app and inform them how it worked so that asking for their address wouldn’t be so jarring. I also wanted the homepage (after onboarding and adding an address) to include most necessary information without requiring the user to tap anywhere else. This included information on what is recyclable on the upcoming bin collection day, as well as the location and hours of the nearest eco station.
Mockups
We used iOS style guidelines for this project. Below you can see the members’ home screen, a search results screen for unspecific results, and a results page for a specific search result. I tried to make the UI clean and consistent (with the exception of using the old WasteWise logo, which I would have redesigned if I had the time!). I used open source icons and illustrations from flaticon.com and freepik.com, respectively, which added a stylistic consistency that I felt was missing from the original app.
