Project Overview
Summary
The seed stage start-up, Geenees, originated with a mobile app to present their nonprofit marketplace to donors and families in 2019. Since then the company branched their solution into a web app where they found most of its value and revenue. In this time the company has gone through a full brand redesign, however their app remained outdated to the brand standards and in usability. In this case study we look at the process of redesigning.
Timeline:
2 months
My Role:
UX Designer, Visual Designer
My Tools:
Figma, Adobe Suite, Canva
Empathize & Define
Stakeholder Interviews | User Research | Observations
Stakeholder Interviews
In-order to understand the scope of this project I started with a few base interviews with the company's founder, and developers. I categorized my findings from this informal meeting into three buckets; Outcome, Needs/Wants, Desires, and Barriers to Success.
Outcomes:
- Reduce barriers to adoption of the mobile app
- Increase repeat donations
Needs:
- Brand alignment
- Feature discovery / Feature updates in mobile app (credit, cart selection quantities)
- Basic usability improvements
Desires:
- Gamification features to encourage the return of users
Constraints:
- Access to Donors are limited
- The families user base for testing is limited to 2 families
- Budget is low
User Research
The user-base consisted of three categories of users; Donors, Families and Nonprofits.
Demographics:
Nonprofit accounts were now in the process of migrating to their own backend CMS systems. Families relied on the mobile-app exclusively to upload images and create wishlists. Donors browse through available wishlists and make donations to families and nonprofits through the app. Donors also had the option to use the web-app to make donations. Currently 42 percent of the users were donors but less than 10 percent of the donors were returning donors. 2.8 percent of donors were mobile-app users.
User interviews and Survey:
We conducted 20 surveys and 5 user interviews with the Geenees donor pool to understand their needs, desires and barriers to adoption and return.
Survey findings:
User Interview Quotes:
- 89% percent of donors agreed with the statement: I want to donate more this next year.
- 58% percent of donors stated that they would return to the same family to donate again.
- 92% of donors are not confident that they will be able to search and find the same family they donated to previously.
"It was a bit difficult to make that donation, it was a bit clumsy."
Observations & Analysis of User flows
I outlined 6 flows in the current app to analyze:
- Onboarding flow
- Community flow
- Organization flow
- Wishlists flow
- Settings flow
- Cart flow
Information Architecture:
The hierarchy of information was not consistent with the user's needs. The key user need: 'I want to find a family and donate to them' was diluted by other features such as blogs and second hand donations. There is a 'subscribe to a nonprofit' concept that acts as a barrier to finding families. The user must subscribe to Nonprofits, return to their list and then go through and find families. Nonprofits and causes should act as a supporting function of building trust if a user recognizes a nonprofit. Right now it stands as a barrier to the flow.
UI Evaluation
Accessibility:
- Three main colors do not pass the contrast ratio with the surrounding text.
- Navigation UI within the banner does not adequately distinguish itself from the background.
- Default states of selection UI resemble disabled states
Layout:
- Carousel reduces the visibility of causes at the end of the sequence and reduces the amount of space the user has on the screen.
- The presentation of families' stories and wishlists lack visual content.
- Inappropriate buttons and toggles used.
- Reduced efficiency in performing common tasks such as 'add items to a cart' that is available in almost all social retail platforms. Demonstrated low learnability of the app itself.
- Reduced space or emphasis on wishlists that leads to lack of value displayed.
Ideate
User flows | Wireframes | Stakeholder Feedback
Defining the scope
User flows:
On paper we redesigned and re-organized the user flows before mapping out the iterations thoroughly to understand the scope of the designs and the concepts to propose to stakeholders.
Some of the major changes we proposed in the redesign were the following:
- Creating a dashboard that focuses on the wishlists exclusively.
- Restructuring the app navigation.
- Separating the Nonprofits.
Wireframe V1
Version 1 reduced the size of the carousel but did not remove it, as requested by stakeholders.
Simplified the dashboard design to allow filtering for wishlists at the forefront. The carousel would trigger the wishlists based on the cause selected.
Introduced the ability to favourite the wishes that allows users to save things for later.
Wireframe V2
Favourite:
With further iterations we established the favourites page within the dashboard instead of the settings tab. The support a cause tab initiated searches and the My Favourites tab saved wishlists.
Organization flow:
A new flow for the nonprofits was established where users are able to click the nonprofit they prefer and be directed to all the families and wishlists under that umbrella. This reduced the clicks by half and simplified the flow.
Many of the items that were previously on the community page have been recategorized under settings such as second hand donations. Other items were grouped together such as My Profile, Tax Receipts and Granted wishes.
Notifications:
Inorder to add gamification elements, I introduced the idea of notifications. Notifications would encourage users to return to the app once permissions were granted by the user. Notifications can include required account information updates, thank you notes and new families for your favourite Nonprofits.
Unfortunately notifications were not a priority but a great addition so for the MVP we placed this feature on the backburner.
Prototype & Test
Mid-fidelity Prototypes | Hi-fidelty Prototypes | Iterations
Mid-fidelity to Hi-fidelity:
Once the layout and flows were approved and stress-tested for all possibilities and scenarios, we began mid and hi-fidelity prototyping.
Version 1: Filter and number of results were displayed. Container sizes and behaviour was discussed, iconography and styles were explored.
Version 2: Gradient and implementation of brand image were iterated.
Version 3: Significant changes to styling. Containers were revisited and reseized.
A significant UI implementation was the ability to add multiple quantities to one wish. Previously multiple wishes of the same type had to be added as individual wishes which was a reported pain-point for both families and donors. With this UI change families are able to add the total amount of items needed at once and donors are motivated to purchase them efficiently.
The Final Prototype
And with that the final prototype was ready to be handed over for development.
- Repetition of key phrases to drive the brand message and establish an understanding for donors; Support a cause & Grant a wish, instead of standard copy such as; dashboard, filter, view. Repetition maximizes memorability.
- Flexibility and efficiency were the focus of this design. Since the key outcome is to donate a wish, we made sure that this new flow allowed the findability of wishes as well as the ability to save wishes from any point in the flow. We made sure that stories and wishes are in the forefront and one click ability to add to cart is possible.
Final Thoughts
This was an amazing project that I had the opportunity to be a part of. I believe this new version of the app helps Geenees build a strong and cohesive brand for their marketplace solution.
If I had the opportunity to continue on this project post development I would like to learn to track the rate of returning donors to measure the success of the design.
This project had a lot more collaborative aspects to the design from stakeholders, but if given the opportunity and time I would have liked to conduct usability tests with the original app so we would have the ability to compare the efficiency with the new design to iterate on.