Redesigning the SamCart Website

My process in redesigning samcart.com from research to handoff.

I’m going to walk you through my creative process for redesigning the SamCart website, and provide visuals and resources that I used. :)

01.Research

When I approach a new project or task, my first step is always research. The type of research I conduct ranges based on the project, but in this case it included diving into Google Analytics.

The data we receive here revolves around the demographics of web traffic to samcart.com and how people are using the website. We have access to the pages most visited, the time spent on each page, and a bunch more. Google Analytics also provides a wide array of demographic data. This type of information helps me to consider everyone who is using the website and how they access it. So I keep this data handy while working through the entire process, which help influence design decisions.

Summary Stats from Google Analytics:

• The average age range of our users is 25–44
• Gender is nearly split 50/50
• People use our site mostly during the day time Monday through Thursday
• The majority of our users are in the United States, while others are Canada, United Kingdom, and Australia, making our most used language English
• Usage by device is split almost 80/20 from desktop to mobile, with tablet filling a very small percentage
• The majority of our visits come from Windows machines, with Mac not far behind, then about 20% being made up of iOS and Android
• Most of the people use Chrome as a browser, while Safari coming in second, and Firefox being third
• Our most common screen resolutions people view our site at is 1366x768, 1440x900, 1920x1080, and 1280x800

Resources Used:
https://analytics.google.com

02.Textual Breakdown

The next step for me in a project like this one, is to wrap my head around every page needing to be created. I create a text-based, zero visual, user flow. This will help me to understand what pages are accessible and from what root.

With this being a redesign, I had somewhere to start from, the current website. Between that and working with the project manager, I was able to narrow down pages that didn’t need to exist anymore, and consider new ones that needed to be added.

Resources Used:
https://www.dropbox.com/paper

03.Visual User Map

In order to best communicate to the project manager and help them to visualize the previous step, I laid this user flow into a visual map using Adobe Illustrator.

This step is important to visualize how a user will navigate throughout the website. I used different color shapes as cues to reference where a page will link to another.

04.Wireframes

From here on out, I’m going to only focus on the landing page and not all of the interior pages. This is where we begin to visualize the structure of the elements on this page. Wireframing is an important step in the process because it helps to define the user experience before worrying about the looks of the interface. It’s also a relatively quick way to start seeing the page come to life, and be able to iterate when we change something, since this is done with rough paper sketches.

Each wireframe below represents a different scrolled section on the landing page, with it’s responsive corresponding layout. By sketching both the desktop and mobile views of each section, I can more easily know the breakpoints I want to have when I move into designing a more high-fidelity mockup.

Resources Used:
https://www.uistencils.com/products/responsive-sketch-pad

05.Design

From the wireframes, it’s much easier to move into the design phase. All of the framework is laid out, and now I can focus on putting visual styles to the elements. This is where more attention to detail can take place. In this step is also where I can begin making more decisions on design specs like font size, contrast, precise spacing, and stylistic elements like drop shadows.

I use an app called Contrast to help me know what colors meet WCAG guidelines and what levels of contrast are needed between text and background elements to ensure visually impaired viewers are able to still see the content clearly. In this situation, based on the majority of out traffic, I designed the desktop version first, then made my way down to mobile. This doesn’t mean I gave one more attention than the other, but when optimizing the layout with how elements animate into the view, I wanted to focus on the desktop browser first. Using diagonal backgrounds, and gradients from light to dark, I’m aiming to guide the viewer down the page to the next section or call to action.

As far as my work flow in creating all of the assets, I used Illustrator for creating icons and vector graphics, and used Photoshop for any photography needs. My main tool used to create the UI was Sketch.

Resources Used:
https://www.sketchapp.com/

06.Prototype

When it comes to prototyping, there are a few tools I use to create different prototypes for different reasons.

First, I use InVision as a way to show the project manager the design, and as a way to get feedback. I create a 2x export from Sketch to load into InVision. InVision does a really good job at displaying the export in a browser and conveying what it would look like once is was live. It helps understand how font sizes look and how spacing on the page feels. This prototype is very basically interactive, meaning I will use hot spot links and comments to help guide those who I am showing through the navigation on the site.

Second, I use After Effects as a way to show the project manager my vision for animation on the page, and in the same way to show the development team how elements should move, feel, and be timed. A looping GIF usually does the job to communicate that vision, as well as any programming specs like easing and time.

Resources Used:
https://www.invisionapp.com/
http://www.mtmograph.com/motion

07.Handoff

The last main step in this design work flow! This step comes when the design have been approved and talked through with the development team. There are a couple ways I hand off a project like this.

1. Sketch to Zeplin: Zeplin is a really great tool for designers and developers to use during this phase, and allows a developer to view the project file without the stuff they don’t need and all the stuff they do. We use it here for big and small mockups.
2. Assets: These include anything that development needs that have specific details about them, like image and icon exports. Below is an example of how I deliver these to them.

Resources Used:
https://zeplin.io/

Conclusion

I’d love to talk more about my process in this project or any other design process, and offer anything I can to help you in your processes. Get at me. @dmtors