Icon Design

Masterplans Website Visual Design

Masterplans is an Inc. 500 business plan writing company, & the leader of their industry.

My work on this project included: Art Direction, UX Design, Branding Design, Website Visual Design, Icon Design, Creation of Marketing Collateral, and Project Management

Project Objective: Masterplans was coming up on their fifteenth anniversary of being in business, and they weren't seeing the growth in engagement and sales that they wanted. As part of a major reboot, I worked with their core team to rebuild their brand identity and implement a highly effective new website.

The identity and website needed to reflect not only the passion and expertise of the team, but to better convey the high-quality of their services, differentiate them more clearly from their competition, and create a memorable impression. 

Before we get into the visual design, here are some of the results they experienced in the first two weeks of their new website and branding's launch:

New Website's Initial Results

website-stats-2a.png
website-statistics-1a.png

Preexisting Website Design

The existing website hadn't been updated in many years, and wasn't helping to increase conversions or improve the quality of leads. Numerous factors were identified as contributing to this, including too much information on a given page, poor visual hierarchy of elements, and a lack of marketing and user-experience best-practices.

 
 

Updated Website Design

Here is how the overall rebranding and wireframing came together in the final designs. 

Home Page

Click image to see additional page states (top navigation dropdown menu & layout grid)
 

Our Approach Icons

These icons were created to represent the various stages of the Masterplans process, and to add a personable feel to the brand. 

 1. Kick Off Call

1. Kick Off Call

 4. First Draft

4. First Draft

 2. Research

2. Research

 5. Revisions

5. Revisions

 3. Collaborate

3. Collaborate

 6. Final Business Plan

6. Final Business Plan

 

Our Process Icons

 "A project manager will lead your business plan team"

"A project manager will lead your business plan team"

 "We never miss a deadline"

"We never miss a deadline"

 "Have your plan in as little as 7 days"

"Have your plan in as little as 7 days"

 

Mobile Layouts

Home Page

Our Approach

mobile-our-approach-1a.jpg

Product Page

 

Display Ads for Launch Advertising

Various display ads were created to support marketing efforts that direct potential customers to discreet landing pages based on their specific business interests. Here are a few of those ads. 

 

Related Projects

In case you missed the rebranding or wireframing portion of this project, you can find those here: 

Masterplans Rebranding Project

Masterplans UX Design

Muse Storybuilder

The Muse Storybuilder is a web application that empowers filmmakers to tell more effective stories.

My contributions to this project: Art Direction, Visual Design, UX Design, Branding Design, Brand Identity Creation, Development of Educational Iconography and Conventions.

Project Objective: The design, development, and release of the Muse Storybuilder was a watershed event for the new company that Patrick Moreau was building. It's a web application unlike anything else on the market and is based on the Muse Storytelling process. This process was developed by Moreau and the other principals of the 5-time Emmy Award-winning firm, Stillmotion.

The application needed to be immediately familiar to professionals who were already versed in industry-standard video editing software, distill the great complexity and power of the Muse storytelling process into an intuitive interface, and help teach the process itself through its use.

It was a huge challenge, and we were extremely successful in its execution.

The 4 Pillars of Story: UX Design

In the Muse Storytelling process, there are 4 Pillars of Story: People, Place, Purpose, and Plot. The project began with identifying the key functions, layout, and elements through wireframing. These wires were created in collaboration with Zaid Hisham

 Character Detail View   

Character Detail View

 

 Keyword Discovery View   

Keyword Discovery View

 

 "Build Mode"

"Build Mode"

The Four Pillars of Story: UI Design

These thumbnails show the overview pages for each pillar.

static1.squarespace-2.png

The People Pillar

The Muse Storytelling process is for telling stories about people. People are what we most relate to, and the People page is where a storyteller begins building out their potential characters.

static1.squarespace-6.jpg

The Purpose Pillar

If you're not sure what you're trying to say, you're probably not going to say it well. So the Purpose page assists the user in brainstorming, selecting, rejecting, and making notes on the various Keywords that might guide the creation of their story. 

As the user inputs potential keywords, small tiles are created with drag-and-drop functionality (similar to Trello) for sorting them into clusters. :)

static1.squarespace-7.jpg

Place & Plot Pillars

These are the last two Pillars in the Muse framework. The Place page is where a storyteller creates cards that represent the various locations and objects they're considering for their story (e.g., Mr. Marmalade's Ice Cream Parlor). The Plot Pillar is where they identify the potential plot points, or the "beats" of their story (e.g., Billy encounters a chubby baby duck at the ice cream shop).

static1.squarespace-9.jpg
static1.squarespace-8.jpg

Putting All the Pieces Together: Build Mode

