Infographic + Presentation design

« PORTFOLIO

INFOGRAPHIC + PRESENTATION DESIGN

 

 

infographics & visualizations

Various posters created for Riot Games

 

LoL Season in Review Proposal: This mockup was created in 2 days during a hackathon. Our team’s goal was to showcase the value in having a personalized Season in Review that showcases player gameplay data. This was quickly picked up and made into a full fledged annual project.

 

Presentation Deck Examples

KorroBox Presentation Decks: Here are various slides I’ve created for KorroBox’s various presentations: sales deck, investor deck, technical walkthrough, blockchain guide, etc.

 
 
 

Rotating Earth Day Presentation: This was created in one day to encourage Rioters to go trayless in the cafeteria.

 
 
 

Template for a monthly Patch Report: This was created for the data science team to use to present their findings to the executive team. Made in Google Slides & Google Sheets.

 
 
 

Data Science Clustering Presentation: Originally, this was designed to be just visuals accompanying a company-wide talk, but additional text was added later on to make it into a standalone deck.

 
 
 

Data Visualization Presentation Template: This was created as a template and guide to help our analysts, researchers, and data scientists quickly create beautiful and easy-to-understand reports for their stakeholders. Eventually, it was passed around to other teams and became the most used presentation template for reports, talks, and more. These are a few select slides from the template.

 
 

Miscellaneous Illustrations

« PORTFOLIO

Misc. Illustrations

 

 

vallarta supermarket: store signs

Freelance design work: illustrations, colors, some typography

IMG_0198.jpg
IMG_0204.jpg
IMG_0201.jpg

Game Background Concept sketches

Explorations for a potential KorroBox mini game

 

Mockups of the game


handdrawn

Watercolors & graphite


KorroBox: Product Design + Illustration

« PORTFOLIO

KorroBox: Product DESIGN

 

 

KorroBox is a blockchain-based gaming platform that aims to put the power back into the hands of game developers and players.

banner.jpg

Because we were working with blockchain technology and utilizing cryptocurrency, the biggest challenges we faced were:

  • How do we make something as complicated as blockchain attainable for the average person?

  • How do we break down barriers for purchasing with cryptocurrency?

  • How can we communicate all the benefits that this tech can bring to the gaming industry?


toybox copy.png

My Role

  • Determined roadmap for product team

  • Managed workflow for engineers

  • Iterated on wireframes and UX flows rapidly for testing and feedback

  • Created detailed mockups and assets for frontend engineers to reference

  • Established web styling and created illustrations, iconography, and UI details


spec out planning

After we decided as a team what we wanted to create, what our priorities are, and which features to add, I created a doc that would map out all the details included on each page of the platform. With this as a jumping point, the team hopped in to give their thoughts, start discussions on the logistics of building different things, refine our priorities, and begin formulating a roadmap.


The beginnings of wireframes: white boarding (or yellow boarding!) user flows & brainstorming wireframe options.

The beginnings of wireframes: white boarding (or yellow boarding!) user flows & brainstorming wireframe options.


ux flow + simple wireframes

After a few whiteboarding sessions, I began creating UX flows with basic wireframes. Combining the flows and wireframes allowed engineers to start planning and building structures right away instead of waiting for perfect, meticulously detailed wireframes. Here are some examples of what these flows looked like for the first iteration of the KorroBox platform.


Proof of concept launch

Game Store

This game store was designed to have the games take up a lot of real estate to fill out the space for our proof of concept launch. We planned to make it more browsable as we add more games.

Game Page

The most important things about deciding to purchase a game are front and center: graphics, gameplay, narrative, and style. Our next step was to implement tags and reviews.

Game Store - Phase 2 Plan (WIP)

Once we have acquired more game partnerships, we planned to make the layout of the store more personalized, full of recommendations based on play behaviors, friends, and trending games.

 

Item Store

After we launched the proof of concept for the Game Store, we moved on to building out the Item Store, which would be full of non-fungible token items from various blockchain games. The long term vision for this would be to evolve into a peer-to-peer marketplace where these items can be tradable with both fiat and crypto currencies.

 

Checkout Modals

One of the most challenging parts of designing this platform was the purchasing process. Because we were also accepting Ethereum (and had plans to expand to other currencies), we needed a way to ease the tension between interacting with the blockchain and simply making a purchase.

Mockups of how having an ETH wallet and USD credit card linked to your account would look in the user settings:

Reference Sheet

Work in progress reference sheet for CSS attributes. This was created to keep all engineers working on the platform on the same page so that the CSS stylesheet doesn’t get too out of hand.


Illustrations & Iconography

Some examples of illustrations and iconography made for the platform.

art-inventory-games.jpg
intro-weaponimage.png
howitworks-step1.png
toybox.png
scarcity.png
community.png

KorroBox: Web Design and Frontend Development

« PORTFOLIO

KorroBox: Web Design and Frontend Development

 

 
banner.jpg

At the very beginning of KorroBox, before we had a product to launch, About & Press Kit pages needed to be created quickly to give the public an idea of what we planned to do as a company. We wanted it to be simple to browse through, easy to understand (especially for non-blockchain enthusiasts), fully communicate our mission and plans, and give a sneak peek at the “world” that we were building behind the scenes.

