Projects
Highlights
Re-launched design.staples.com with a new user interface. The goal was to improve the interface and increase site conversion. The project took 12months to complete,
7 months after going live we have gone from a 11% to 15.9% conversion rate.
check out the before and after of the site
for more details on how we executed the project check below
see work
2016-Present
design.staples.com
UX/UI Site Audit
In mid 2016 i was lucky to get an opportunity to start working under the management of Ellen Johnston. The first assignments i was given was to audit the site, sounds simple but this beast took a shape of its own. I spent days just clicking through each and every product, use cases, entry and exit points into the site to evaluate user experience. I also started making some sense of the UI style system the site was using at the time. Eventually we had to create a larger team and divide responsibilities to tackle this Monster. Checkout some of my initial audit work
see work
Inherited Site Style System
Design.staples.com was a site that was up and running when i joined the team. They had a style guide that was developer driven and nothing was open to change at the time. I had to create layouts/pages using the existing component stack and we quickly realized that the system lacked depth and lacked control. You can see any project done with the old system ended up looking weak and we had more reasons to look at the system holistically rather than adding to the existing one.
see work
Responsive Grid
The website was setup to be fully responsive. However the intial setup was percentage based and went from 2000px wide to 480px. The majority of the components were built to scale up and down drastically on a small shift in screen size resulting in the layout being compromised. After understanding the bones of the site, we decided to create a new grid system that was focused on 4 major breakpoints, the numbers for these came from the analytics data of users visiting the site.
see work
Ui Breakdown for Refresh
The stars aligned and we were given a green light by the CTO to redesign the front end of design.staples.com. The project needed to be broken down into a list of items that needed to be worked on. I took on the task of clicking through each page of the existing site and created buckets like Breakpoints, Pages, Components, Use Cases, Images, Styleguide etc to get a baseline list. Checkout my process pages
see work
Ui Refresh
This project was the most scary and fun thing i had the good fortune to work on.
From start to finish it took us 12 months to complete. After i finalized the list me and my manager discussed through how to tackle the mammoth task. We decided to contract a Gigster designer and had him work on a daily basis with us for about 3 months to set up the initial designs. With a lot of close collaboration we built a new look for the site. The design process was broken into two blocks. In block 1 we did the design, in block 2 we converted our designs to be easily translated into coding standards. Once the designs were complete we worked with the FE Developers to make the styles come to life.
The site relaunched in Feb 2018 and the conversion rate of the site has gone up from 11% to 15.9% average YTD.
see work
2015-16
staples.com
Cart
One of the first assignments after i joined Staples. My role was to create the UI comps after the UX team was done with wireframes. The site had no style guide at that time, so i had to extract the styles off the coded site and recreate them in photoshop. :( yup you read it right, sketch was in its early years and the staples design team back then used photoshop to execute the layouts.
UX | Corey Pontinous • UI | Omer Waiz
see work
Checkout
After completing the Cart i was assigned to work on the Checkout experience in Oct 2015. We did many iterations here and the progress overall was slow. The good news is, by this project i had successfully transitioned into the Sketch workflow. Big help from Daniel Halimariam who mentored me into the fast paced world of ui design. The project eventually finished and we launched the new experience in May 2016.
PM | Amit Agarwal • UX | Basant Tandon • UI | Omer Waiz
see work
Sign-In | Register
My next big project was working on the Sign-In | Register experience for staples. The project had many twists and turns mainly because we were having a tough time getting on one page about how the information should be laid out. We created 3 different options. Option 1 & 2 were heavily directed by the Product and UX teams. Option 3 was my version on UX and UI combined, i took the most relevant things from the given wireframes and made decision on how to present them to the user. We presented all 3 to the company executives and had them tell us which one they wanted to use. They voted for option 3, which is live and being used by our customers.
UX/UI | Omer Waiz
see work
