Initial Ideation

As instructed, the goal of this part of the exercise was to generate forms using very simple primitive shapes. As you can see I came up with 10 sketches to start. Sketched with Prisma Colored Pencils on marker paper, 14x17.

Going Forward

The next part is where I get to have a little bit of fun using a little bit of brain power. I was instructed to select one form to move forward, and in doing so, I was to apply 20 modifier words to the form. These modifier words help me solve how exactly to accomplish the sketch, moving me closer to a desired form.

Improve

Using the previous set of sketches, the next step was to pick 10 and improve them one way or another, by applying some of the same modifier words, or adding more interesting shapes to start dialing in on an interesting form to move forward.

Stylize

At this point of the exercise, using any of the above sketches as references and inspiration, I would in a sense over stylize the forms. This would require adding vents, interfaces, screens, or notches in order to practice over designing something.

Synthesize

Now I get to sort of bring it all together. Using the previous sketches as inspiration again, this part of the exercise allowed me to tone down those overdesigned forms, to create cleaner, more interesting forms. Some of these forms are a mixture of previous sketches as well as the previous over designed sketches.

Render

This is my favorite part of this exercise, the rendering part. Using light logic and physical properties, this step required me to use at least three different types of materials, including wood, glass, chrome, and metal. These were rendered with Copics, Micron Pens, and Sharpies on marker paper.

Composition

Finally, I chose my two favorite forms, cleaned them up and turned them into any sort of product, no matter how sci fi or fictional it may be. An infographic with the renders were necessary to practice my composition skills and artistic execution. These are also rendered with Copics, Micron Pens, and Sharpies on marker paper.

What, Why, and How

At first it seemed very daunting to try and create this magical thing that I just learned about, and being under a self-starting lead, I was set loose to sort of figure out how to do this. The first thing I did was create this case study and figure out what design systems are, why Monster needs it, and what steps we need to take to reach this goal we all have in mind. Here is a presentation I presented to teams to educate what, why, and how to design system. Click through the slides.

Set the plan

After finding the diligence to understand the goals and what we needed as a brand to be unified, I created an initial baseline sheet to follow so we don't get too far off track.

Finding References

We wouldn't be able to just design whatever we wanted. After collaborating and talking with our development team, we all agreed that we would all be referencing the same framework: Material Design Bootstrap, which is a framework that uses bootstrap while also adhering to Google's Material Design guidelines.

Tackling the Monster

No pun intended, but we quickly found out that this Monster was going to get out of hand really fast. In addition to a light design that MDB is defaulted to, we needed to design a dark mode in addition. We actually hired another designer to accompany me in designing this Design System. We tackled each and every aspect of the design system in sprints, after a couple months of referencing Google's Material Design, we would find ourselves getting very efficient and creating these components. We documented everything we had in terms of instructions, guidelines, and definitions within InVision's Design System Manager, or DSM.

Our full design system guidelines can be found here:
https://monsterenergy.invisionapp.com/dsm/monster-energy-company/1-monster-energy
Password: monsterpass

The Final Product

Well not quite, this project is still a work in progress, but we have released the v1 of our design. The next steps is to implement the design system with a couple of internal applications and we will test the validity of the design system. Here are a couple examples of dashboards, CMS, and other applications we've designed for.

Final Logo Variations

Products & Branding

Social Media Flyer Set

Apparel

Sketches

Going into this project I wanted to try and sketch out just a basic front view in order to find how exactly I wanted the goggle to look. In doing so, I am also able to use the sketch as a reference for when I start 3D Modeling the product. Designed in Fusion 360, Rendered in Keyshot.

Brand Awareness

One of the goals of this project was to properly contour the product's design language with the brand at hand, in this case, Reign. You will always catch the can with a sleek black feel to it, and each colors would correspond to the different flavor profiles.

Ideation

After meeting with the client and discussing requirements, ideas, and expectations, I went ahead and made some good ol' fashioned sketches to try and get a solid mark down for the restaurant. The client expressed a modern, simple look, which is cliche, I know, but this is my solution I came up with.

Final Logo Variations

What is Ocean's Halo?

Oceans halo is an Asian-Inspired brand that uses the ocean specifically red seaweed to create products which are more sustainable and obtainable.

Sustainability Goals

The brand’s main motive is to help the ocean as they consistently donate to the cause, which is the main central branding idea in marketing around their products.

Competitor Outlook

If we take a look what they're up against, you can see that within the seaweed market, most companies use the same packaging and other than bright colors and distinguishable branding, the package experience remains the similar and theres no real innovation.

Current Lineup

If we take a look at their lineup, we can see that they’ve already innovated flavors unique flavors within the for the seaweed market. In this section we can see that all of the packaging maintain the same design language, and currently works very well as a brand familiy.

Packaging Analysis