All of this needed to be done within one week.

Our needs changed rapidly as we switched business models early on in the company’s fruition. With the need to move fast, we planned ahead as much as possible while keeping this modular enough to switch out content as needed.


forplayers copy.png

My Role

  • Project lead

  • Wireframing

  • Quick Mockups

  • Branding (Visual & Communication)

  • Vector Illustration

  • Photography

  • Frontend development (HTML/CSS)


SPEC OUT planning


wireframes

Part 1: Exploration

To get the conversations flowing, I created quick, low fidelity wireframes and used feedback from the team to get a better idea of:

  1. What should we prioritize?

  2. Does the information flow intuitively?

  3. What can we omit to simplify our message?


Part 2: Finalizing Content

We realized that we needed to create two “phases” of the about site:

  1. Before the ICO

  2. During the ICO

  3. After the ICO

Because we needed to get this site out as soon as possible, I decided to just focus on the first two phases for now, then plan for the last phase in the following month.

Phase One: Before ICO

Phase Two: During ICO

Phase Three: After ICO


mockups

Quick Mockups

At this point, our visual brand wasn’t fully formed yet, but we had a few basic ideas to explore: a teal accent color, combinations of warm-toned grays, and simple drawings to bring in visual interest.

With these explorations in mind, I skipped a full fledged mockup and went straight into building what I had in my mind.


the results

Overall, it took a total of one week to finish each iteration of the site from wireframing to coding.

First Iteration: The About site was heavily targeted towards blockchain and cryptocurrency enthusiasts with an approachable visuals and language that would help draw in the average gamer. We were focused on the technical aspects of our product and why it would bring value to the community.

Second Iteration: As our business model changed, our needs for this About site changed. Because we moved away from an ICO, the site became more investor-friendly, focusing on the benefits of our product, our roadmap, and our growing team.

icon-envelope.png
icon-lessdependency.png
icon-chargeback.png
icon-verification.png

press kit

Alongside the About website, I also created a Press Kit for all of our press releases and media coverage. I designed, coded, wrote the copy, and created the downloadable kit in 2 days.

Quick wireframe sketch

Final


Taste the Insights: Event Marketing

« PORTFOLIO

Taste the Insights: Event Marketing

 

 

Within the Insights (Business Analytics/Data) team, we wanted to spread the message around Riot Games about the power of data and how it can really impact the products that the company puts out. In an effort to jumpstart conversations and collaborations, our Ops team put together an event called Taste the Insights, where we held a series of 5 rotating presentations and invited all of Riot to join us for an evening of learning.

banner.jpg

With Rioters getting constantly bombarded with new emails in their inboxes, posters in the bathrooms, and ads in the cafeteria, oftentimes things get ignored or overlooked. I wanted to find a way to grab their interest by offering an interesting fact, with each new data point roping them in further and further into our world of insights.


pizza.jpg

my role

  • Brainstorm & collect the necessary data from our Facilities and IT team

  • Spark excitement about the event to members of Insights

  • Determine art direction and design a template for quick production

  • Illustrate and finalize all posters within 1 week

  • Print posters & assemble installations, strategically placing them throughout the campus to increase engagement


getting the team involved

For this event, I asked the Insights team to come by to offer up their witty (or cringy) humor. It helped get the team talking about the event around our desks, with each person providing new ideas for the event, learning more about why the event was happening, and feeling directly involved with the messaging to Riot through these posters.

At the bottom of all posters, there is a punny call to action that leads the reader to the name of the event. For example, “Beef up your decision making at Taste the Insights” or “Player insight served piping hot at Taste the Insights.” Each post it on the poster is a suggestion offered up by one of our analysts, researchers, and data scientists.


cafeteria posters

We decided to target the areas where Rioters tend to communicate for extended periods of time, such as the cafeteria (Noms) and meeting rooms. The posters would be prevalent enough to be seen by all Rioters at some point during the day, but sparse enough so that they feel like a pleasant discovery.

  • The data point is highlighted first and foremost to spark conversation and interest in a curious point.

  • By conjuring that curiosity, we can encourage the reader to continue exploring the poster, interested to see where they can potentially learn or seek out more.

  • This visual deprioritization of the call to action (“come to our event!”) and the prioritization of a fact that brings joy (e.g. a Snapple fact!) was definitely an experiment… that paid off.

Note: Numbers in these posters have been altered.

meeting room posters


the results

With the powers of these posters, the installations, and slide presentations combined, it felt like the entire campus was saturated with these pockets of data. It was entertaining to learn about the fun facts, but it was even more interesting to observe how our behaviors changed a tiny bit with the new information. For example, “If this meeting room is booked a lot, maybe I should look for a meeting room in another area.” It got people talking about data.

An installation placed on the counter of the coffee lounge on campus.

A rotating powerpoint placed inside the dining area showcasing game-related data.

The turnout was amazing! All 5 presentation rooms were packed for the entirety of the event, with plenty of folks mingling in the breezeway. Based on surveys, most participants found out about the event through posters and installations placed throughout campus. It was a wonderful evening of sharing knowledge and inspiring others to collaborate with the Insights team to bring data into their projects.