Frog Design Research

The following was a case study on Frog Design's process. I had a wonderful experience interviewing and researching this well respected international firm. A presentation accompanied the paper and chart.

Kelsey Boyce
Design Case Studies 08
Frog Design Case Study

Firm Description
Frog Design is a universal design company. They call themselves a global innovation firm. Frog began with industrial design, but have now changed to include web-design, corporate identity design, software design, and environmental display design. Founded in 1969, Frog is headquartered in San Francisco, with studios in Austin, New York, San Jose, Seattle, Milan, Amsterdam, Stuttgart, and Shanghai. Their cross-disciplinary design process shows valuable consumer and market insights, and creates long-lasting solutions that span decades. Frog consists of more than 400 designers, researchers, technologists, product managers, strategists, and analysts.

Frog is most known for their research and process in design. With their always-innovative approaches to a problem, they create an environment for designs that last for generations. Frog has even trademarked their approach: frogThink™. They define this as:

Re-Thinking Thinking
frogThink™ is a framework for solving both business and creative challenges by replacing traditional brainstorming with collaborative, original and lateral thinking. It rejects the conventional linear thinking that has been espoused by traditional ad agencies for decades, transforming one-dimensional patterns into leaping ones.

frogThink™ eliminates the countless wasted hours typically spent in brainstorming sessions. frogThinkers learn instead how to summon creativity on demand. It's another tool that reinforces frog's belief in balancing left- and right-brain thinking.

The brain organizes input into routine patterns. frogThink™ participants break out of these patterns to think laterally by learning to:

• recognize patterns of perception
• select and define areas of focus, desired output and objectives
• challenge current ways of thinking, features, characteristics and procedures
• create alternatives through fixed point references, provocation and random entry
• collect creative results cultivated through the frogThink™ tool and harvest them using a clearly defined focus
• address constraints and tailor the creative idea into a realistic concept


This process of formulated brainstorming activities relates to the Kelly article, which supports brainstorming to begin the design process. But Frog calls for a certain structure to make the brainstorm the most beneficial, like doing research before coming to the table. Although some would argue that having a formula for brainstorming defeats the purpose and could affect an open forum negatively, both Frog and Kelly agree with structured brainstorms to get the most out of them (Kelly).

The Seattle firm specializes in interaction and web design, not a surprise since it is located near Microsoft headquarters and a Google campus. One of the designers on the team based at the Seattle office located at 5th and Pine, Marieke Watson, was lead to work with Frog after her work with Microsoft. Originally from the Netherlands, she graduated with a degree equivalent to mechanical engineering and industrial design. The following case study information is a compilation of information from various websites, and Marieke.

Client Description
American Broadcasting Company, ABC, is one of the largest TV networks in the world. Based in New York City, the company started in 1943 and reaches millions of viewers. ABC reaches its clients in more mediums than just television. Wide spread magazine and billboard campaigns advertise the shows it broadcasts, in addition to the use of the Internet. ABC launched the first website with full episodes of shows available over the Internet. They received an Emmy for Outstanding Achievement for providing the service to its users.

ABC, owned by Disney, not only knew of Frog’s long-standing reputation as a dependable, successful design company, but Frog had done prior work with Disney on children’s electronics and also a Disneyland scannable check-card. Frog’s interaction design has an upheld standard of good quality, e.g., boosting sales with Dell’s new website by increasing revenue by 50 percent in the first two months, as well as creating the HP Touchsmart computer, another innovative design. All of these factors lead the client to Frog Design.

Project Proposal
ABC’s website has been in existence and received an Emmy for outstanding achievement for the services it provides to the viewers. The full episode player provides full episodes of television shows that have previously been aired, at any time via the Internet. It was the first of its kind and after its initial success, other networks followed; they often replicated the format of the website.

The problem with the website that ABC was looking to solve, was that the current design did not include what they wanted to provide to their viewers on the Internet. In its original form, the website provided only a few of the top rated shows on ABC, and was a completely separate entity than the other ABC websites. The site lacked the amount of content that was needed in order to fulfill the wants of viewers. ABC wanted the website to encompass all shows, in addition to adding show related content, like actor biographies and show websites.

