Free Geek Twin Cities Website Redesign
Spotlighting a unique brand identity to serve diverse users groups.
Summary:
Free Geek Twin Cities sells refurbished technology to two distinct user groups. Their website is nearly impossible to navigate as it straddles the line between e-commerce and information/ explanation. As a UX designer, I had the opportunity to collaborate with them, elevating their brand identity and improving their reach to diverse audiences.
Focus
User Research, Visual Design, Brand Identity, Accessability
Tools Used
Figma, Google Suite, FigJam, Visual Studio Code, HTML, CSS, Bootstrap, Javascript, GitHub, Trello
Client
Free Geek Twin Cities
Timeline
2023, 3 weeks
Role
User Research, Visual Design, Project Management
Meet Free Geek Twin Cities, a refurbished technology non-profit making a difference! They support low-income and immigrant communities, along with retro tech collectors and enthusiasts. Through tech classes, training, and volunteer opportunities, they empower people to enhance their understanding of tech or develop refurbishing skills.
Organization Goals
Refurbish and recycle old tech
Sell discounted and affordable technology to budget conscious and low income customers
Train and educate volunteers
Provide resources and classes to enable customers and community members to become tech literate
Discover
The Free Geek website is currently difficult to navigate and lacks identity. The Solution: A redesigned website that caters to donors, volunteers, and customers while keeping the site true to Free Geek’s brand identity.
Site Audit:
Free Geek Website Before
Generic look
Cluttered nav bar
Text heavy on most pages
Shop process is unclear with a thrift store link AND an online store button
Stakeholder Contact
David Cross: Executive Director
“Free Geek has a ‘fractured identity’ as it serves both low income communities and niche geeks and tech collectors.”
User Research
Can users understand and navigate the current website?
Budget conscious shoppers who are looking to purchase tech are concerned with the quality and trustworthiness of secondhand items and their ability to use the devices once they own them. Currently, the Free Geek website lacks clear communication on warranties of their tech and lacks an engaging and clear identity causing users to question their reliability as a second-hand tech retailer.
Definition Phase
User Persona
Wants:
improve his education and future career prospects
enhance his family’s quality of life with technology
Needs:
an affordable laptop that will last at least as long as he is in school
guidance on system specifications needed for how he will use the laptop
Map of Original Site
Site map goals:
Simplify navigation bar too crowded with links
make possible user tasks obvious
Restructured Site Map
↓
Site Mapping
home page
Low Fidelity Prototyping
online storefront
volunteering
order confirmation
Our team tested our low fidelity prototype by investigating users ability to complete common tasks on the Free Geek site.
Users navigated through the e-commerce section to place a laptop on hold (which they would then pick up in store.)
Users were also asked to go through the process of signing up to volunteer for Free Geek.
User Testing
Iteration
We asked our test users what they would like to see based on the first iteration of our prototype
More calls to action on home page
Show a summary of item on hold when customer is confirming order
Pages need room to breathe
Find higher resolution images
Remember that customers don’t like to read
Clean up the bottom of the homepage
they suggested:
→
→
Final Prototype
Front End Development
Development Software:
Visual Studio Code
Github
Bootstrap
Coding Languages:
HTML
CSS
Javascript
Responsive website featuring home, shop, and volunteer pages
Style Guide
Future Opportunities and Next Steps
Conduct AB Testing
specific design elements (colors, images)
pagination and breadcrumbs
further iterate the shopping process and “holding” an item
Discuss implementing functional e-commerce on website