My previous employer, ReCollect Systems Inc., had received feedback that though their white-labeled mobile apps function great, the designs were outdated. Their competitor had gained momentum in the industry simply because of their modern interface and marketing approaches. I was tasked to do a redesign of what had already been developed.
ROLE & RESPONSIBILITIES
My initial approach for this project was to gather feedback from users in tandem with studying the current user flows.
I setup a Google form survey and was able to find nine testers. Four of the testers were not local, while five were. (Our mobile app users are from all around North America.) The survey asked users to compare their experience between our competitor’s app and a ReCollect app. I also conducted two in-depth interviews with individuals to gain more qualitative data.
After analyzing the feedback, I listed some of our product's main pain points. From there, I began to create mock UI designs, and then translated them into tickets for the mobile development team.
USER FLOWS / JOURNEY MAPS
As previously mentioned, I conducted research on users' experience utilizing both our mobile application and our competitor’s. In addition, I probed the ReCollect Customer Success team for any user feedback they might have encountered. I also mapped out user flows for each application, and added symbols for specific emotions users might have at certain points in their ReCollect mobile app journey.
Further, I sought inspiration by looking through other modern mobile app user interfaces on websites like dribbble, Pinterest, Behance, and Instagram. I also took into consideration how any design changes might affect customers who had additional configurations to their application.
- I didn’t want to reinvent the wheel with what ReCollect already had in place. If I had, it could have led to an abundance of errors and integrations issues across all applications. (ReCollect has over 150+ white-labeled app customers.) So I wanted to come up with fixes that required minor replacements and were new, positive additions, rather than anything that would cause an overhaul of key features or displays.
- Specific pages had very specific pain points, such as the Waste Wizard search page’s overwhelming white space, or the Collection Calendar page's excessive scrolling. These seem initially like solo issues, but because it was a fully-customizable white-labeled application that also allowed for language translations, there were a lot of nuanced problems that could and sometimes would arise with each design change.
I submitted a number of refinement designs that the development team completed.
The images below show a comparison of the UI before and after our changes.
Following that is a condensed list of some of the larger sweeping improvements that were made.
- Body font change
- Hierarchy fixes with font weight, styling, and placement
- Waste Wizard (waste sorting search) allows for a custom hero image
- Immediate search field focus and keyboard controls on the Waste Wizard screen
- Form fields that are required are marked with red asterisk
- Text form field labels are above the input areas rather than in the left column
- Increased form select menu and toggle switch UI affordances
- Touch-based tooltip instructions pop-up on Participation Study map