In 2020, an estimated 15-26 million people in the United States participated in protests over the death of George Floyd. These figures would make the recent protests the largest movement in the country’s history.* This also led to a significant increase in social justice donations.
Despite the surge in charitable contributions, current giving practices lack cohesion. Gravvy aims to revolutionize charitable giving by introducing a comprehensive financial tool. The GravvyGrid, its flagship feature, offers a customizable portfolio for giving, making the process enjoyable, social, accessible, and organized. This project focuses on the redesign and enhancement of The GravvyGrid as a crucial step towards the app's launch.
How Might We redesign the giving portfolio to create a visually appealing and intuitive user experience that inspires creativity and increases engagement?
I was responsible for a complete UX & UI redesign of multiple areas of Gravvy including the shopping portal & Cash-Back plugin, giving portfolio editor, charity search results page, and a robust How it Works section. In addition, I introduced new pages and features including a favoriting mechanism, wallet manager, and a descriptive homepage and about page. I also led the team in the research and redesign of the site's information architecture leading to an improved user experience and assisted in QA planning and testing.
November 2021- Sep 2023 (Launched Sep '23)
Figma, Illustrator, Miro
For this project, I collaborated with an incredible team of software developers, architects, and a UX Writer. We met weekly with our Stakeholders for engineering updates, design critiques, and workshopping sessions.
The solution we came up with has vast visual improvements, however I am not fully satisfied with the end result. I was limited by the business decision to deliver a minimum viable product. With this limitation, my focus was to make smaller UX & UI improvements to the previous design, without implementing a complete overhaul due to time and financial constraints.
The MVP design solution seeks to inspire creativity & engagement and aligns with modern design principles. The editing functionality was improved with a hierarchical model to keep it simple & easy-to-use, drawing on visual imagery rather than the previous excel-like interface. Design methods used during the project included site mapping, persona and journey mapping, competitive analysis, UI/UX design, prototyping and testing solutions.
Success metrics I intend to measure post launch include the following Key Performance Indicators: conversion rate, user retention rate, and user feedback. In addition, measuring time on task and task completion rate on the GravvyGrid editor would be the most valuable for improvement. These KPIs will influence the data-driven decisions we make to continuously improve the user experience and meet the business objectives.
With any project, these factors significantly impact design choices, influencing the features, functionality, and overall development process. As a designer, I must creatively navigate these challenges to ensure the product aligns with business goals and deliver optimal user experiences within given constraints.
Stakeholders urged for a speedy release of the MVP. To adapt, I often presented multiple versions: one with basic features and design that would require the least amount of development time, and another with more advanced features that would enhance the experience, but often requires additional development.
Being a startup yet to launch, we operated under a tight budget to accomplish the necessary tasks.
While the portfolio grid is Gravvy's defining feature, it isn’t the primary revenue stream for the business.
Due to business & budget constraints, I was limited to secondary research for this project. I conducted a competitor analysis prior to the design phase to gain some understanding in market trends, identify gaps, and avoiding redundancy. This analysis served as a valuable tool to inform design decisions and ensure that our product can address user needs.
Gravvy has more than 25 pages, so it was imperative for me to create a sitemap to fully understand the website’s structure and provide a blueprint for how users will navigate and access content. The sitemap served as a visual representation of the entire project's structure, allowing everyone on the team to gain a holistic view of the user journey and content layout. This helped in collaborative decision-making and identifying potential issues early in the design process. We were able to improve navigation by trimming a few pages and reorganizing the hierarchy to one that made more sense for our product. Sitemapping is also a way for me to define the scope of the project before I begin designing a new feature. By outlining all the pages and functionalities, the sitemap helps to ensure that nothing critical is overlooked, and all necessary features are accounted for in the design and development phases. This case study focuses on Gravvy’s main feature, a visual portfolio and editing process, otherwise known as The GravvyGrid. Because this is the main feature, it appears on many pages and therefore has a huge effect on the site as noted by pages highlighted in yellow. Thw sitemap was essential for the next step in my design process: planning user flows.
User personas and journey mapping are critical in UX design as they humanize the target audience, guide decision-making, and inform the design process. Together, they foster empathy, prioritize design decisions, and support iterative improvement, ensuring a user-centric and continuously evolving design approach. In this project, we had mulitple target audiences so a persona was created to summarize each target group.
Gravvy offers 3 main features: a portfolio for giving, Cash-Back shopping, & a one-step tax receipt. Because each of these features are so robust, I broke them up into multiple flows focusing on the specific task at hand. Below is the "Happy Path" flow for a user creating a GravvyGrid (Giving Portfolio). This User Flow enabled me to meticulously outline each step and decision point involved in creating a charitable giving portfolio. By doing so, I ensured that the process was not only seamless but also aligned with the users' goals and expectations. By referencing a User Flow when creating my designs, I am able to anticipate user needs, identify potential pain points, and optimize the journey for efficiency and clarity.
The choice of fidelity is strategic, optimizing resources, facilitating efficient iteration, gathering user feedback, and effectively communicating with stakeholders at different project stages.
I begin with pen & paper for rapid ideation. I use a variety of methods including 5 minute sketching sessions, Crazy 8's and post-it note ideation.
Medium fidelity is a bit more refined, but unpolished. This step is typically where I will get the developers and occasionally stakeholders involved for design critique & feedback sessions.
These are the fully polished, finished designs presented to stakeholders.
The final designs showcase a new grid with modern visual elements and an appealing, user-friendly editing page that allows users to fully customize their giving and share it with the world for ultimate impact.
Though the giving portfolio was the main feature highlighted in this case study, there were many other pages I helped design for Gravvy shown below:
Takeaway & Future Design
The portfolio editor underwent extensive iterations, requiring months of work to align with the existing customization functionality and accommodate various constraints. While the end result may not fully meet my initial expectations, the journey was a valuable learning experience, and I believe the current designs are well-suited for an MVP.
In an ideal scenario without constraints, I envision a more interactive portfolio, akin to photo-editing apps, allowing users to intuitively allocate resources through dragging. This approach would enhance familiarity, engagement, and ease of use.
Looking back, I recognize the importance of prioritizing user research from the start and wish that I had advocated more for it. Gaining insights into user preferences could have significantly benefited the development process, potentially saving time and leading to a more user-centric design.
Looking ahead, I am excited for the next phase of gathering user research and making further iterations on this editing experience for Gravvy.
