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.
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.
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.
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.
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.