Staples
Built and leveraged Staples's design system to redesign their consumer and business websites.
Project overview
In 2019, Staples revamped their entire online experience with a refreshed brand identity and the new "Sparq" design system to enhance accessibility, responsiveness, and appeal.
To support this year-long project, they partnered with Galaxy Weblinks to establish an offshore design team in India.
I led this team, collaborating with the project manager, senior designers, design leadership, and the engineering team to refresh staples.com (B2C) and staplesadvantage.com (B2B), while also being hands-on with all the designs.
Timeline
~13 months (2019-22)
Role
Product Designer
Team
3 Product Designers (Offshore team)
2 Senior UX Designers (Staples)
1 Project Manager (Staples)
6 Engineers
Tools
Figma
Axure RP
Sketch
Abstract
Platform
Website
Status
Shipped
Contribution
UI design
Design system
Problem context
Staples' original MMX design system included several legacy UI patterns and styles that created various challenges.
Above: staples.com on web and mobile prior to the redesign.
accessibility_new
Accesibility issues
Color contrast ratios, image specifications, overlays, and jarring interactions were major accessibility challenges.
symptoms
Unappealing
Staples introduced a new brand identity to enhance overall appeal, addressing the shortcomings of the original designs.
security_update_warning
Not mobile friendly
As we moved to smaller viewports, from tablets to mobiles, the designs began to break down, making interaction difficult.
Research insights
What led to these staggering numbers?
After reading articles, product reviews, and blogs online, and talking to two active donors and one campaign creator, I identified three main problem areas.
gpp_maybe
Inadequate verification
Minimal verification requirements allowed fraudulent campaigns to exploit emotional causes.
visibility_off
Opaque fund usage
Inadequate fund tracking and reporting made it hard for donors to view their money usage.
public_off
Impact disconnect
Crowdfunding platforms lacked effective tools to show the real-world impact of donations.
Solution: The new design system
As the offshore team designers, we designed, maintained and scaled the new Sparq design system prioritizing accessbility and responsiveness.
Solution: Website overhaul
Using the new design system, we then started revamping Staples's consumer and business websites.
The redesign encompassed over 2,000 screens across eight different viewport sizes.
Axure components
In addition to the Figma designs, we created a separate set of components and prototypes in Axure RP for task-based and A/B testing sessions.
Let's connect!