SugarSync’s responsive corporate site

Filed under: user experience / product design, visual / UI design, web

SugarSync corporate site on an iPad

I’m currently working for a company in San Mateo called SugarSync. They have an existing corporate website, but it wasn’t designed to be properly scaled down for the mobile experience. I was tasked to translate the current desktop site so that it would be a good user experience for those visiting on tablets, handheld devices, or small screens in general.

The audience

I start all my projects by listing out who I’m trying to serve with the design. From past research through surveys & analytics, we know that this site will serve:

  • small business owners
  • people that have mobile as primary internet device
  • those who are looking for a backup solution.

Even though this is a simple convert-to-responsive project, this will help us encounter any ‘gotchas’ that are hidden. Just by listing these out, I know that I’ll need to emphasize that when trying to sell SugarSync on a mobile device, we need to make sure that we emphasize that SugarSync is a service that can be used for organizations that conduct business primarily with mobile devices.

User goals/tasks

Now that we understanding who we’re dealing with, we can list out some design requirements through user goals. A mobile user visiting will likely face these issues:

  • Limited time spent on devices; design needs to be attention grabbing from beginning.
  • Gaining a lead through the sign up form was the end goal, so the lead form should ask only the essentials.
  • All content on the current desktop homepage to be presented.

Of course, all of this was done with project lead in case there are any other constraints in requirements from development or resources.

Form factors

When laying out sites, it’s the usual formula of mocking up sites in these formats:

  1. Tablet screens, landscape orientation
  2. Tablet screens, portrait orientation
  3. Handheld screens, landscape orientation
  4. Handheld screens, portrait orientation

Other mobile restrictions for usability as best practices:

  1. The smallest type to use should be no smaller than 26pt
  2. Tap areas should be no smaller than 50px.

Naturally, I have a small Post-It cheat sheet on my monitor to remind me this.Responsive post-it cheat sheet

The comparison table

The biggest issue we faced was making the comparison table fit. Here’s what it looks like on desktop: comparison table on desktop

Its horizontal format wouldn’t work on smaller browser windows. This required redesigning the layout so that it’s in a vertical list. All the content is there, except now should abide by mobile best practices with large tap areas & not-too-small type.

High-fidelity testing

Back in the old days, to test to see if a layout will work on a mobile device, you’d have to save an image onto that device (by emailing it to yourself, for example), then opening it up on that device. Very inconvenient.

A tool I use frequently when working for mobile is an app called Skala Preview. It’s a desktop app that connects to an iOS app that transmits the current Photoshop project on your device. It’s a way to hold mockups on my iPad to see if elements are too small or discreet. It works on the fly, almost like having your Photoshop window mirrored onto your mobile device.

This is awesome when I’m feeling doubtful that text looks too large for its space.

SugarSync corporate site on an iPhone

Development hand-off

The cool thing about Skala Preview is showing a quick proof of concept. In this case, it’s simply bringing my iPad over to the development team & asking if there are any concerns with building the design. They’ll usually let me know what assets needs to be chopped up as PNG files, or if things can be rendered through CSS.

Usually when I design, I keep the developer in mind. Also going back to user goals: the site needs to be fast. With this in mind, I continued to push for a flat aesthetic, & our developers said that nearly everything on this home page can be rendered with CSS shapes.

It’s live!

If you want to give it a whirl, pull up on your mobile device! If you have any feedback, send it my way & I can look into your suggestions.