This is where the rubber really meets the road in Storybuilder. All the elements that a user created in the earlier stages come together here to build the final story.

The interface of the Build Mode is achromatic so that it essentially fades into the background and allows the color convention of the cards (which reference their corresponding "Pillar") to shine through. 

There are a lot of powerful features in this li’l puppy. The slideshow below shows a few of its features, as well as the design grid it's based on.

UI Creation

Here's a screenshot of the Adobe Illustrator document where I created the Muse Storybuilder. 

static1.squarespace-1.png

Annotations for the App Developers 

I am very meticulous, and it's really important to me that the other people on my teams have what they need to do their jobs well. To that end, I always deliver detailed annotations with both structural details and the corresponding CSS code for developers.

Here are a few of the annotated designs that I put together for the Storybuilder.

Founder Testimonial

As the co-founder of Muse Storytelling and Stillmotion, two companies that have worked with hundreds of designers in our 10+ years, Ryan is without a doubt one of the most talented folks I’ve ever worked with and we were incredibly fortunate to have him shape our brand.

He’s incredibly detail oriented, is always ensuring that he’s considering the bigger picture, and has a rare talent for bringing intention and purpose to everything he crafts.

I’ve never worked with an Art Director or Designer that brings the same level of passion and commitment to what he does as Ryan.

Patrick Moreau
Co-Founder of Muse Storytelling & Stillmotion
 

Related Project

Be sure to check out the Muse Storytelling rebranding project to learn about the work that informed the creation of the Muse Storybuilder.

Manifest Insights Website

Manifest Insights is a consulting firm and software development company that offers business intelligence solutions.

My contributions to this project included: Creative Direction, UX Design, Graphic Design, and Copywriting.

Project Objective: Manifest Insights needed a new website. Their primary SAAS offering had a complex feature-set that wasn't being effectively presented to their potential customers. The new website needed to highlight key features of the software, convey the company's personalized services that differentiated them from their competitors, and present it all in a friendly yet professional light.

I worked closely with their team to clarify their messaging, create new copy, and develop custom iconography. In the end, everything came together in a fresh and charming new website that hit all of our project's goals.

Final Design

manifest-insights-final-design-1b.jpg

Preexisting Website

The client wanted to keep the same basic brochure-style structure they were currently working with, but ramp up its efficacy.

 
 

Website Wireframe

I got to work fleshing out the basic structure of the page. This communicated the new direction to the client, his developers, and gave the marketing strategist important direction to reference and work from in her efforts.

 
 

Mood Boards

Mood boards were created to convey the visual design direction for the new website. 

081114 Manifest Insights Mood Board 24.png
082914 Manifest Insights Mood Board 5.png

Icon Design

I created a series of icons to showcase key features of the platform and lend a friendly and playful tone. Here are a few examples of original sketches and the final icons. 

static1.squarespace.png

Final Design (Again)

 
manifest-insights-final-design-1a.jpg
 

Muse Storytelling, Inc.

Muse is the patent-pending storytelling process developed by 5-time Emmy Award-Winning video production company, Stillmotion.

My contributions to this project included: Art Direction, Visual Design, Branding Design, Copywriting, Development of Educational Iconography and Conventions, and Print Design.

As Art Director for the organization, I used feedback from the founders and their customers to completely redesign the preexisting brand, educational collateral, and to develop visual communication conventions that would extend through all of the company's offerings.

A brand had been developed before I came on board, but the overall response was that it was "cold," "too masculine," and "confusing." A complete overhaul was needed to convey the intended tone and reduce confusion in learners. 

The objective was to make it clear, succinct, and friendly, while still conveying authority. 

Final Revised Poster & Iconography

Simplicity is frequently mistaken as the result of an equally simple process, but arriving at what you see below was remarkably complex (we'll review the process and my thinking in detail below). A great deal of work was required to whittle down the depth and nuance of the Muse Storytelling system into an easily digestible reference and educational poster.

 

 
  Final Revised Poster   Simple, clean, & clear

Final Revised Poster

Simple, clean, & clear

 

The Preexisting Visual Design Convention

At first pass the original poster looks cool, but in use, the visual conventions and design bells-and-whistles break down. There are many mixed metaphors being used, and the intended meanings behind various icons don't come across well.

The poster has to convey information that is really complex, so simplifying the poster required a lot of work and thoughtfulness.

Preexisting Design

 
  Preexisting Poster   Very busy & confusing to learners

Preexisting Poster

Very busy & confusing to learners

 

The Big 3 Things

The Muse Storytelling process is for telling stories about people. And in the Muse framework, a strong character has to have 3 things: complexity, uniqueness, and desire. The character who possesses high ratings in each and lends themselves to telling a compelling story is chosen to be the "Heart" (or main character) of the story. 

Preexisting Design

To effectively redesign the components of the brand I had to learn the Muse process inside and out, but I couldn't make sense of a lot of what I was seeing. This heart represented a very key concept, but the intended meaning was obscured by conventions that were too subjective.

The hatched pattern was meant to convey “complexity,” but that only became apparent after someone told me that's was the intended meaning. Also, the markers point at different parts of the heart implying that's where those traits are found, but I couldn’t make sense of why they would be located in those places. It seemed arbitrary. 

 
 

Final Revised Design

The final graphic I created shows three distinct and clearly interrelated parts that make up a "Heart," and the labels now clearly demonstrate the Heart's anatomy and that the three combine to make a whole.

 

 
 

The 4 Layers of Place

Next comes the 4 Layers of Place. This is what lends a story the authenticity required to transport the audience into another world. The 4 Layers of Place are: Location, Objects, Situation, and Time.

These are not easy concepts to succinctly communicate graphically. :)