Upon analysis of the current packaging, I found that the package graphics are well balanced and does not need any redesigning, other than perhaps including ingredient images to paint a picture within the users’ head. When we look at some of the pain points of the package, we can see that there is a lack of the ability to reseal, unsustainable packaging, and inefficient packaging

Pain Points

Solving Pain Point #1

For major pain point #1, being a brand who is an advocate for minimizing waste, specifically plastic waster, is quite contradictory as every package has a non recyclable plastic tray. We needed to find an alternate solution for the plastic tray, and to look into a packaging bag that could be friendly to the environment.

The solution that stood out for the most for solving the waste problem was to simply just remove the tray, as this would reduce the plastic waste tremendously, With this new solution, we are also able to reassess where the product could be sold. With this packaging, I introduced a smaller package with prong holes which allow the product to be hung and possibly expand into other retail spaces.

Solving Pain Point #2

As for the second pain point solution, we obviously needed a bigger packaging, but we need to take into account people not finishing the whole product so we explored ideas with a resealable tab, similar to various cookie brands. With the serving size not being sufficient for some people which could lead to more plastic waste in pain point #1, introducing a family pack that could fit more seaweed than plastic would be ideal, as people would not be going through so many packages at a time. The introduction of the "family pack" concept comes with the problem of being able to reseal the package and with this solution, the resealable tab is not only necessary, but also innovative in the market space.

Thank you for scrolling through this rigorous project, here are the final solutions and how efficient the product would fit within the existing product family.

Web Comps

Due to the rushed nature of this project, our design team was to simply jump into the comps right away, without any process. In doing so, the challenge was to come up with a comprehensive brand that hasn't been defined yet, and to go through processes all at once.

If the embedded comp is laggy, or you are on mobile, please go to the prototype link directly.

Mobile Comps

If the embedded comp is laggy, or you are on mobile, please go to the prototype link directly.

Defining Nalu

First things first, we start with a mood board, a collage of current assets used for ideation and brand identity. Nalu had already been an established brand, but at the time of this project, the Nalu brand got a complete rework in regards to creative direction and brand mood.

Wireframes

For the initial process, I was to provide Nalu stakeholders with at two different wireframe directions. Given the new assets for the site, I decided to double down on the ripped paper effect that the new Nalu promos seemed to pull off effectively. If the comps are too laggy and loading too slow, you can find the web prototype here, and the mobile prototype here.

Comps

Upon discussing various versions of the final comps, stakeholder felt that more imagery was necessary for the brand aesthetic, therefore hero images were added to each page, with a warm, inviting effect.

If the comps are too laggy and loading too slow, you can find the web prototype here, and the mobile prototype here.

Gathering & Organizing Data

For this project, the data within the infographic revolves around a couple days of our 3 day weekend. Here's a refined version of my personal notes for the week.

Infographic Inspiration

With my data, I was able to visualize this graphic within a circular composition since my daily schedule showcasing the major location, what activities I do in that location, and how I feel doing it. Isometric vector illustration has been one of my favorite digital aesthetics and seeing these examples inspired me greatly for this project

Ideation & Sketches

After analyzing my data and finding the aesthetic I wanted I noticed that my daily life really is like a cycle I went through in a repetitive manner, therefore, I came up with this idea to create an infographic based on a circle. Here are a couple initial sketches that paved the way for the rest of the process.

Final Illustrations & Style Guides

I decided to take more of a design system approach towards this infographic and had a focus on making the symbols, styles, colors and graphics before going in and designing the rest of the infographic. I actually livestreamed this on twitch, it took about 14 hours all at once (procrastination I know). Unfortunately the VOD didn't save :(

Reskinning & Reorganizing

The current Monster Request Management System had already existed, and the team running the system tasked our team to apply our already completed Design System to the application in order to improve user familiarity and adhere to the monster internal aesthetic. As you can see on the left, the interface is relatively overwhelming, and instead of having everything on one screen, we decided to break everything out into steps.

General User Flows

The main solution that we came up with was to essentially break up the interface so that users are not bombarded with so many actions. In order to figure out how to break the interface into steps, we did a rough set of user flows. An example of the Job Creation user flow is shown below.

Execution

After referencing the existing screens, we went ahead and followed all of our user flows to build out the comps. Since we had the design system already completed, we didnt have to go through any wireframing or anything, we just jumped right into creating the design.

User Testing

After initial design was complete, we insisted to conduct user testing on a couple of the flows for the pertaining team. We had user tests for each of the departments included. Here is an example of the prompt we give users to go through. We are able to gain a lot of feedback and qualitative data from a set of the actual users.

Final Comps

During this time, Monster had been short handed and we did not have the man-power or time to properly do a full design process for these comps, therefore the challenge at hand was to design a whole website without any brand support or supporting data.

If the comps are too laggy and loading too slow, you can find the web prototype here, and the mobile prototype here.