UX Design

Masterplans Website Planning

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, Icon Design, Website Visual 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. 

User Personas

To establish where the project needed to go, I conducted discovery interviews with key stakeholders and then distilled portions of the data I gathered into these personas. These personas represent the real-world needs of their core demographic and marketplace, and everything that follows was designed to speak to these individuals.

persona-1d.png
persona-2d.png

Website Wireframes

Here are a few examples of the process that went into planning the layout, structure, and flow of the website—long before any visual design pixels hit the screen. 

Product Overview Page

Click image to add/remove layout grid

Our Team Page

Click image to add/remove layout grid
 

Blog Overview

Click image to add/remove layout grid

Blog Post

Click image to add/remove layout grid
 

Mobile Layout Example

Click image to add/remove layout grid
 
 
 

Up Next:

See how everything came together in the website's visual design: 

Masterplans.com Redesign

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
 

Lang Baan Website

Lang Baan is an award-winning Thai restaurant in Portland, Oregon.

My work on this project included: Creative Direction, UX Design, Graphic Design, and Photography

Project Objective: Lang Baan was voted the “2014 Restaurant of the Year” by Portland Monthly Magazine. It was experiencing a huge period of growth following this well-deserved bit of press, and owner Earl Ninsom needed a website that could keep up with the needs of his diners and restaurant staff.

The new website's job was to present the restaurant's uniqueness, make the menus easily accessible, streamline the process of booking reservations, and save time by simplifying his staff's workflow.

Wireframes

These are a couple of my hand drawn wireframes from the planning phase of this project.

Mood Boards

The mood boards consisted of photos I took of the restaurant's interior. The intention was to create an impression of how dining at Lang Baan feels, & these photos inspired the visual design. 

static1.squarespace-1.png
 (Photo of Earl Ninsom by  Christine Dong )

(Photo of Earl Ninsom by Christine Dong)

Landing Page

And here is where it all came together in the final designs! 

Who We Are Page

static1.squarespace-1.jpg

Menu Page

static1.squarespace-2.jpg

Responsive Layouts