The website needed to inspire users to explore new shows and become viewers of those shows as well. The full episode player also lacked the essence of the website as an experience, rather than simply a website. With TV-watching society becoming exposed to a You-tube culture, they wanted to draw from some of the characteristics of interaction of that experience, while keeping it sophisticated. ABC’s full episode website was not to be seen as a You-tube experience, but rather, a polished experience that once again set itself above the other networks like it had done in the past. Due to the prior feedback and awards, and the gained interest in online advertising, the project was worth the investment. Stakes were high for the redesign of the existing website; it reaches many people and change is difficult to implement in a pleasing way. They began the process to solve this set of problems, with a drive to create scalability, and discoverability in a refined approach.
Firm Process
Frog design is renowned for their emphasis on research and the design process within their projects. Each problem is approached in a fitting matter, but with a three-step model: Discover, Design, and Deliver.

Each team is formed of 4-5 people, each having a certain set of skills, so all members can work efficiently on the task concurrently. This team is made of designers, researchers, strategists, and a project manager to handle the order of things with the project and the client. The first two weeks are filled with intense research. Understanding the client’s needs, understanding where the project is coming from, and the standing of the existing market are included in this research. Sometimes outside sources are used in this stage in addition to internal research. Frog is also known for implementing out-of-the-box, hands-on research in this stage; e.g. visiting a toy store to delve further into a subject.

The second step in Frog’s design process is the design portion. This is an iterative process with continued analysis and user testing. The information found becomes an applied tangible form, and various checkpoints with the client are included. In the beginning of this step, a large amount of design concepts are created in an unrefined form, usually each solving different problems in different formats. Ideas are narrowed down with further testing, some being combined with others. In the end a client approved, successful product or concept is created.

The final step in Frog’s process is to deliver. The delivery of the final product is key to ensure its implementation is accurate and applied as intended. The firm follows through to the very end with each product to verify the quality. When a firm is committed to the final product it shows not only dedication to the product, but also dedication to good business intentions. Although, this step has little to do with design, it is very important.
Product Process
This project also had a team of 4-5 members, researchers, a project manager, and included graphic designers and those specializing in interaction design. Marieke dealt with the interaction design portion of the project. For the first two weeks, Marieke and her team researched the previous site and influences from the outside as well. They looked at Youtube.com and Hulu.com to see how people interact with those sites, taking natural tendencies of peoples interactions with the sites and implementing them in a more refined manner to the ABC site. Within this step, Frog also worked with MOVE, a technology company that provided the video the site used. Frog realized that for the site to be used (and re-used) it must be functional and therefore Frog demanded a high-quality, no-skip video feed. Using ABC as an intermediary, Frog discussed this need with MOVE. The company complied; this gave Frog the high quality feed they needed.

With the ABC full-episode player, various concepts were presented in the initial stage. The process needed to be an experience, so one of the ideas was to have series of partially transparent pages that you travel through, to make the user feel like they are moving through the website in a selective process. In the initially implemented, and awarded design, the carousel concept was used. ABC held onto this idea and concept, but the other networks used this visualization as well. Frog wanted to steer away from this design, due to its association with itunes, and the common standard. Frog made mock-ups of various organizational methods for the user to travel through the site; horizontal, vertical, rotating, transparent; each a trial in which visualization would be the most easily understood.

To create an experience they wanted to incorporate motion, however did not want to use the carousel apparatus for this effect. The designers headed in a direction of using transparent levels of the process to project the user further into the site visually as they make those decisions manually. Marieke said that providing visual examples to the others working on the project and the client are key to expressing your ideas; pictures, then developed visuals, then show movement, then provide sample experiences to help convey the overall idea. The designers themselves had explained to other designers in the firm what they were doing, but only had pictures of the design in flat forms. Not until they made a Flash demonstration did the other designers understand the experience they were shooting for. The demo was created to display their progress to the client as a checkpoint in the process, but also to determine key factors in the interaction design and visual communication. The demonstration created the experience, showing the transitions of things, at what point screens and objects switch when clicked, how fast the transitions happened, how fast the screen flies forward, and how the transparencies work.

They took the size of the interface into account as well. Not only is the site used on computers, but also hand-held media players, like the iphone, as well as large screen HDTVs in family living rooms. The size components of the interaction design had to span the user size differences. User differences also included the option of using the HD video or the regular feed. In the previous design, the navigation of the site made this option a difficult one to find. The new website created an easy-to-use option that made the choice apparent.

In addition to the said factors of design, Frog also worked on the goal to fit all of the content, in an understandable way. ABC wanted the shows and episodes to scroll on the bottom of the window horizontally, but Frog felt that people’s interpretation of scrolling content on the bottom horizontally is interpreted as “related content”, like actor bios and show times; but scrolling vertically indicated the industry norm of “more content”. Through various checkpoints this point was discussed and the design resulted with “related content” on the bottom horizontal axis, and a scroll vertically on the right of the widow with the option of different episodes. This design coheres to current web-design standards and human tech-intuition.

