Web 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
 

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

The OMG Friends!

The OMG Friends are a family of pocket-sized adventure plushes that I created, mass-produced, and developed into a product line.

This project represents a very extensive body of work including: Creative Direction, Character Design, Illustration, Print Design, Photography, Marketing, Product Design, Web Design, Logo Design, Copywriting, and many other business-y things.

Project Objective: To create a brand and eCommerce website that delighted, enticed, and introduced the world to a new and beautiful family of wonderful products. 

This was a mammoth project that I worked on full-time with angel investors for two years. Strap in, because there's a lot of cuteness below. 

omgfriends.com

Examples of the eCommerce site where the OMG Friends were marketed and sold.

Brand Identity

The OMG Friends logo was designed to embody the delight and excitement that people express when first seeing the critters. I created a custom typeface for the word "friends" to lend a friendly and handmade feel to the logo.

 

 

Sgt. Peepers the Adventure Owl

This is Sgt. Peepers the Adventure Owl. He is a seasoned world-traveler whose favorite means of transportation is riding in pockets. 

Butterscotch the Adventure Bunny

This is Butterscotch the Adventure Bunny. He enjoys candlelit cabbages and long walks along produce departments. He can frequently be heard asking “what’s for dinner?” and “are you gonna eat that?”

Truffles the Adventure Pig

This is Truffles the Adventure Pig. She loves warm socks, pancakes, books about quantum mechanics, and going to the library. It's not uncommon to hear her say things like “Do you have a library card? Let’s go get some books! Oooh! and french fries!”

And in case you're wondering, that is a tiny glass of milk and miniature books that I made. :) 

Shipping & Retail Display

The OMG Friends traveled to their new homes in stylish cardboard boxes, and congregated in retail shops in the beautiful wooden boxes you see below. 

Plushes to Illustrations

Most of my work begins with sketches, but I designed the OMG Friends through a process of iterating hand-sewn plushes. I eventually had to work my way backwards and figure out how to draw 2D versions of what I'd only known as 3D critters.

Scout Books & Postcards

I love finding old journals and getting to review what my life was about back then. That was the inspiration for these OMG Friends Scout Books. Each Adventure Journal has 32 blank pages, that are perfect for recording bits of epic journeys and general life-bits, and they’re high-quality, meaning they’ll be around for years to come. :)

Doernbecher Children's Hospital Donations

I had the opportunity to donate a few hundred OMG Friends! to Doernbecher Children's Hospital on Christmas Eve. Stuffed animals weren't going to cure what was ailing any of those precious wee ones, but love and delight are excellent medicines, and the OMG Friends! had a lot of both to give.

Miscellaneous Cuteness

2012-05-24_1337893261.jpg
2012-07-11_1342038851.jpg
2012-02-06_1328502752.jpg
2012-06-29_1340999860.jpg
2012-05-08_1336514475.jpg
2011-11-06_1320573185.jpg
2012-05-22_1337708221.jpg
2013-02-02_1359790697.jpg
2012-06-29_1340999728.jpg

Related Project

Be sure to check out the OMG Friends' Halloween Mask Activity Sheet project for more cuteness and delight. 

Hug the Universe

Hug the Universe is my blog where I tell stories about my life, share insights that have helped me overcome some extremely challenging life-circumstances, and create cute illustrations.

My contributions to this project include: Creative Direction, Visual Design, Web Design, Squarespace Development, Branding Design, Brand Identity Creation, Illustration, Writing, Copywriting, Marketing Strategy, Character Design, and Photography.

www.hugtheuniverse.com

 
 

Billy the Flying Elephant

 

This is a 1-panel comic I created based on the Chinese proverb "people who say it cannot be done should not interrupt those who are doing it."

Behind the Scenes with Billy

 

A time-lapse video showing the process of creating the flying elephant illustration. 

Super-Buff Unicorn

This is an image I created for my inaugural post and later made into wallpaper as one of several incentives for Patreon supporters. 

Tidal Wave of Joy

Another nugget of delight from my inaugural post.

Bob from Accounting

This is Bob. He's from Accounting.

HTU Brand Identity

 

 

 
 

 

HTU Logo Design Sketches

I designed the "XO" in the Hug the Universe logomark to be adaptable to other conventions. This shows an alternate "skull and crossbones" version of the logomark I haven't unleashed on the blog just yet. :)

Drawing Cute Stuff (Time Lapse)

Angry Caterpillar

