ui refresh
my role • project lead + ux/ui designer
softwares • sketch, invision, principle, zeplin, jira, google sheets
project • create a new look for the staples print service website
problem statement
in 2016 we started a mammoth project called ui refresh. we were asked by the business to improve the look of the staples print website

some site performance stats

• low traffic
• low account creation
• slow site performance
• conversion rate avg. 8.6 - 9.4%
• no product differentiation

here are some pages from the old site
phase 1 • visioning
before we could start any work we needed to generate a proof of concept. our goal was to get the stakeholders excited about the project. we only designed a few pages to get the teams appetite going, checkout the video we presented to the stakeholders

creative director • ellen johnston
ux designer/project lead • omer waiz
ui designer • aubery johnston

video duration 3 mins
phase 2 • breakdown
once we got approvals on the proof of concept we had to formulate a plan of attack. we decided to breakdown the build so we could identify the amount of work required

we came up with a bunch of questions to set the stage, some critical ones listed below:

• how many total pages need to be designed?
• what are the components being used on the pages?
• how much time will UI design work take?
• how much time will front end development need?
• will there be any back end development required?
• what is the deadline?
• what would be the success criteria?
out of +800 active links we found 32 unique pages
the pages used 84 core responsive components
we committed to completing all design work in 3 months
frontend developers estimated 18-20/2 week sprints to complete the required work
we identified some features will need backend dev work 60-80est. story points
the business wanted to get this out to users by 1/2017
our aim was to increase site conversion by 3 to 5%
phase 3 • planning
the breakdown helped us create an internal timeline, with rigid deliverables in order to complete the project. you can see a snap shot of the sheet we used to keep us in check and make sure we provided the development team all the designs by the time they needed

creative director : ellen johnston
project lead/ui designer : omer waiz
phase 4 • execution
we designed and coded the project in stages, once we had coded the majority of the style components we started building the templates to be used across the site. they were built with cms capabilities, for the marketing team to have control over content updates across the site.

creative director : ellen johnston
project lead/ui designer : omer waiz
ui designers : herson rodregize, mayna chow, denise salvador
fe developers: francesca beckhelling, will kaspryk, vanessa rusu, pablo diaz, amir farzan
project managers: nurgazy budaichiev, sam hafezi
product managers: umair ahmed, harper price-brown, tanay shah
click to open in a new tab
phase 5 • marketing collateral
as we started coding the ui system we also needed to simultaneously create a specification document for the marketing team. the purpose of this was to let the team know details like image size, image safe zones, character counts for all text input fields that get updated frequently by the marketing team etc. we ran every component on the site through this documentation process so that the teams can utilize the design. below are a couple of examples of how we set these up

project lead/ui designer : omer waiz
ui designer : mayna chow
launch • febuary 2018
our new front end experience launched in increments on 5-10%-25% to the public. before we rolled out the new experience we created a roll-back plan if things were to break or if we identified that the site conversion was being affected negatively.

we started with opening the new experience to 5% traffic and saw positive data compared to the old version. a team built of product managers, a ux/ui designer, release team people, analytics and executives reviewed the data on a weekly basis to formulate a go/no go for next steps in the release plan. click the dates below to see our release pattern.
feb 7 2018
feb 14 2018
feb 21 2018
feb 28 2018
feb 28 2018
mar 8 2018
after launching the new experience here are some metrics from the site

• account creation went up by 22%
• site performance went up from 41 to 52
• overall average site conversion went up by 4 to 5 percentage.

the business/executives deemed the project a success.
after • 15.9%
before • 8.6%
site conversion
next project