Stakeholders
The stakeholders involved in this design include the website itself, the network shows involved, the advertisers, the viewers and users of the website, and also Frog and their ability to execute (for future clients). The website and ABC each depended upon this redesign to be successful to continue the expectations it had already set. ABC needed this feature for further advertisement sales and the use of it as a way to gain brand loyalty in viewers. With the dependability to not have to miss any episode of a show if you have Internet access, then the likelihood of viewers to be loyal to a show grows. This part affects the advertisers on the website, (if successful, more viewers, more sales), as well as the advertisers that advertise during the aired version, (by creating loyal viewership, they will watch the aired versions also). Frog is its own stakeholder in this situation also. The success of each design it approaches leaves an impression of the success of the firm and could affect the possibility of new clients. Each of these stakeholders were depending upon the successful redesign of the website to provide better services than it had currently.

Outcome
The outcome of this design does not have any official results thus far that Frog has received. No reviews have been written yet, but the site has been implemented. It accomplished what it sought to solve: more content, in an interactive, experiential manner, providing incentive to explore the site’s content and therefore create a longer overall exposure in a sophisticated way. It created exposure to the specific show sought by the user, as well as all of the show’s details to make people become more involved and develop a brand loyalty. The website created scalability, providing room for ABC to grow. It made content easily findable, providing discoverability in addition to its other benefits. An overall success in the eyes of the users and ABC network as well.

Analysis
Quick paced and fluid
A drawback from this design may be that it only advanced itself in a form to create scalabilty and more space for growth. But as discussed previously, growth does not just occur in content but also in usability. With an ever-changing liquid-like advancing user standard, one must anticipate a constant morphing and adjusting for future use. Perhaps Frog’s connection to this site should require more than just the re-design, but also a yearly check-back or update upon the necessary changes and trends that had stepped forward. With a system like that in place, a company would secure its standings in the industry.


The change of web use
When the website episode player was originally introduced, online TV show watching was not normal practice. The only available options, if you missed an episode, or season, would be to get a bootleg version, which would be poor quality. For this reason, many did not partake. The viewer simply couldn’t enjoy a show the way they could in their own living room. It was not an experience—it was a fuzzy feed with delayed sound tracking. People had Napster, and the like for full movies at DVD quality, but no TV show from the night before was at the quality one would prefer.

ABC changed this. ABC made your missed episodes the same experience with the availability to find out more about the shows. It provided a similar experience, while adding time utility. But, the old version had its limitations. Not the amount of content necessary, no easy access to related links. The new website represents the change in interactive online website advancements since the introduction. The new player allows the users to become a part of the show. The show creates an experience for the user and the user can delve further into the subject, becoming connected with the characters through bios and discussion forums with other fans. In a way, the users are rewarded for their further interest beyond the aired version of the show, with these added benefits and facts.

With the launch of users becoming involved online, slowly a form of ergonomically and psychologically tied motions and functions became a norm. The motion of a mouse; even left-handed people feel strange with the use of a mouse on the left. Then, the scroll wheel on the mouse. Following that move, the touch-pad scroll, and the current step, the touch-screen monitor. Designers had to change and grow with these natural interaction adaptations that had been occurring and becoming accustomed to the computer-using world.

Frog recognizes that people may not be aware of these existing tendencies or even of the developing ones. Like Doctors adapting to recognizing carpal tunnel syndrome from video games, designers must look past the obvious. Through research, process, and studies of the human brain and body, Frog reaches beyond the norm and finds what should be. Therein lies the connection with design and society. Design influences society on all levels. When a design can impact society it has to be one of change and improvement, one of destruction, or one of great controversy. This impact of design can change actions, lifestyles, and approaches to thinking. The original designer of the vertical scroll versus the horizontal scroll may have not thought about the further meaning of direction. But, with Frog’s concentration on understanding this computer-age norm first before creating a solution, the user (society) benefits because their natural movements and intuition were studied and taken into account. The design of this website has greater implications than appears on the surface. It influenced society by holding high standards to creating what they needed, making change and improvement to what was. Although profit driven, the meaning of the design was about taking people’s needs into consideration and providing a product that has developed in time as they have. Moved forward and morphed into the tech-era. This website, a microcosm of great design, indicates a movement of designing for people, not simply for designers.