Problem
FogLifters are animated films that effortlessly explain complicated financial concepts in a relatable way. FogLifter Media was a start-up devoted to allowing users the ability to access and view FogLifter Films, and connect them with a Financial Advisor located in their zip code.
Approach
Considering the FogLifter platform needed to serve dual purposes, I needed to look at the experience from both a financial consumer point of view, as well as that of a financial advisor. In developing an experience for both, it was important to identify the content that each group would be consuming. Content architecture was followed by defining the primary tasks for each group of users separately—while looking for points where their tasks intersected. I then began developing wireframes. Once the wireframes captured the desired process in more detail, initial visual designs were developed for the web and ultimately consumer mobile.
Research
Relying heavily on competitor analysis as well as researching processes used in similar industries, a content structure was developed that helped define the primary tasks for each user group. The FogLifter Media platform needed to have a consumer experience focused on access to the individual films. It also needed an advisor experience focused on developing sales-regions and capturing user-data based on interactions with the consumer side of the platform.
Foglifter Media: Content Architecture
Consumer and Advisor
Foglifter Media: Content Architecture
Consumer Web – Primary Task Flow
Foglifter Media: Content Architecture
Consumer Mobile – Primary Task Flow
Foglifter Media: Content Architecture
Advisor Web – Primary Task Flow
Concept
After developing the content architecture and primary tasks for the various user experiences, wireframes were developed in an effort to understand the information hierarchy on individual pages. After realizing that the primary age demographic for consumer group was over 50 years old, the web experience surfaced as the most viable method for delivering the consumer content. However, with the rise in mobile-usage overall, it was important to capture that experience as well.
Foglifter Media: Wireframes
Consumer Web
Foglifter Media: Wireframes
Consumer Mobile
Visual Design
When developing the consumer interface, it was important to reinforce the brand whenever possible. At this point in the process, only the logo and a loose set of colors had been developed to define the brand as a whole. Working with what had been developed, I was able to define and implement a visual structure that expanded the brand for both consumer and advisor—giving both a unique yet consistent experience.
Foglifter Media: Visual Design
Consumer Web
Foglifter Media: Visual Design
Advisor Web
Foglifter Media: Visual Design
Consumer Mobile
