top of page
Best Buy Foundation Website
Overview
Project Name: Best Buy Foundation Webesite
Time Frame: 4 Months
My Role: Lead UX Designer
Tools: Figma, Miro
Objective: Create a stand alone website for the Best Buy Foundation that will allow for visiting users to easily learn about the foundation, find ways to get involved, and make donations.
The story behind the Best Buy Foundation
The Best Buy Foundation is a private Foundation, separate from but originally established by Best Buy. In 2013 in partnership with The Clubhouse Network, the foundation narrowed its focus and created the Best Buy Teen Tech Center Program. This program is aimed at ptoviding teenagers from underpriveleged communities with training and skills through state of the art technology. As of today there are 50 Teen Tech Center locations across the country. The foundation has awrded over $13 million in grants in 2022 alone, and has impacted more than 1 million people over the last 10 years.
Problem
-
The Best Buy Foundation lacks a stand-alone website that clearly distinguishes it from Best Buy Co Inc. and in doing so protects it from significant legal risk to its tax exempt status.
-
The Foundation does not have a simple, user-friendly way to collect donations. Currently the only ways to donate to the foundation are at the point of purchase at Best Buy, or by sending a check.
Solution
-
Create a brand-aligned, standalone Best Buy Foundation website which meet legal compliance standards, and serves to educate users about the foundation, opportunities for getting involved, and a clear and simple experience for making donations.
Process
Discovery
Align on Needs
The first step in the discovery and planning phase was to reach alignment with the project partners on the basic needs for the website. Through a variety of discussions as well as prioritization exercises, the team reached alignment on the basic needs for the website. Some of the overarching needs that were aligned on included, but were not limited to:
-
Easy navigation organizing functional areas.
-
A responsive platform that visually aligns with Best Buy Foundation branding.
-
A search functionality that includes our functional sites.
-
A donate CTA that appears throughout the site.
-
A blog with regularly updated posts
-
A section laying out the history of the foundation.
Discovery
Competitive Analysis
Once alignment was reached on the basic needs of the site, the next step was to conduct a competitive analysis of similar websites for inspiration and a better understanding of best practices. One site in particular stood out for the quality of the user was the Coach Art website which served as the main source of inspiration for the Best Buy Foundation website's information architecture.
Discovery
Create Site Map
Utilizing the inspiration from the competitive analysis, as well as the basic site needs previously aligned on, the information architecture was laid out through comprehensively through a site map.
Design
Wireframes
With the information architecture laid out, a set of wireframes was created as a first pass in order to give stakeholders an idea of the general vision of the design team for the structure and overall experience of the site. These wireframes would be leveraged to prompt feedback from stakeholders, that would influence the next iteration of designs.
Discovery
Competitive Analysis
Once alignment was reached on the basic needs of the site, the next step was to conduct a competitive analysis of similar websites for inspiration and a better understanding of best practices. One site in particular stood out for the quality of the user was the Coach Art website which served as the main source of inspiration for the Best Buy Foundation website's information architecture.
Design
High Fidelity Designs
Wireframes were shared with project stakeholders, leading to an extensive back and forth discussion around feedback and feasibility. Once the wireframes reached a point of wide consensus across the team, a set of high fidelity designs was created to give a better idea of what a final version of this site could look like and function.
Design
Iterate and Align
The high fidelity designs spurred a back and forth cycle of feedback and iteration. During this period things such as imagery selection, page structure, specific elements and interactions were finalized. After several feedback/iteration cycles were complete, the team finally reached alignment on the design at the targeted date. From here handoff would occur, and the implementation stage would begin.
Handoff
Annotate
With designs finalized, it was imperative to add detailed annotations around interactions, behaviors, and edge cases so as to answer as many potential questions from the development team prior to the implementation process.
Handoff
Development Support
Even though many the level of detail in the annotations left little room for confusion among developers, it was still crucial to maintain regular communication with the development team in orderto ensure the implementation met all of the quality standards outlined by the designs.
Handoff
Launch and Measure
The Best Buy Foundation website was launched on October 11, 2023. Since the launch a variety of metrics are being measured including visits, visits with tab interactions, and completed donations. The latest data spanning October 11 through December 7th has shown a significant increase in donation transactions as well as total amount donated.
With the launch of the Best Buy Foundation website, millions of underprivileged youth across the country have more visibility and receive donations that will provide them with state of the art technology tools and training, that will provide them with lasting skills and opportunities for a better future. To view the finalized design go to www.bestbuyfoundation.org.
bottom of page