PiperLogo_Horizontal_2018_A.png
 

Role:
Senior Visual Designer

 

Overview:
Piper, Inc. is an Education Tech startup that specializes in DIY kits that teach kids building, electronics, and coding.


The Beginning:
In the summer of 2017 I was brought on as Piper’s first full-time Senior Visual Designer (primarily for marketing). When I started, I inherited a conglomeration of artifacts, designs, and files from Piper's previous contract designers. This is where I then assessed Piper's current brand, the things that stuck, didn't work, and its potential.

With my broad range of skills and background, I eventually, became their “swiss army designer”, assisting and managing the ongoing needs of each department (marketing, sales, software, product). Below is a sample of a variety of sprints, short-term, and long-term projects.

DSC03502_1a.jpg
PC02_FloatingBox_AG3I0574.png
PC02_Allparts_flat-min.gif
PC02_Build_1a-min.gif

Understanding Who We Are:
Our company's mission is influenced by the rapid and advancing technological world that we live in. Kid’s are growing up consuming a lot of different products, passively—via blackbox phones, shiny packages, flashiness of content—without actually knowing how they really work. Piper’s mission is to provide equitable access to STEAM education by demystifying technology for students, teachers, and families.

One aspect of our "brand" and product is our how we utilize Minecraft (A very popular computer game that allows you to create—like digital LEGOS) It's a PRO, and a CON, as best as I can put it. But because of our recent shift from a "Toy" company to an "EDU" company, Minecraft proposed these problems below that needed to be addressed:

The Problems:
Minecraft has helped us differentiate ourselves and has given us a staying power with kids, but when we’re thinking long-term, these are the following problems that have come up:

1) Legality/Marketing issues - How far can we use Minecraft for leverage?

2) Business Transition - Toy Consumer to EDU Market (Minecraft is very "consumery")

3) Our research and feedback has shown that Educator’s don’t pay attention to Minecraft - it’s a secondary/tertiary component, not the primary one when they purchase.

4) Software scalability - Will we use Minecraft in the next few years (what are the current problems software engineering hurdles) or develop our own IP?

5) Minecraft shouldn’t be the face of our product when customers buy—but instead—it should be an accessible DIY STEAM product experience that attracts our buyers.

Our Demographics:
We’ve had customers who have bought for their kids as low as 3 yrs old and to adults as high as 100 yrs old.

The perspective, and as most of competitors aspire to with their products is that they’re “technically” meant for everyone. The persistent and inviting belief, that anyone can make anything when you're given the tools/knowledge. Piper wants to be the starting for all with empowerment over technology. To understand, connect, and create.

PARENTS / KIDS / 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 first-time STEAM Users, or STEAM pioneers.

Pip and PiperBot - Our Characters based on Minecraft: Pi Edition

Pip and PiperBot - Our Characters based on Minecraft: Pi Edition

Screen Shot 2019-06-30 at 4.00.17 PM copy.jpg
Screen Shot 2019-06-30 at 4.28.38 PM.jpg

The Process:
I had meetings with the founders, the team, past employees and what our users (Educators, Parents, Kids) were saying about our product. Because of the complexity of our product, everyone had their own perspective and understanding—this didn't make it easier. 😅

Conflicts and Challenges:
There were many differences in our direction early on as a company before we could solidify a brand guideline. It was half the company who was for keeping Minecraft as a key selling point and motif, and while the other half who didn't believe it was necessary based off of user feedback.

What I needed to be able to make effective work (it helps A LOT) was a clear Mission, Vision, Core Values—and subsequently—a Product Roadmap.

Analyzing:
What are the core things of our product? And what are things that would scale? Should the Minecraft: Pi Edition characters be our mascots, what colors are necessary. What market are we targeting?...Etc.

Eventually I was able to narrow down that Piper is all about Fluency.

This was a stepping stone and one that was very beneficial for the company and for myself to be able to produce a working brand guideline.

Screen Shot 2019-06-27 at 12.39.32 PM.png
Screen Shot 2019-06-29 at 1.12.36 PM.png
Screen Shot 2019-06-27 at 12.34.41 PM.png
Screen Shot 2019-06-27 at 12.51.40 PM.png
Screen Shot 2019-06-27 at 12.51.58 PM.png

Results:
After some time, the Director of Marketing and I finally got a Brand Guideline put together! 🎉 Below is a sample and work that has been produced based off of it. Minecraft is less prominent but we believe still carries over from it is the essence of creativity, simplicitiy, pixels, nostalgia/software, maker mindset mentality. Visually, there's also a sophistication and edginess that makes us stand out from our competitors, too.

After Thoughts:
Now with this foundation we can use the brand guideline as a reference point to decipher our data and make informed decisions on design. Gladly, these things have started to move toward that direction! Now that we're an EDU company, this opens us up to not only grade levels 3-8th, but all grade levels from K-12. It'll be challenging but I'm sastified that we now have something to work from. ✊

