TechCharities
Nonprofit Redesign
Overview
Background
This was a three week project focused on the redesign of the nonprofit website, TechCharities. As a team, we used the double diamond design thinking model to create and present our prototypes to the company owners. We felt that this was an extremely valuable nonprofit. The need to provide support to those that do not have access to computers has increased as much of education and workplaces have shifted to being remote.
Goal
We found that users struggle to navigate how to donate their used devices on the current TechCharities website. Our goal was to produce a prototype that would allow users to feel confident that their donations were being received and used by the populations in need. This would reduce frustrations of donors and give users peace of mind.
Role and Team
We had a team of four user researchers. Stetson Stokes, Hunter Metcalf, Mikaela Madsen and myself. As a team we conducted user research, ideated, and designed initial iterations of the wireframes. However, the mid and high fidelity designs are my own work.
Definition and Ideation
User Research
Our research focused on the user task of donating old technology. Our objectives were to discover what drives people to donate their tech to the existing website, how users determine where to donate their tech, and what barriers keep donors from using the website. User interviews were conducted over zoom as well as through google surveys. We discovered that accessibility to donating tech was both the users and stakeholders main concern with the website. Below is our affinity diagram to organize user motivations, concerns, and drives.
Brainstorming
Using the “I like, I wish, What if” method, my team brainstormed different features we could prioritize in our design. We then organized these features into a prioritization matrix based on their impact to the design and the difficulty of incorporation. Some high impact features we came up with were a donation button, a FAQ section, and an option to join TechCharities newsletter.
User Flow
Our user flow focused on the donation task with the goal in mind of making the process of giving personal information feel more secure. We decided to cater the donation process to both individuals as well as larger groups and organizations gave an option to make bulk donations.
Competitor Analysis
We conducted a bit of market research to identify TechCharities competitors and evaluate their strengths and weaknesses. We gained a better understanding of how other companies are handling usability.
User Journey and Persona
By creating a personification of our users, we created a journey and story to actualize the user experience of this particular segment of donating computers.
Design
Initial Figma Sketches
The initial desktop wireframes were mapped out as a team. Our focus was to make the Donation process the priority user task. We focuesed on implementing our User Flow as well as high impact - low difficulty ideas from our priority feature matrix. A progress map was included in the initial sketches as well as the first idea of our homepage
Usability Testing
After prototyping our wireframes, we wanted to check in with users to make sure we are on track with our usability goals. Our goal was to give our users a task and see how easy it was for them to complete it. In this case, the user task was to donate their used computer. Feedback was given on the steps to complete the task.
Low Fidelity Iterations
On my own, I created low fidelity prototypes. By implementing feedback from user testing, I went through issues I found with the group’s initial designs. First I found that it was too crowded. There wasn’t a lot of margin room, making the page feel crammed. The scaling was also a bit off - the font was too big, making the spacing along the pages feel uncoordinated. I created different frames for each portion of the home page and separated them out. I made the font smaller and got rid of some extra graphics to give it a cleaner, spacey feel.
I also added a layout the donation steps so that users know where they were in the process and also so that they could see where they were in that process.
Final Iterations
After another round of user testing to weed out issues with the low fidelity prototype, I started implementing the design tile onto the prototypes. I inlcuded images that were already on their website. I designed some fun graphics to give it a unique and consistent feel.
Style Tile
This style tile incorporated the company’s pre-existing images. We came up with a new logo, color scheme, and font. We wanted the feel to be clean, informative, and fun.
Results
The finished product was a web prototype that met user goals of getting through the donation process. After user testing the final prototypes, users reported the set up evoking positive emotions. After presenting to the owners of the site, they claimed that these new designs would help drive engagement. The final design succeeded in elevating the interaction between users and the TechCharity Website.