Kyle Michel About
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.
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 understanding 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 Problem
Online shopping is menial, but dessert isn't. How can I experiment with animation, interactions, and punchy pallete to create an engaging shopping experience?
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 Problem
How can I design interfaces & experiences that convey services offered by a 3D augmented reality startup through 2D platforms?
Topic 1: AR app UI/UX
design process
My main task at PORTALS was to help them create user interfaces from start to finish. I worked on a wide variety of projects for mobile AR interface design. Instead of articulating my process for every single project, below are the steps that I took while working with their team to design frictionless experiences for their users.
STEP 1: HIGH-LEVEL USER JOURNIES
I first worked with the team to understand the end-user & the context in which the application would be used. My next deliverable (after those conversations) always included referncing my notes to build out a rough, high-level user journey.
STEP 2: DETAILED USER JOURNIES
After presenting my work with the team and discussing potential changes to high-level journies, my next step in the design process was to translate the general user journey into a much more granular user journey. The goal of this stage is to understand all states of the app and which screens need to be mocked up.
STEP 3: LOW-FIDELITY APP MOCKUPS
Finally, the fun stuff! The next step in my process was to convert my user journies into tangible, visual mockups. These mockups were low fidelity, but were extremely useful for completely thinking through the interface and interactions from a user's perspective.
STEP 4: MID-FIDELITY EXPERIMENTATION
After the approval of low-fidelity mockups, I moved into mid-fidelity mockups. In this process, I experimented with many different layouts and interactions.
STEP 5: REFINEMENT
After my mid-fidelity mockups, I would enter the process of UI/UX refinement to make the experience more frictionless. This step was the final extent of my responsibilities in my UI design role at PORTALS.
Topic 2: Web UI/UX
design process
During my internship, I was also tasked with designing and developing a creative consumer & investor-facing website for PORTALS. As with all of my web projects, I began by proposing documents to establish a foundation for the project.

Scope of Work

Competitive Research & Moodboards
design process
After proposing and reviewing the Scope of Work and Moodboards with the team, I began wireframing & mocking the website up in Sketch. Below are PDFs that a include a brief look at that process.

Initial wireframing

Higher fidelity mockups
Motion proposals
My site UI/UX design process often includes the development of motion graphics mockups to give my clients a better idea of how I see the site supporting an engaging experience for users. With this site's minimalistic design, I wanted to make sure that small, tasteful details like the interactions below were included to give the site personality.
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.
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 we improve the process of planning large events through a mobile app that understands event hosts and guests?
Focus #1 - Onboarding
While working on this design sprint, I first focused on the onboarding process for users. By creating a logical flow that gathered just enough data to start helping the user plan their event, users would more likely to gain trust in the platform as a quick, intelligent, and personable tool for helping them plan their event.
I researched the process event planners carry out in planning large events & synthesized the most important topics in plain English (and made the experience a little more enjoyable). This way, users looking to circumvent employing an event planner would still be able to curate a great experience for their guests.
Focus #2 - Intelligent Suggestions
Dashboards, in general, are often hard to digest and navigate. Once users were onboarded, I worked to create a conversational dashboard that provided smart suggestions based off of other users' event planning experiences and the data collected during onboarding. I took inspiration from Shopify's smart card system, which provides situational notifications to assist their customers.
Finally, I imagined a frictionless SMS system that would assist users in inviting guests, understanding their preferences (music, food, drink, venue), and ultimately, ensuring that the event would be an unforgettable experience for both the host(s) & the guests.
next steps
While this project was simply a design sprint for me, I've been working on gathering feedback and iterating on the UI and UX above to create a more refined interface and ecosystem that, hopefully, can be developed into a minimum viable product in the near future.
The Question
How can I design an interface that digests computer usage data and effectively reveals patterns in my workflow?
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