Client: Collective Health
My Role: Design Director and Product Manager
Team: 1 Lead Product Designer, 1 Junior Designer, 3 FE Engineers, 1 BE Engineer
Publications: “Gracefully Scaling Web-Applications with Micro-Frontends” / Co-Author
This case study outlines the purpose, approach, and subsequent solution for a new navigation system for our Business Application Platform (nicknamed FALCOR = Frontend Application Library for Centralized Operational Readiness). Driving factors were a desire to increase the platform’s scalability, improve usability, and speed development by providing an out of the box, yet customizable, framework for global navigation components.
Client: Collective Health
My Role: Design Director
Team: 1 Design Manager, 2 Product Designers, 2 Product Managers, 4 Frontend Engineers, 2 Data Engineers
Client: Collective Health
My Role: Design Director
Team: 1 Design Manager, 1 Senior Designer, 2 FE Engineers, 2 BE Engineers, 1 Data Engineering, Product Manager
Related publications: “Collective Health enhances employer suite with expanded healthcare claims analytics” (July 2020)
Client: SFMOMA
My Role: Interaction Design Lead / Project Lead
Team: Ryan Gates (Creative Technologist), Nicole Yeo (Visual Designer), Patrick Ashmun (Client Services)
Client: Method / Public project
My Role: Interaction Design Lead / Project Lead / Workshop Coordinator + Moderator
Team: Daniel Nacamuli (IxD), Tim Meador (Creative Technologist), Flavio Carvalho (Visual + Industrial Design), Ian Bach (IxD)
Awards: FastCo Innovation by Design Award - Finalist
Context
On February 10th, Method hosted a workshop for the IxDA15 Conference at our San Francisco studio. We were challenged as a group to design a workshop that breaks the boundaries of traditional conference workshops while pushing the attendees to expand their thinking beyond typical workplace processes. After initial brainstorming, it was clear we could use this opportunity to solve a set of problems and roadblocks that have inhibited us from designing non-screen based products in our own practice.
One of our Lead Interaction Designers, Daniel Nacamuli, has had prior experiences in his work where he realized the need for a tool that shortens the distance between making, experiencing and reflecting in the design process. Building off of that prior experimental work, a tool was created for the workshop that takes this opportunity and builds a tool that extends the initial prototype into a tool that would allow any designer a mechanism to tighten the design process loop. The team lovingly nicknamed to box ‘Henri’ (Hardware Enhancing a Natural Responsive Interface) which is accompanied by a desktop interface that enables designers to record and play back patterns on the box.
Approach
My role involved guiding the box design through the lens of its application, project management, parts production, workshop development, planning and moderation. We approached the design with an understanding that the focus should fall on the results rather than on the form factor. Henri needed to be a well designed, non-distracting form that showcased the team’s work. The behaviors being tested needed to be fun and instantaneously rewarding. The team accomplished this by using light, sound, color, rotation, and pulse to engage several senses simultaneously.
Defining the workshop was an exercise in framing the tool and its potential application in the real world. It is a device that in concept and practice allows you to visually express an idea so that both you and your teammates can experience it together. Designers no longer have to rely on ideas in abstract terms. Henri shortens the loop between having the idea, experiencing the idea, sharing and reflecting on the idea. This quicker feedback loop allows for much more iteration.
Outcome
The final design of the workshop took six teams of six people and assigned them an ordinary object. Each team was given a fully functioning Henri and instructions on three behaviors that they had to give their household object, building an exciting narrative story to be presented to the entire group at the end of the workshop.
The workshop successfully saw teams work together in a very short amount of time; most participants had never thought of infusing personas into an object. They began to think from a unique perspective where the product needs to communicate more information to a person than just on, off or idle. What if it was angry, sad, or excited? Henri allows those concepts to be tested real-time, and enhance the overall capabilities of both the designer and the product. It helped people literally think outside of the box, and be productive while playing.
Method is working now on next steps for developing the product further. Please refer to method.com and our Facebook and Twitter pages for status changes.
Read full case study
Client: Google
My Role: Interaction Design Lead / Project Lead
Team: Nicole Yeo, Jeremy Juel, Athila Armstrong, Andy Toplisek, Ryan Gates
Project Sketchbook (Process)
Context
Google came to Method to create a strong visual and dynamic user interface design for EnergySense, an energy management tool as part of a broader connected home initiative. Over the course of 8 weeks, we collaborated with the client team to deliver a fully integrated connected home system. Their internal team was then able to develop the application to take into beta testing.
Design Goal
Encourage consumers to adopt more flexible HVAC settings that enabled their home's energy consumption to be optimized against demands on the energy grid.
Approach & Process
We kicked off by diving deep into research findings from testing of the existing design to identify and prioritize key challenges we would address during the project.
Following this, we established a set of experience principles to guide the design of the Energy Sense system, including iconography, interaction patterns such as UI behavior, HVAC system status, feature updates, setting recommendations, and usage notifications. The design team then developed key animations and behaviors for Android and iOS, including the initial loading screen, thermostat mode and temperature changes.
Client Century Link
Role Interaction Design Lead / Project Lead
Additional credits Pete McClelland, Shivanjali Tomar, Nicole Yeo, Paul Valerio
_____________________________________________________________________
In 2013, the mid-sized telecommuncations provider, Century Link, asked Method to design a comprehensive multi-platform (TV, mobile and tablet) UI system, visual language and interaction model for their entertainment service. The project spanned 13 months and included user testing of the proposed designs for the VOD (Video on demand) TV and tablet experience. It also included consultation on content strategy and the development of a long-term product roadmap outlining the progressive deployment of future features such as profile-based viewing, watchlist and a mobile remote experience (as demonstrated in the video).
The project was broken into 3 phases, and began with redesigning the VOD TV, tablet and mobile experience. The foundational visual language and interaction model was then tested, refined and then extended to other areas of the experience including the Linear Guide, Settings and DVR. The work shown here is a summary of the final design that was delivered and currently in development.
Experimental / Public Art
Collaborators Pete McClelland, Peter Synak, Jeremy Juel
Shit Free San Francisco
Working in downtown San Francisco can be exciting, yet also disgusting - especially on Mission at the 5th and 6th street corridors. Our daily walks to and from work almost always involved dodging numerous piles of excrement. Not necessarily the most inspiring way to start the day. The city seems oblivious to the problem so me and some fellow Method-ites decided to take matters into our own hands by plastering posters bringing attention to the situation.
Client Global Lives Project
Role Interaction Design Lead / Project Lead
Additional credits Raphael Grignani, Derek Kim
_____________________________________________________________________
Global Lives is a nonprofit, volunteer-driven effort between filmmakers and translators to create and curate films that capture 24 continuous hours in the life of individuals from around the world, building a video library of those life experiences. Their goal is to cultivate the ethics of global citizenship and cross-cultural empathy for a global audience. Global Lives needed a foundational design system for their web experience including branding. During the 6 week project our team designed a new system architecture, interaction patterns, and visual design for their online video library that would accurately communicate their purpose and intent.
The website had 3 main goals: to educate visitors on Global Lives and ways to participate, to inspire people through rich content and an engaging viewing experience, and communicate the interconnectedness of the global population.
Method created a playful mark and interactive design system using multicolored lines to represent different regions and people across the globe. These lines are able to morph into any shape, highlighting adaptability to context. The result is a dynamic design system able to educate, inspire, and empower those who interact with the Global Lives brand. This concept was extended into the interaction design of the website enhance content presentation, reflect the organization's mission and increase discovery of content to provide an engaging and active online experience.
Client Slumberland Records
Role Design / Creative Direction
_____________________________________________________________________
Album design for Manatee, an indie band located in Oakland, CA. Inspiration for the design came from research on manatee habitats and eating habits. Aside from being extremely endangered, a manatee’s diet consists of various sea vegetables. I decided to reference their favorite food – turtle grass – in the design because the rhythmic flow of the thin blades in water reminded me of the flowing rhythms of guitars in bands such the Smashing Pumpkins and My Bloody Valentine. I also wanted to capture the casual personality of the band members of whom I had the pleasure of getting to know while collaborating on the project. Both are calm with a charming sense of whimsy and simplicity about them. Their music is uptempo and poppy with obvious influences from The Velvet Underground and The Replacements with a clear interplay between melody and noise.
Purchase album at Slumberland Records
Client Open English
Role Interaction Design Lead / Project Lead
Additional credits Mehera O'Brian, Andi Cheung, Dever Thomas
_____________________________________________________________________
Open English is an online platform that helps users learn to speak English fluently. The platform connects students (mostly in Latin America) to native English-speaking teachers and guides them through a curriculum of multimedia content. Open English partnered with Method to create the next generation of their language-learning platform.
Our core challenge was to create an experience that kept users engaged and motivated through a program that might take more than a year to complete. We also wanted to foster a feeling of being part of an learning community. We began by identifying key user needs throughout the learning lifecycle and analyzed best practices in analogous digital experiences. We developed a set of strategies that framed the experience goals and articulated the core design principles—Human, Fun, Achievable.
To keep users motivated, we designed a dashboard experience that pushed "study bundles" of content to users in small, easily digestible units that helps create a sense of achievement and allows users to orient themselves through the various levels of the program. We also incorporated a rewards system of points and badges in order to provide frequent incentives.
Our process was extremely collaborative with multiple work sessions, including paper prototyping and co-creation sessions with stakeholders and their education specialists. Solutions were iterative validated against known pain points with users through review sessions with customer service and support teams. (Access to students was prohibitive due to time and budget.)
Using our designs and strategies as a core part of their new offering, Open English recently raised $43 million in venture capital.
Client Challenge.gov
Role Interaction Design Lead / Project Lead
Additional credits Ryan Lee, Kaisha Hom, Jeremy Juel
_____________________________________________________________________
This project was executed as a response to the Healthcare Design Challenge by Challenge.gov. Our submission won 3rd in the Best Overall Design category.
Overview
Blue Button is a resource for accessing and tracking you and your family's medical information. Records are available via mobile, tablet and web making it easy to reference information anytime, anywhere safely and securely. The web version features a printable 'pocket guide' that folds into a convenient credit card sized booklet which can be carried in a wallet or purse. It contains critical information that medical professionals might need about you during an emergency situation. Lab reports and full medical history can also be printed or downloaded from the web.
Our approach has been guided by a belief that information is only powerful when it is accessible, both in how it is presented and received. This is why we chose to explore the design from a multi-platform perspective starting with mobile then extending it out to tablet and web. The visual design is characterized by a minimal, high-contrast color palate making the content come forward. A restrained use of symbols and other graphics lets typography and scale determine hierarchy reducing clutter and making information easier on the eye.
Client Audible.com
Role Interaction Design Lead / Project Lead
Project Sketchbook (Process)
________________________________________________________________
As part of a larger UI refresh, Audible asked our team to spend 2 weeks rethinking their current browsing and listening experience. Using an established set of UX principles, we developed a few conceptual designs illustrating tactics for evolving the current product experience. The concepts were rooted in key insights gleaned from a consideration of Audible's business objectives as well as, listener needs, behaviors and expectations. Our strategic recommendations included:
Quality, curated merchandising
Signals to customers that the service provider (Audible) has pride, expertise and passion for what they offer their customers. This means having flexible mechanisms in which to visually display and organize books.
Celebrating narrators.
In the world of audiobook, narrators have strong followings. Feature and celebrate them. Provide a place for narrators to cultivate a following and recommend books to the community. Doing so brings people together around common preferences in storytelling style and performance enhancing the overall discovery experience.
Surface the emotion
Surfacing emotional attributes of a story diversifies discovery paths which increases opportunities for serendipity and pleasant surprises throughout the user journey. Diverse discovery keeps content fresh over time which leads to more engaged customers.
Surface the social cadence surrounding a book.
The visual identity of a story isn’t the waveform of sound, it’s the undulation of emotional and social reactions that occur over the course of listening to a story. Providing a way to express this social and emotional dimension conveys more about the story’s character (and the experience of listening to it) than the cover could do alone.
It’s a book club, not a book store
The social exchanges surrounding an Audible book shouldn’t only happen offline. Allow the community to build social circles around the listening experience in which they can experience books together.
Listening is a personal experience
As we listen to stories, those stories become our own each time we encounter a moment that personally touches us. In physical books, we write in the margins or dog ear pages to capture those moments. These marks serve as a reminder of what we learned or experienced in that story. Enable listeners to develop this same type of personal relationship with your audiobooks.
Client Remnant Records
Role Design / Creative Direction
_____________________________________________________________________
The concept for the “The Great Traitor” LP album design was inspired by the samples of shortwave radio station recordings that were used in the album’s title track. The recordings were sampled with permission of The Conet Project which has released a 4CD set of the audio samples. Our goal was to reflect the characteristic and history of these shortwave radio recordings as described by Irdial Records:
"Shortwave Numbers Stations are a method of anonymous, one way communication… These stations use very rigid schedules, and transmit in many different languages, employing male and female voices repeating strings of numbers or phonetic letters day and night, all year round."
We referenced structures of morse, binary and braille codes to create a look and feel that expresses rigidity, anonymity and encryption. I also referenced the designs of Peter Saville for inspiration on form and layout. The sleeves were hand letter-pressed at BlueBarn House on Fabriano paper in gray.