Piper_BrandGuideline_20190423_AB-59.png
Screen Shot 2019-05-25 at 12.22.16 PM.png
Screen Shot 2019-05-24 at 9.59.36 PM.png
Screen Shot 2019-05-24 at 10.00.07 PM.png
Screen Shot 2019-05-24 at 10.01.11 PM.png
Screen Shot 2019-05-31 at 8.05.46 PM.png
Screen Shot 2019-05-31 at 8.33.43 PM.png
_0003_Layer 24.png
_0002_Layer 21.jpg
Piper_Pinterest_1000x1500_20190610_A.png
Piper_ISTE_postcard_20190531_A-10.png
Piper_ISTE_postcard_20190531_A-12.png
Piper_ISTE_postcard_20190531_A-11.png
Piper_ISTE_postcard_20190531_A-13.png
PC02_Piper_AdminGuide_20190501_AA-16.png
PC02_Piper_AdminGuide_20190501_AA-17.png
Screen Shot 2019-06-26 at 9.35.41 PM.png
PiperAffiliate_Banner_20190606_A.jpg
Screen Shot 2019-06-14 at 1.07.12 PM.png
Screen Shot 2019-06-27 at 9.40.37 AM.png
Screen Shot 2019-06-27 at 12.26.43 PM.png

The Beginnings of the Website Overhaul:
Our website is a key indicator of our progression as a brand. Before we had any brand guidelines (and while we were figuring out our brand), we would make changes on a case by case basis—some times abrupt. Not an ideal thing to do—espcially when it comes to trying to launch specific landing pages—but at many times a necesssity.

Problem:
Substituting long-term goals/scalability, effectiveness and efficiency with bursts of temporary hardcoding elements based on urgent requests.

Solution:
Because of the time period (Quarter 4 - Holiday Season) we had to continue iterating and redesiging until we actually had a lull in our year to review and re-examine our efforts.

Screen Shot 2019-06-27 at 8.30.14 PM copy.jpg
PiperHomepage_102417_A_Top_small2.jpg
PiperHomepage_102417_A_Top_smallaaa.jpg

The Website Component Library:

Start Anew:
Our old website was built with speghetti code and we had to do something to set ourselves up for success for the next year.

The Need:
Purge and clean up the entire website. Transition from a One-Product Company to a Multi-Product Company where our users/customers can engage business with us and where we can build pages with ease(ideally for landing pages). Create a library of components that can be templatized.

Constraints:
During the time of development we had many company structural changes that delayed the production of the website. The goal was to push forward toward an overhaul for the sake of not shooting ourselves in the foot during the chaotic holiday season in Q4.

Process:
I first 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 wiredframed and mocked up the essentials until we finalized what were necessary components to annotate and develop.

Result:
We launched the website here 🙌: Piper, Inc.

Note: Currently, Brand Assets/Color/Photography are work-in-progress, transitioning.

After Thoughts: It's functional and usable but there are many things that can be improved upon, such as the store front, check-out flow, and updates to the UI. All things to consider for the next iteration. 🙂

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

Note: This was before our we had any clear Brand Guidelines.

Packaging:
Here are some of the packaging art that I worked on for our updated Piper Computer Kit and our new product line of accessories.

Process:
I went through several mockups and did printed out paper prototypes to see how they would look on the box.

After Thoughts:
Since the recent decision to transition from a "Toy" company to an "EDU" company, the plan was to have these on in retail stores.



2X7A3043.jpg
PEXX_line_123.jpg
2X7A3039.jpg
2X7A2807.jpg
2X7A2805.jpg
Screen+Shot+2019-06-21+at+3.17.12+PM.jpg
Screen+Shot+2019-06-21+at+3.17.22+PM.jpg
Screen+Shot+2019-06-21+at+3.41.00+PM.jpg
Screen Shot 2019-06-21 at 3.41.11 PM.png
Screen+Shot+2019-06-21+at+2.33.43+PM.jpg
Screen+Shot+2019-06-21+at+2.33.58+PM.jpg
Screen Shot 2019-06-21 at 2.50.38 PM.png

Photoshoot:
At a middle school in East Palo Alto where the students tested out our Piper Computer Kit and Command Center Controller.

These were taken by myself on a Sony A6500 with a 56mm lens.

DSC03578_1a.jpg
DSC03567_1a.jpg
DSC03526_1a.jpg
Screen Shot 2019-06-29 at 2.10.03 PM copy.jpg

Photoshoot:
At the Piper, Inc. office.

These were taken by myself on a Sony A6500 with a 56mm lens.

Screen Shot 2019-06-21 at 4.12.25 PM.png
Screen Shot 2019-06-21 at 4.12.53 PM.png
Screen Shot 2019-06-21 at 4.12.41 PM.png
Screen Shot 2019-06-21 at 4.12.34 PM.png

Photography Shoots:
Storyboarded and art directed a photography shoot of our first Piper Computer Kit. Below are photos taken by one of our contract photographers.

3D3A0046_use_1.jpg
Kids_blueprint_111517_A.jpg
Kids_kit_111517_B.jpg
Kids_kit_111517_A.jpg

Professional Development Videos:
Collaborated with the Head of Education to develop Professional Development videos for Educators. Worked alongside a contract videographer who shot footage and helped edit this. I storyboarded and assisted in post-production & asset generation.

PC02_Kid_KitBuilding_1a-03.png
PiperIcons_20190522_-13.png
PiperIcons_20190522_-14.png
PiperIcons_20190522_-15.png
PiperCycle_1A_Transparent.png

#13_VR_headset_1-01.png
#11_MealKits_1_2-03.png
#4_LED_How-01-0111-01.png

Webp.net-gifmaker (16).gif
 
Piper
 
Pip_laugh_128.gif
Screen Shot 2019-06-21 at 5.50.52 PM.png

Holiday_shipping_2017_12_19.gif
Piper_PC02_970x250_20190128_A.jpg
GoogleAd_970_250_112517_A.jpg
Father'sDay_Ads_20190610_A_970x250 copy 4.png
FB_AD_ISTE_2018_06_25.jpg