Make a difference with every mile.
- Lead Product Designer
- Adobe XD
- Lucid Charts
- Six months (2020)
- Engineers (2)
- Project Manager
To better understand our users we conducted qualitative research with current and past users of the app. We were able to boil down the users into two main groups: Joiners and Starters. The Joiners segment are users who join existing groups and movements in order to make a difference, Starters are highly-influential trail blazers who create movements and push themselves and others in order to make a difference.
Both groups are motivated by making and seeing tangible impact throughout the world. They are driven by a moral compass to do the right thing, and live for others more than themselves.
I led the efforts to create user flows. I mapped current state and also worked with the team to develop happy paths for the next iteration.
I created sketches of wireframes to quickly garner ideas before designing any screens. This method was used to literally start from scratch, convey ideas to the team, and help develop high-level concepts for app functionality and design.
We learned that the current home screen was too abstract which led to confusion for users; there was no clear directive, and navigation was absent. We took the user flows and end goals, and reworked the home screen to place the most pertinent info for a fundraiser front-and-center. Now, when a user opens the app, they will see the info they care about: their fundraising and mileage progress. New users will be prompted to join a challenge right from the home screen.
From left to right: original screen, multiple iterations, final home screen design.
I was in charge of creating all design aesthetics throughout the app. Guided by some loose brand parameters, I extended the brand look/feel to seamlessly function within the app by creating gradients, choosing related fonts, and art directing imagery that fit the brand ethos.
Before & Afters
Throughout the app, the UI was considerably improved to make screens easier to use and understand for both new and current users. Below is a collection of before & after screens from different parts of the app.
I revamped the home screen to include information useful to someone participating in a fundraiser. By showing key metrics, the user always knows how close they are to their goal. I also added a navigation toolbar to help organize pages and help users get to information quicker.
I made the Challenges page more useful by adding search and filters, and also aligned it with online marketplaces (think: Podcasts app). The conventions here will help users navigate the challenges with more comfort.
I updated the fundraiser page to better display the user’s current campaign metrics. They can see how close they are to their goal, as well as the impact they are making and other data from their fundraiser.