Sonoworld: A Design Process

Every design has a process, and every designer does things slightly different. So to give you an idea how I like to solve problems, I’m going to give a quick walk-through for one of my projects: the Sonoworld website.

Step 1: In the beginning…

In the beginning…it was a mess. The initial website had loads of content crushed haphazard into every available pixel, making it almost impossible to absorb information. The first step involved thoroughly understanding the objectives of the client and their site thereby establishing a clear path of content hierarchy.

Sonoworld: site overview

Sonoworld: before and after

Step 2: Wireframes, Wireframes and More Wireframes

Once we understood what information was most important and specifically, what actions we wanted the user to take, it was time to hash out those flows into wireframes. Lately I've been using proto.io to create simple interactive prototypes that you can throw in front of users early on.

Sonoworld: screenshot from wireframing process

Step 3: The Skin of the Matter

While I was working out the UX flows with the client, I was also cruising through several iterations of ‘style tiles’(I’m a big fan of Samantha Warren’s versatile take on the mood board). These would eventually help in creating an initial UI style guide once a lot of the big UX questions were resolved.

Sonoworld: 'style tiles' sample

Step 4: Some Strategies We Came Up With

Sonoworld was an incredibly heavy site, with several main components each with their own functionality. To help users navigate the site effectively, we used color as a tool to distinguish between major sections.

Sonoworld: Using color to separate major sections within the site

Step 5: Gamification

The Sonoworld site was monetized through something called the “cme” tests (think driver’s ed for sonographers). Because users had a variety of companies through which they could take these tests, it was important that the process be as user friendly as possible. To this end I encouraged the use of gamification in their testing flows. Through design, we were able to make the process not only intuitive but delightful.

Sonoworld: detail showing gamification of Sonoworld's CME testing process