Before embarking on a website redesign, it is necessary to perform an audit of the existing site. The previous site’s purpose, UI patterns, architecture, and other heuristics all become evident during an extensive review. This process can be overwhelming, especially when dealing with large, many-layered sites. As a research aid, I constructed a sitemap of toyotafinancial.com during my internship at FCB. A sitemap is a model of a website’s content, usually represented by a hierarchical list of pages. In the process of mapping the site, we gained a clearer understanding of the priority of content. This inspired many design reconfigurations that more transparently communicated to the user the site’s goal of helping customers apply for credit, take steps after their lease has ended, and learn about local deals and specials.
Not all users are created equal. This became incredibly clear while mapping user flows of Toyota customers in the process of enrolling in automatic bill pay. I created a logic tree to help visualize the various paths a user could take. These trees are particularly useful for mapping the registration process because forgotten passwords and other credential issues send the user down different recovery paths.
Think Twice, Act Once
A great idea is only as good as its execution. State Farm “Booty Shot” was a proposed web application that guides potential State Farm customers through the previously confusing process of getting a car insurance quote. Nobody likes filling out forms, so to make the necessary step of information gathering more fun, we proposed that users start the process by taking a picture of their car’s license plate, hence the “Booty Shot.” Image recognition will automatically log the license plate number and search for the correct car make and model.
Keeping the User Engaged
Once the user has taken a picture of their license plate, they still need to input a sizable about of information. A “quote estimate” speedometer was included to provide more feedback to the user and motivate them to finish their profile. Similar to progress bars, the quote estimate is a way to communicate to the user that they are making progress on their goal. We drew from other UI patterns related to “ease of use” when designing the buttons, iconography, and sliding date interface.
Setting Ourselves Up For Success
FCB has secured multiple projects from Brown-Forman throughout their relationship. Key among them have been campaigns to promote Jack Daniel’s products. Most recently, Jack Summer Swarm and Jack Uncut Sessions were developed by partnering with musicians to engage their core audience and reach new customers. Although these two campaigns were very different, there shared a host of UI elements. In order to not have to “reinvent the wheel” for each new project, we determined that a functional specifications deck should be created to standardize common UI patterns. A functional spec deck is a document that clearly describes the essential technical requirements and behaviors of system components. A high level of detail is important because developers use these documents as a blueprint for constructing the architecture of the site’s core features. In my experience, creating and sharing functional spec decks with developers is a great way for isolated teams to learn each other’s work vocabulary and discover what features are perceived to be most important.
Desktop and Mobile Interactions
Creating simultaneous design specifications for mobile and desktop was a great opportunity to learn exactly how the different platforms influence design. Through this project, I grew to appreciate that both mediums have strengths and weaknesses. More difficult than designing an engaging experience for either desktop or mobile is finding ways to create a single experience that can be enjoyed no matter the platform. For example, we took advantage of the large horizontal space on desktop when designing the Profile Setup by separating the entries for returning and new users in order to diminish the perceived form length. This strategy is similar to the pattern of breaking up a long form over several pages.
One of the primary interactions illustrated with the functional specifications deck was form selection states. In order to better communicate the state of each entry box, as well as make the process of filling out a form more delightful, we describe interactions that trigger different selection states. These include a yellow border to indicate a selected entry box, a red border for an entry with an error, and comical microcopy to direct the user to correct the mistake. Detailing the scenarios in which these different states should be displayed in the functional specifications deck allowed us to focus on new interactions specific to the site, rather than spend time communicating an already established set of UI behaviors.