Redesigning the Homepage Marketing & Brand Experience

  
Role:

Senior Visual Designer

Responsibilities:  

Branding, Art Direction, Visual Design, UX Design

Year:

2017 - Present

Overview

The Problems

  
Piper, Inc. is a Ed-Tech startup that specializes in DIY Computer Kits for kids. The "scrappiness" of Piper's website was giving us some sort of "maker-space appeal" and early reception to customers, but it needed a face-lift and overall layout restructure.

  
"The Piper, Inc. website gave users an assortment of unclear divided content and did not address the product's 3 main features effectively and easily for the end-user(s)."

The Goals

  
User-Centered Goals: 

By launch, the Homepage must: 

1) Clearly communicate to users the value and features of the Piper Computer Kit

2) Have clear CTAs for users to purchase the Piper Computer Kit

3) Visually have a unified brand identity

  
Business/Internal Goals: 

1) Build an MVP internal template

2) Maintain flexibility and custom content without sacrificing scalability and maintenance

3) Optimize for ease of publication and management

An Abundance of Fluff

  
"Users could almost understand what Piper sold, but couldn’t grasp exactly what Piper was—much more than a wooden box computer that ran the popular computer game, Minecraft."

  
The Piper Computer Kit has been a challenge to explain when there's 3 distinct features based on 3 distinct engineering domains (Mechanical, Electrical, Software). I can see why there has been an ongoing conflict on trying to come up with the "perfect" way to present it.  

(Even our founders/creators have had a hard time trying to pitch it) 😅

  
Below is a brief list of items that users ran into problems with from past website iterations.

1)

• Hero Video Background (Too many jumpcuts - could get very nauseating to watch) 

• Inconvenient callouts that you had to click + very small dense text - did not list out features.

• Multiple Videos not exactly explaining the feature

• Testimonials that felt far-fetched than personal - didn't connect to users.

2) 

• Unclear Value Proposition - What does Build a Computer, then Build the Future mean?

• Hero Video Background (still confusing)

• Doesn't clarify the 3 Features in How it Works?

• Fonts and text alignment make it hard to read

3) 

• A variety of value propositions that don't tie together 

• A bunch of different sections aren't connected well

• The lead up to the Buy Now at the bottom is lack luster, and doesn't do the product justice with the poor explanations building up to it

Progression

Our Users

  
PARENTS / EDUCATORS:

1) Parents who purchase in store(when we were in retailers)

2) Parents who purchase online via website/online retailers 

3) Moms have been most likely purchase as much as Dads for their children.

4) Ages 35-55 - primarily, Parents who have children/grandchildren ages 8-13

5) Middle class to upper middle class families

6) Because of the complexity/learning curve of our product, our sweet spot is kids ages 8-13, Primarily 3rd-8th graders

7) Educators who are first-time STEAM Users

Defining Principles

  
1) Simplify the layout and allow for negative space to alleviate the density of the product information

2) Simplify the descriptions and content away from  "Engineering Jargon" or "Fluffy Jargon" to an inviting conversational educator/parent voice. 

3) Pictures & Videos of Students/Educators interacting with the Piper Computer Kit to support the descriptions.

Reviewing & Planning for a MVP

  
"With previous contract designers and iterations of the website, a considerable amount of overhaul was needed to refresh Piper’s brand and messaging to its users."

  
Process:

I collaborated with the Director of Marketing & a Full-Stack Developer as we went through a process of in-house rebranding and customer feedback. I then researched on a few of our competitors who were multi-product companies and developed a list of needs and nice to haves. I worked with the Full-Stack Developer in figuring out a site-map and a user flow-map. I wireframed and mocked up the essentials until we finalized what were necessary components to annotate and develop.

Screen Shot 2019-06-26 at 9.20.36 PM.png

Going with the Flow

  
We finished our MVP in Quarter 1, but *A LOT HAPPENED* in between Quarter 2-4 of 2018. With resources being spent elsewhere and company restructuring, the website redesign and implementation took an indefinite stall. This version of the redesign did give us a higher conversion rate and a "clearer" message as visitors stated a satsifaction with the experience.

Revisiting the Homepage

  
After the end of another holiday season, I found some time to revisit the Homepage. I took what we already knew and collected and tried another attempt to rejuvenate the website experience. The Director of Marketing and I established a working brand guideline and messaging that catered to the Consumer/Educator. This helped with the content that needed to be made and was a step toward a clearer representation of what Piper, Inc. offered to its users.

Screen Shot 2019-07-20 at 9.19.07 PM.png

Scroll Test

Afterthoughts

"This is a glimpse of what a website page redesign iteration could be."

  
We're still in the process of transitioning and implementing changes throughout the website. There's hope to utilize animation/parallax to emphasize some of the key features.
  EX: the assembly of the kit when you scroll down - stop motion form

Redesigning the Homepage Marketing & Brand Experience

Role: Senior Visual Designer Responsibilities: Branding, Art Direction, Visual Design, UX Design Year: 2017 - Present

Overview

The Problems

Piper, Inc. is a Ed-Tech startup that specializes in DIY Computer Kits for kids. The "scrappiness" of Piper's website was giving us some sort of "maker-space appeal" and early reception to customers, but it needed a face-lift and overall layout restructure.

"The Piper, Inc. website gave users an assortment of unclear divided content and did not address the product's 3 main features effectively and easily for the end-user(s)."

The Goals

User-Centered Goals: By launch, the Homepage must: 1) Clearly communicate to users the value and features of the Piper Computer Kit 2) Have clear CTAs for users to purchase the Piper Computer Kit 3) Visually have a unified brand identity

Business/Internal Goals: 1) Build an MVP internal template 2) Maintain flexibility and custom content without sacrificing scalability and maintenance 3) Optimize for ease of publication and management

An Abundance of Fluff

"Users could almost understand what Piper sold, but couldn’t grasp exactly what Piper was—much more than a wooden box computer that ran the popular computer game, Minecraft."

Progression

Our Users

Defining Principles

Reviewing & Planning for a MVP

"With previous contract designers and iterations of the website, a considerable amount of overhaul was needed to refresh Piper’s brand and messaging to its users."

Going with the Flow

Revisiting the Homepage

Scroll Test

Afterthoughts

"This is a glimpse of what a website page redesign iteration could be."

We're still in the process of transitioning and implementing changes throughout the website. There's hope to utilize animation/parallax to emphasize some of the key features. EX: the assembly of the kit when you scroll down - stop motion form

Role:
Senior Visual Designer

Responsibilities:
Branding, Art Direction, Visual Design, UX Design

Year:
2017 - Present

User-Centered Goals:

By launch, the Homepage must:

1) Clearly communicate to users the value and features of the Piper Computer Kit

2) Have clear CTAs for users to purchase the Piper Computer Kit

3) Visually have a unified brand identity

Business/Internal Goals:

1) Build an MVP internal template

2) Maintain flexibility and custom content without sacrificing scalability and maintenance

3) Optimize for ease of publication and management