Helping organizations create considerate and desirable digital products, through goal directed and human centered design.
The new Sonos experienced focused on three things: being ruthlessly simple, creating a cool sophistication, and blossoming the sense of love & magic. It’s a product I use every single day, so creating a less than exceptional experience was not an option.
Our long-term partnership with Sonos provided us with an overwhelming amount of research and insight into where they needed to go with their app counterpart. An affinity map helped us pair down information and focus on key themes of design development.
An important part of ruthless simplicity was in clarifying and bolstering specific areas of ownership. With dozens of content partners, the total functionality of the Sonos system is immense, so targetting areas that were unique in this domain was the key to finding focus.
We gave Sonos players out to 24 users with varying experience with Sonos. Having them log journals of their feelings and activities before, during, and after a Sonos experience helped us better understand the user life-cycle, finding key opportunities for engagement.
Striving for simplicity meant identifying and optimizing the user flows for hundreds of different actions and events. In partnership with Robert Reimann, I helped make thousands of possible screens feel like a handful, and dramatically improve the speed to play.
A design experiment prototyping and exploring new ways of engaging with the Sonos Queue. Inspired by Joseph Müller-Brockman, this queue represents a living timeline of the all of the pas music you’ve listened to, and helps intelligently suggest music for the future.
A selection of final versions set for the “simplify” release created clarity and unity in the visual language, and add powerful new interactions that improved the speed to play, enhancing that sense of delight and excitement found through our user research.
I helped Sonos, a wireless hifi home audio company, develop the next evolution of their app, and lay the roadmap and guidelines for the future. Our goals were to simplify key use cases, unify the visuals to reflect the rest of the brand, and amplify the experience with new interactions. All these were to infuse the Sonos app and ecosystem with a new sense of love and magic. I worked with Derek Flynn, who advised on brand direction, and with Robert Reimann (co-author of About Face) on the greater user experience and interaction design of the platform. We ended up simplifying, unifying, and amplifying the feature-set; a much smoother setup process for beginners, a simpler but more expressive navigation, and enhanced interaction with the physical units for expert users.
With the new child profile page, the family associate gains a complete 360 view on the progress or struggles of any individual child. The family advocate can also look at any alerts, upcoming events with the child, the status of her family, and in depth medical & technical forms.
The application was designed responsively, and mobilized for the tablet so family advocates could take their work into the field, dramatically reducing the amount of paperwork needed. The child dashboard, let the social workers focus on what matters.
A week-long intensive research trip to an Acelero center in New Jersey allowed us to get into the hearts and minds of the family advocates. Seeing what they went through every day, how children became spreadsheets, was instrumental in finding our solution.
The software these programs were currently using was completely devoid of humanity. It was complicated and clumsy. The information architecture was dense, and unnavigable. The barrier to entry for helping these children was just too high.
Because of the exceptionally complex forms and processes these social workers needed to complete, creating paper prototypes and running through secnarios with their staff on a weekly basis was instrumental in finding the most simple solution.
While their forms will always be complex, creating a clear, understandable, and intuitive information architecture was the key to simplifying the secretorial process. Saving thousands of valuable hoursin not just paperwork, but training as well.
We developed a visual language that was simple and professional, but with a sense of child-like optimism. Our color palette and typography helped reinforce the message we were communicating through the software, and reflect the personalities of its users.
Acelero, a company that runs Head-Start programs in the U.S., was fed-up with the status quo. Instead of helping children, their current software had family advocates spending over half their time processing forms, in an excel-like interface. I worked with Alec Donovan (graphic designer) and Amanda Happé (art director) using a human-centered agile design process to design and build a tool that would cut secretarial hours of family advocates by 80%. Our humanistic approach to the new user experience not only succeeded in cutting down secretarial hours, but also saw significant improvement in the care for at-risk youth, having brought clarity and understanding to advocates tasks and reporting responsibilities using new tools that automate the process. Acelero has gone on to licence this software with other head-start programs, reaching 10’s of thousands of children every day.
“I like Google” said Glen Hutchins, about the inspiration for the homepage interaction. The page focuses on simplicity and clarity, with real-time AJAX search results, and 9 clear divisions for each of the Center’s ‘keystone’ institutes.
The main challenge in developing this new site was in simplifying it’s 9000+ page flat architecture, and creating a new taxonomy for how web pages were viewed, understood, and navigated. Nine clear areas of ownership relied on chronology and search to keep user paths short.
Defining clear persona-types was instrumental in helping break down the needs and hierarchy of the website. Part research tool, part fundraising platform, part communications tool – our priorities became very clear once these were personas became aligned.
Looking into the trends and analytics of the existing domain helped to define clear objectives for the new site, and created quantifiable goals on which to measure our success and drive iteration of further developments.
Wireframes were agreed on by key stakeholders before further exploring how the visual style would take shape. The homepage was divided into clear areas of ownership, communicating one important news article or feature for each sub-brand.
Flagship pages were designed to have their own presence and impact. The title and key subnavigation overlay a full-screen image. A description scrolls overtop, followed by a reverse-chronological index of articles, events, videos, and journals.
Showing reverse-chronological bite-sized chunks of each article, video, gallery, etc, helped cut more than 99% of the websites architecture, while also providing upfront understanding of links and setting better expectations for users without having to wait for another page load.
The visual design of the Hutchins Center relies on clarity and impact. As you scroll down the page, the H remains static, and the sash changes colour as you scroll through each of the different sub-brands, reflecting their brand colour and creating unity.
To aid those promoters, a contextual social tool was developed that let users select any piece of text or media through the site and instantly share it to their Facebook or Twitter accounts. We also saw this tool used by researchers collaborating with others online.
An omni-present search bar spans the entire width of the navigation, and provides real-time search results to the entire page. As you type, the white bar expands down to reveal the top search results, with the full list just a click away.
Each of the 9000+ pages followed a fluidly responsive design that saw mobile engagement go from nearly 0% to 45% of all visits. Most importantly, our mobile-first approach meant that users didn’t feel overwhelmed by information when they visited the site.
Hutchins Center houses a group of world-leading research institutes and programs, dedicated to the creation of cutting-edge knowledge in the field of African & African American research. With this new centre, the website was set to grow to over 9000 pages. This growth required a completely reinvented information architecture and design in order to create a navigable news source, research repository, and member area. Three other designers lead the branding, while I took ownership over the website with art direction from Amanda Happé. My design dropped the bounce rate from 84% to 14%, with average engagement time increasing from 4 to 10 minutes. This was especially powerful as our traffic grew to 20,000 hits per day.