Preexisting Design

When I first saw these icons I thought "house, football, romance, and clock." Granted, there is always going to be some risk of possible misinterpretation in abstract iconography, but what these conveyed was pretty far from the intended meaning. 

 
 

Sketching

To lend a more human and warm feeling to the final graphics, I sketched many ideas and eventually landed on a set of icons that would become final.

Final Revised Designs

Here they are! The final set of icons for The 4 Layers of Place. You wouldn't catch this yet, but the shape of the mountain mimics the Muse Plot Arch (which you'll meet a little further on).

Purpose Lens & "Chain"

Identifying the purpose behind the story you want to tell is required if you're going to say what you mean to say. As such, Purpose is a key concept in Muse. 

Preexisting Design

The shape of the original graphics were meant to represent the aperture of a camera lens, but it was a little esoteric and easy to miss. Also, the company wanted to move beyond just speaking to filmmakers (their initial audience), and the aperture reference would be lost on a lay-person.

 
Existing+Design.jpg
 

Final Revised Design

In Muse, Purpose is the lens you use to focus your message. I developed the aperture concept from the previous design into a graphic most people would recognize and be able to quickly understand the implied meaning. 

Plot Arch

Ok, this was a really tricky one. Plot is an extremely complex concept that has several interrelated components that needed to come across clearly.

Preexisting Design

Hoo boy. There's a lot going on here. There are many superfluous deign embellishments that are confusing if you're looking to the graphic for educational information.

The wavy line between the punching glove and fishing hook was meant to convey the "bob and weave" of a narrative's arch; the Heart in the upper left of the Plot Arch is just decorative; the... ok, I'm going to stop there—looking at this thing makes me dizzy. :)

 
 

Sketching

Sooooooo many fun sketches came out of exploring how to both simplify and expand this concept. Here are a few. 

The Six Universal Conflicts

Before getting to the final Plot Arch design we need to make a quick detour to The Six Universal Conflicts. The Plot Arch represents the "shape" of the Heart's story, but it's one of the Six Universal Conflicts that starts the whole journey. 

Preexisting Design

 
static1.squarespace-3.jpg
 

I wanted to find a way to unify the Six Universal Conflicts with the Plot Arch to show how they're connected. 

Final Revised Design

 
 

The angled shape of the Plot Arch demonstrates the crescendo of intensity (or tension) in the story; the anatomy markers at the top show where the 6 Essential Plot Points (i.e., Hook, Ask, Acceptance, Hurdle, Answer, Jab) ideally fall; the markers at the bottom remind the user of the generally best-practice story formula of 25% / 50% / 25%; and the nuggets at the top represent The Six Universal Conflicts that initiate a journey. 

I told you it was complex. :)

Bringing it All Together

All of these icons and conventions then needed to be unified into a clear, concise, and beautiful poster for people to learn with and reference as they create their work.

Here is the final revised poster again. The Heart goes on a journey through one of the Six Universal Conflicts, and works its way through the primary Essential Plot Points of the Plot Arch.

 
 

Founder Testimonial

As the co-founder of Stillmotion and Muse Storytelling, two companies that have worked with hundreds of designers in our 10+ years, Ryan is without a doubt one of the most talented folks I’ve ever worked with and we were incredibly fortunate to have him shape our brand.

He’s incredibly detail oriented, is always ensuring that he’s considering the bigger picture, and has a rare talent for bringing intention and purpose to everything he crafts.

I’ve never worked with an Art Director or Designer that brings the same level of passion and commitment to what he does as Ryan.

Patrick Moreau
Co-Founder of Muse Storytelling & Stillmotion

Related Project

Be sure to check out the Muse Storybuilder project to see how this rebranding effort informed the creation of Muse Storytelling's flagship SAAS offering.