← back
RECOLLECT MOBILE UI
INTRODUCTION
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
COMPETITION
RECOLLECT
RESEARCH
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.
CHALLENGES
- 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.
SOLUTION
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.
BEFORE
AFTER
PROMINENT IMPROVEMENTS
- 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
CONCLUSIONS
Although I'm satisfied with the majority of the improvements, I feel there could be further changes made on the Collection Calendar screen. Our competitors’ calendar is much more visually appealing, and you can gleam future information at first glance. I’ve created possible future design mocks, but I don’t think it's wise to move forward with them until we’ve gathered user data on these initial changes.
Otherwise, I learned a great deal about communication during the course of this project. ReCollect is a remote-first company, and my role as their Product Designer required more communication than most roles I had ever held prior. Therefore, effective strategies to gather and understand the data was my main focus. However, looking back, I wish my verbal and analytical skills had been as developed then as they are now.