A stubborn little caterpillar from post 4 of 4 in a series about consciousness research and the hidden determinants of human behavior: Did You Know the Sun Used to Orbit the Earth?

Baby Buffalo

This is the baby buffalo from my post about The Incredible Hidden Gift in Meaninglessness.

Happy World

This is the hero image for the inaugural post on Hug the Universe: Who Else Wants to Live in a Happier World?

Dubious World

This is the hero image for post 4 of 4 in a series about consciousness research and the hidden determinants of human behavior: Did You Know the Sun Used to Orbit the Earth?

Crazy World

This is the hero image for post 1 of 4 in a series about consciousness research and the hidden determinants of human behavior: Why Is the World So Crazy?! The Hidden Determinants of Human Behavior.

Donald Trump World

This is the hero image for post 3 of 4 in a series about consciousness research and the hidden determinants of human behavior: Revealing the Hidden Danger in the 2016 Presidential Race.

Confused World

This is the hero image for post 2 of 4 in a series about consciousness research and the hidden determinants of human behavior: How Can We Know What to Believe in Such a Confusing World?

HTU Sign-Off Illustration

This is the sign-off image used at the end of my series about consciousness research and the hidden determinants of human behavior.

The Ne'er-Do-Well

The Ne’er-Do-Well is a literary magazine that publishes what they lovingly refer to as “misfit lit.” The magazine is operated by Sheila Ashdown, a professional writer and editor, and proudly self-proclaimed book nerd.

My contributions to this project include: Creative Direction, Visual Design, Web Design, Illustration, Character Design, and Photography.

Sheila wanted to create a website and brand that spoke to the “oddly universal experience of feeling like the odd one out,” and the challenges writers often experience in pursuit of their craft (things like writer’s block, crippling self-doubt, “get a real job” mentality, and other writerly tribulations).

So, we embarked on a journey to discover how to convey that in a way that was clean, cute, lighthearted, and contemporary (desired traits identified in our discovery phase). 

The concept that hit all the desired targets was that of a black sheep pirate named “Black Baaa.” The concept is literary (pirates), personifies the feeling of being the odd one out (a black sheep), and represents the ethos of “misfit lit” (also pirates). 

Skull & Crossbones

How do you visually combine the pirate theme with the experience of frustrated writers? With a skull-shaped crumpled-up typewriter page over broken pencil crossbones, of course! I whipped up some sketches of this concept, showed it to Sheila, and got an enthusiastic “YES!”

The Birth of Black Baaa

So, what does a black sheep pirate look like? Who knows?! I consulted my sketch pad for the answer. What you see below are some of the sketches that became the final design for Black Baaa the Pirate. 

The Kraken

Every good hero needs a villain, and what better villain for a black sheep pirate writer than a discouragingly critical kraken? 

During the discovery phase, Sheila realized that she's drawn to sites that have “scenes.” So I created a scene for the footer of her website with Black Baaa’s ship battling a discouraging kraken (who apparently only reads bestsellers and thinks Black Baaa’s writing sucks). 

That kraken is clearly kind of a butthead. This was the process of creating him. 

Updated Kraken Illustration

When we updated Sheila's website to launch v.2 I reworked the footer illustration for use as a hero image.

Website Design

Facebook Cover Image

Headshots

  Sheila Ashdown  Founder & Managing Editor

Sheila Ashdown
Founder & Managing Editor

  Grace Gallagher  Editorial Assistant

Grace Gallagher
Editorial Assistant

Client Testimonial

Before I started working with Ryan, I felt aimless and stressed about my website project. I’d worked with three other designer/illustrators and was never completely happy with the outcome—mostly because I wasn't able to fully articulate what I wanted. (I’m a writer—not so great with the visuals.)

Then I found Ryan, and he totally rescued the project for me. He started with a thorough discovery process that was unlike anything I’d experienced with a designer. He asked all the right questions and had a seemingly magical ability to draw out ideas that I didn’t even know were inside me. And he really listened. The theme he came up with (a literary black-sheep pirate) was totally spot-on. As soon as I heard it, I thought, 'I didn’t know that I wanted a black-sheep pirate theme, but hell yeah, that’s exactly what I want!' I laughed with delight for about 5 straight minutes when he presented it to me.

Honestly, I get a little emotional looking at my website, because I’m just so thrilled and delighted with it, and have gotten nothing but enthusiastic feedback. He put such heart and care into my project, and I feel grateful to have found him.

Sheila Ashdown
Professional Writer and Editor