01
Wakeheart
Wakeheart
Minimalist yet impactful product design, web design, web development, and branding for a pair of the most recognizable brothers on YouTube.
2019
PRODUCT DESIGN - WEB DEVELOPMENT - BRAND IDENTITY - 3D
Wakeheart
Project Date
2019
Project Role
Project Lead, Designer, Developer
Project Skills
Web Design, Web Development, User Interface, User Experience, Project Management, Copywriting
I worked with The Dolan Twins to show the world that YouTubers can create the type of D2C brand that has traditionally been afforded only to A-list celebreties.
The Question
How might we build a modern fragrance company with the elegance of a premium brand and the spirit of a pair of influencers?
Phase 01 / Branding
Branding for fragrance comapnies is inherently abstract, so starting with a blank slate is quite difficult. I began rough brainstorming with abbreviations of the company name (using WH in the logo) as well as the clients' intended tone of exploration, waves, and free-flowing self-expression.
After reviewing and consulting with the clients, I elaborated on one of my logo concepts that incorporated affectionate, infinite, and free-flowing tones.
Following the logo mark selection, I led the client through a creative exploration regarding both the typeface for the word mark as well as moodboards that would serve as a reference for the remainder of the visual identify for the company. The point was to provoke conversations that would allow me to better understand their vision for the company.
Phase 02 / Product & packaging
Following initial branding, the project ramped up. I designed and developed the Shopify website in parallel with designing and mocking up the bottle, packaging, and physical experience for the actual product. The inital bottle designs far from ideal - too busy, little contrast, and a severe lack of elegance.
After these designs, I went back to the drawing board. Because I spent a few weeks collaborating with and unserstanding the minds of my clients, I knew what the clients wanted, and was able to deliver on those wants with my second product iteration. The twins were clear with what they wanted: white on white minimalism, elegant complementary elements, and an experience that felt increasingly down-to-earth when compared to multi-billion dollar companies.
I worked closely with our manufacturers and our fragrance house to understand limitations regarding details such as embossing and reflective heat wrapping. After completing the designs and implementing small alterations, I created die lines to be sent to our packaging manufacturer in China and our bottle manufacturer in France.
In creating the product page, I wanted customers to feel like they were in the store shopping for the fragrance - I accomplished this with transparent product shots and a gradient background that created the illusion of depth.
the second launch
Prior to moving on from this project, I developed bottle designs and branding for the second round of fragrances (to launch for the 2019 holiday season). This several month long process involved coordinating and directing manufacturers, leading meetings with stakeholders, and several rounds of 3D renderings and iterations.
My final designs were developed into physical products, as seen below. The idea for the 'Prism' (clear) bottle was to design a custom cap that would form a rainbow when in light. Despite my doubts, it actuall worked. Woo!
Result
One Thing I Learned
Traditional marketing is not necesarry and virtually obselete when influencers are involved.
project success
On launch day, we sold 6,000 units in just over 3 hours.
The Question
How can we leverage isolated product shots and an expressive color palette in order to create an interactive shopping experience for a digital bakery?
my challenge
This is the longest web development project I've ever taken on. I challenged myself to use this project as a vehicle for exploring the marriage of web animation and ecommerce. The challenge was both in learning the necessary Javascript animation libraries as well as understanding where and which animations enhanced the user experience.
Further, I attempted to push the limits of Shopify's platform. Shopify can be a plug and play solution for merchants, but they allow complete control of each website's frontend code. I created a custom theme from scratch, which allowed me to design pages such as a custom cookie pizza builder made from a single SVG and a few hundred lines of Javascript.
Each of Zac's sweets has a different look, taste, and personality, and I wanted to convey that visually. I've always been extremely fascinated by logo systems, so I tried to do something similar by giving each sweet its own product page with a color palatte that reflected the sweet itself.
Instead of opting for a traditional hamburger menu, I wanted to make sure enery touchpoint felt like it was intentionally designed. I created a full-page, interactive menu to both drive sales as well as strengthen the brand.
Result
One Thing I Learned
Animations are great for interactivity, but they need to be subtle and balanced when used often.
project success
After raising more than $50,000 on Kickstarter, this website gave Zac enough overhead to purchase his own kitchen space and ramp up production.
The Question
Merch websites are boring. How can we make the most-followed female gamer's fans feel like every step of their purchase process is intentional?
learning to draw
Althought I am nowhere near a traditional artist, I was first tasked with creating the artwork for a blood-thirsty wolf. I tried a few different approaches; some, evidently, were better than others. After a few days of practice, my drawing evolved from the ones above to the finals below.
now, the site
For me, the most fascinating part of web development is translating my Sketch mockups to functional interfaces. I pride myself in being able to translate a (nearly) 1:1 copy of my mockups to the web (left is the mockup, right is the live webpage).
When I design and develop e-commerce sites, I think it's critical to the user experience that the product is clearly described and that the product page truly emphasizes the product. There's nothing worse than shopping online and landing on the same cookie-cutter product page that could easily belong on any website. I designed the product pages to make users feel like they're looking at the apparel in a brick and mortar store.
the cherry on top
Shopping online is rarely fun or interesting. When I find a visual element that catches eyes without being too 'in your face,' I like to use it often. I finished this website off by adding a few decorative elements, such as the rotating wheel of text below.
Result
One Thing I Learned
Sometimes it's okay to go a little brutalist with design.
project success
After the initial round of promotion, Sssniperwolf's merch sold out in one week.
The Question
How can we convey the experiences offered by a 3D company through a 2D website?
design process
Below is a collection of iterations and brainstorming for various pages on the site. The client was searching for something clean and less gimicky than other AR companies.
main feature
Out of all of the site elements, I'm most proud of the use case examples that I designed and created for the homepage. In order to truly convey the ways in which PORTALS' platform could be used, I animated 'phones' that follow the user's mouse and serve as a window into the world of AR.
details
Details turn good projects into great projects. With this project, I looked to integrate small details and animations in various areas in order to enhance the user's experience.
Are you tired of me saying the word 'animation' yet? Hopefully not. I love it, and I love pushing the limits of files such as SVGs, as I did below on the website's about page.
Result
One Thing I Learned
I learned how to work with JSON objects in order to create a more user-friendly experience for site modifications.
project success
After the site release, PORTALS used their new digital presence to gain clients such as Coachella, Live Nation, and The Chainsmokers.
The Question
How can we give West Coast Customs a digital presence that feels like an extension of their world-famous brand?
project scope
With this project, my biggest challenge was creating a balance between WCC's wacky and fantastical custom cars and a foundation of minimalism and cleanliness. Throughout the site, I incorporated copy that creates dialogue between the user and the site.
brand identity
In order to reflect the company's slogan 'from rendering to reality,' I created artwork that showed arficial transitions from wireframes to photos.
highlights
My favorite portion of this project was creating their 'showcase,' which was effectively a digital Forza-esque garage that would allow users to browse through and learn about any of their hundreds of custom creations.
supplemental elements
I tied up the site with a couple of interactive and visual elements.
Result
One Thing I Learned
This was the first large web project I did, so I learned how to effectively manage a project and work with a company as a client.
project success
Since the launching the site in late 2018, it has had nearly 13 million views.
The Question
How can I use Javascript to allow myself and others to visualize my computer usage and identify links between different actions and programs?
Nodes, nodes, nodes
The main hurdle was in discovering a Javascript that would convey my desired aesthetic but also handle nearly 60,000 lines of data. Below are some unsuccesful test runs.
Final UI
After a fair bit of tweaking and formatting, this is the final UI. I created it so users could clearly see which programs were used in tandem by connecting each node, which is sized for the amount of time spent in that session, with the program used before and after it.
The Question
How can we build a completely in-house brand that disrupts an antiquated industry using a social advantage?
project success
I worked on building INH for just over one year; it was a wild ride. I started as a web designer, developer, graphic artist, marketer, and package designer, among other things. The most critical component to the succees of this project was the social aspect - creating a strong brand that customers would want to flex on Instagram.
the challenge
In starting this company, the cofounders and I weren't exactly sure what we were doing. Unlike my other projects, this wasn't a design, develop, market, and done deal. The company evolved every day for a year, and still is. Below are a few of my very initial mockups for the website.
marketing
Not only did I have to learn new libraries, platforms, and customer mindsets, but I also had to learn how to market a brand thorugh organic and paid channels such as Facebook, Instagram, Google, and e-mail. Below are a few promo graphics I made.
Another huge challenge was learning how to run paid acquisition on social media. I spent over $400k over the course of the year, testing thousands of combinations of audiences, creative, and copy.
As a direct result of my and my co-founders' efforts, the company is now extremely profitable and is poised to do $500k in gross sales for October 2019.
Result
One Thing I Learned
I learned that building a company is hard as sh*t and requires time, dedication, and effective communication.
project success
One year after launch, INH is currently at a $6m yearly gross sales rate and will continue to grow over the next year.
Next Project
Home
Who I am
Although I'm fortunate to be a junior attending Iovine & Young Academy at USC, I spend more time starting companies than I do in class. I find I learn best by doing. I'm an avid Boosted Boarder and purveyor of all things coffee.
What I do
I've spent the past two years building different aspects of consumer facing brands - sometimes the website alone, sometimes co-founding the company. I'm fascinated with consumer facing brands, web design and development, UI/UX, animation, and product design.