Personal Website
Bridging Tech
Redesigning the Bridging Tech website and improving website experience while upholding Bridging Tech's brand identity
Overview
Bridging Tech is a non-profit that aims to bridge the digital divide by connecting K-12 students in homeless shelters across the US with technology from individual and corporate donors.
​
The main task was to simplify the website content, make the donation process more accessible, and improve their entire website experience.
​
​
​
​
​
​
ROLE & RESPONSIBILITIES
UX Designer
UX Design, User Research
​
Methods and Tools: User Interviews, User Surveys, Wireframes, Hi-Fi Prototypes, Heuristic Evaluation, Usability Tests, Balsamiq, Figma
​
April 2021 - July 2021
Defining the Problem
Our team wanted to understand the user's pain points and improve the user's experience, so we listed UX issues with the current website. While I was navigating through the website, I tried to go through different user flows, like donating money or volunteering as a tutor, to help me specify UX issues.​
​
​
​
​
​
​
Letter casing in header and sub-header are different which could affect readability
The black texts against the background can be hard to read
The number of donated devices is cut off when looking on mobile device
The Mobile site has a lot of large text and scrolling, which can all be resized down
Font styles are inconsistent
Get Involved page should not go under Contact on the navigation bar
Donate buttons at the bottom of the page don't lead to the right links
-
Donate a Device button -> Monetary Donation page
-
Give a Monetary Donation -> GoFundMe page
Understanding our Users
To better understand the user's current or past experiences with the website, we sent out a user survey to gather data on common responses and not make any assumptions when redesigning the website. We also conducted a few user interviews to extract more detailed information about usability issues they faced while using the website.
​
​
Some of the questions asked in the survey:
​
1. How much time do you typically spend on a non-profit's website page? (MC Question)
​
​
2. If you could change on thing about our website, what would it be and why?
3. Did you ever NOT end up donating/volunteering after visiting a non-profit website? If so, why not?
Some of the questions asked in the user interview:
1. What are some potential blockers that will stop you in a donation process?
​
​
2. Try to donate a laptop to Bridging Tech. What do you like about the donation page?
3. What do you not like about the donation page? What features would you have preferred instead?
User Research Summary
We identified and redefined the user flow to make a smooth experience of navigating through the homepage and donating. Based on the user flow and user research, I created some low-fidelity wireframes.
After I created the initial wireframes for the homepage, I received feedback from other designers on which features they liked or could be improved. I made those changes and conducted user testing on wireframes. I used a google form to record their responses and made notes about their navigation through the page. I encouraged the testers to think aloud about the entire page and how they felt about seeing it. Based on user feedback, I made more changes to my homepage wireframes and then proceeded to the final stage of creating the high-fidelity designs.
The first part of the redesigned homepage includes more statistics and facts about the nonprofit. The texts against the background are also easier to read. Since the client wanted the website to prioritize donation, I made the distinction clear with the two buttons - one button for donating a device and one for donating money.
I also wanted the homepage to redirect to other important pages of the website, so I included a section that provides information on volunteering and academic opportunities.
I used Bridging Tech's design system to implement the buttons and components, ensuring that the design and style are consistent across all pages.
Initially, I displayed one testimonial at a time, and the user can click through to view more. However, through talking to users and other designers, I decided to display three testimonials instead as it allows the user to take in more information at once.
Since Bridging Tech plans on using UCraft to host its updated website, I researched the restrictions we may have with the UCraft site. I also looked through UCraft resources, asked customer support about possible features, and understood which components would not be implemented. I took these restrictions into account as I was creating the high-fidelity design of the homepage.
Reflections & Key Takeaways
I had an incredible experience working on this project with five other designers. Everyone had different backgrounds and experiences, so I learned a lot through their design feedback as they offered exciting insights into my designs. In addition, through user research, I understood how to analyze and use research data to validate or reject my assumptions. I was able to turn their feedback into opportunities. If I didn't do user research, I would not have understood what they prioritized or would like to see when donating a device or donating money.