Hey there~ , I'm Danny.

With a background in games, I design digital products with interactivity, engagement, and playfulness in mind.

EDHREC

Website Redesign


Calculator 2: The Game

Mobile UI, UX Writing


Pop the Lock 2

Mobile UX, Visual Design


Infinite Jonathans

Mobile UX, Visual Design


Hey there~ , I'm Danny.

I am enthusiastic about playful interactions.

This admiration stemmed from game design, which taught me the core principles of user-centered design. My time in the mobile game industry helped develop my passion for problem-solving and creating refreshing experiences. From here I decided to take the leap into UX design, by self-teaching and going through online courses. This shift fuels my ambition to search for a UX design role that hones my skills and challenges my creativity. When I’m not designing, you can find me playing board games with friends, watching horror movies, or tending to my plants.

Reach out to me!
dangddanny@gmail.com

EDUCATION

2019 - present

Self-Designed UX Design Curriculum*
UX Design and Product Design

*Feel free to check it out!
It includes courses from Udacity, Coursera, InVision, and Career Foundry.


2013 - 2017

Parsons School of Design
BFA in Design and Technology

EXPERIENCE

2017 - 2019

Simple Machine
Visual Designer, Game Developer


2017

Viacom NEXT
VR Game Design Fellow


2016

What Pumpkin Games
Narrative Design Intern

PRIMARY SKILLS

01

Mobile Design

At Simple Machine, I specialize in designing interfaces and interactions for mobile devices. When designing for mobile here are some considerations:

  • Design for one-handed use

  • Avoid problem areas (notch)

  • Know resolutions and sizes


02

Interactive Prototypes

I’m a hands-on designer. When working with users, stakeholders, and developers, getting them a prototype helps clarify your ideas. It helps with:

  • Identifying clunky navigation

  • Finding out where it is broken!

  • Managing states and features


03

Visual Design

Parsons taught me, that staying creative hinges on staying inspired. To stay inspired, I look to artists and illustrators. Here are some topics I love:

  • Color theory

  • Typography

  • Minimal design

Pop the Lock 2

Mobile UX, Visual Design


ROLE
UX/UI Designer


DURATION
4 weeks


TEAM
1 Developer
1 Game Designer
2 Artists
1 UX/UI Designer


TOOLS
Adobe Photoshop
Adobe XD

BRIEF OVERVIEW

In 2019, Simple Machine wanted to release a sequel to Pop the Lock, a four-year-old arcade game, with new game mechanics and fresh visuals. I was tasked with redesigning the visual identity and menu navigation system for the game.
The project requirements included presenting the different features of the game such as:

  • Multiplayer: Where players can host and join others matches and find the leaderboard

  • Solo Modes: A place for several different modes a player can play solo. (Classic, Endless, Memory, etc)

  • Hat Collection: Where players can buy hats and equip owned hats

For this project, I worked with a lead designer who provided feedback and outlined the project requirements. I collaborated with a 2D artist and 3D artist to develop assets for my design. When the final design was approved, I handed off my designs to the developer.

Problem

  • Redesign and prototype a new idea for menu navigation

  • Design visual identity, while staying true to the original

Research and Planning

Before I started the redesigns and mockups, I took some time to play an early prototype and get a feel for the information architecture and existing flows. I noticed some features that were in places that didn't make sense and decided to group them to make three buckets of information:

  • Singleplayer

  • Multiplayer

  • Hats and Cosmetics

Existing menu from the early prototype


Mood Boards and Inspiration

I love love LOVE making a mood board. Having direction and vision early on is very important.

Moodboard drawing inspiration from modern gradients


Initial sketches, color choices, and other mobile games

First Solution

For the first solution, I decided to try three-page navigation. I wanted the information to be separated but exist in the same hierarchy. Having the primary menu be in the middle and the other menus be to the left and right of it. Using the buckets of information I gathered in the early planning stage, I laid out the menu navigation using buttons to move between them.


PROS:

  • Less information overload

  • More screen estate at the bottom center

CONS:

  • Not scalable with more screens

  • User has less control


FIRST UI DESIGN

For the first pass at a visual identity, I drew a lot of inspiration from HQ Trivia. Some design choices I made:

  • Leaderboard prominently displayed to engage users with the multiplayer aspect

  • "Hi Username!" conversational tone and dedicated place for a username and profile

  • Circular motion and animation to convey high energy and fast-paced gameplay

First UI design pass.

SECOND UI DESIGN

Between the first visual design pass and the design of the interactive prototype, I changed up the visual language to make it stand out from HQ Trivia. Design choices I made:

  • Each menu has a gradient to go along with it

  • Added white space at the top of the screen to ground players and be a space for info

  • Reserved the bottom of the screen for interaction and buttons

Second UI Design before prototype.

INTERACTIVE PROTOTYPE

For the interactive prototype, I worked with the developer to nail down the menu transition animation. To me, it was important for the animation to be spatial to show users the information they were coming and going from.

  • Bubbly buttons to move back and forth between pages

  • Rotational animation to reinforce the circular motifs


FEEDBACK

After testing it we realized it was not scalable if we planned on ever adding more pages. If a page was ever more than one page further than where a player wanted to go, then they would have to move through and watch extra animations that were not necessary.
We often found ourselves getting lost even within this three-page structure.

Eventually, after seeing this prototype and watching beta testers use it, we had ideas on how to build upon this design and improve it.

Second Solution

Using what we had learned from the first solution, we built upon it and decided to move toward tab bar navigation. In this solution, we can show the user where they are in relation to the other pages. At a glance, a user can deduce what else is present in the game as well.


PROS:

  • Information structure is clear to the user

  • Can go from A -> C without having to go through B

CONS:

  • Takes up a lot of real estate at the bottom

  • Requires more icons to show information


UI DESIGN IDEATION

When we were brainstorming another idea for the menu navigation, I stumbled upon an old visual mockup I made. In this mockup, I had taken a more retro approach to a visual design with flat colors.


The important part of this mockup is that I did actually throw around the idea of tab navigation very early on in the process. This taught me the importance of documentation and revisiting old ideas.

An older mockup that didn't make it to the prototype phase.

FINAL MOCKUP

Since we had already built a visual language, putting together this mockup was not too time-consuming. The most difficult part of this mockup was designing the icons to be succinct and clear.


Looking back, I would spend more time iterating on the hat icon (left). That one has the potential to look ambigous.

Outcome and Final Product

INTERACTIVE PROTOTYPE

The final solution was much more user-friendly. It shows the user where they are in relation to the other pages, and it shows them information about what else is in the game.


  • Added tab card navigation

  • Removed rotational animations


The biggest feedback and repercussion of this design was the use of the bottom of the screen. It meant that elements that were previously there had to be reworked.

VISUAL IDENTITY

A balance I had to maintain was staying true to the original game while still reinventing it. Multiple ideas were considered before the team and I landed on the final design. The visuals were inspired by carnivals, arcade cabinets, and HQ Trivia.


  • Four different gradients

  • Circles, dots, and rounded shapes

  • Font: Oduda

TAKEAWAYS

Exploring different ways to layout our features was enjoyable. I liked learning the strengths and weaknesses of each menu navigation type. Ultimately, there is no clear cut solution as to which menu navigation system is the best. It depends on the user and the information a product needs to convey to them.


Menu navigation and information architecture is complicated! Although the solutions we came up with early on seemed like they suited our needs, ultimately the type of user who would interface with the menu dictated the end product.

Calculator 2: The Game

Mobile UI, UX Writing


ROLE
UX/UI Designer, Developer


DURATION
8 weeks


TEAM
1 Developer
1 Game Designer
1 2D Artist
1 UX/UI Designer
1 Level Designer


TOOLS
Adobe Photoshop
Adobe XD
Unity

BRIEF OVERVIEW

Another sequel! When I joined Simple Machine, I started out fixing bugs for Calculator: The Game. Eventually, I prototyped a new mode for the game which grew and became the sequel. I was the lead developer on this game, and while I could go on about level design and creating generative math puzzles, this case study is going to focus specifically on the design of the initial onboarding, and subsequent tutorials throughout the game.
The onboarding and tutorial requirements included:

  • UI Design: What does the onboarding look like? Is it a static image, a video, a playable level?

  • UX Writing: How do we design an AI Chatbot? How do we explain the rules in a conversational way?

  • Level Design: When a new feature is introduced, a player is given one or two tutorial levels to teach them how to use it.

For this project, I worked with a lead designer who provided feedback and outlined the project requirements. Being both the product designer and developer on this project was a tough balance because I had to design within the constraints of my own coding skills. I knew whatever solution and final design we came to was gonna be handed off to me in the end.

Problem

  • Design the initial onboarding process for a math puzzle game

  • Design the levels and copy for tutorial levels where a new feature is introduced


Early Solution

Remember that insert that came with a graphing calculator that taught you how to use it? That was my first idea. I wanted the onboarding to be familiar.


PROS:

  • Takes up the least time of the user

  • Fits the theme of the game

CONS:

  • Not interactive

  • Too much info at once


FEEDBACK

Thematically this worked and was fun, but overall it was not the best way to convey all the game info.
Some feedback I got:

  • Incorporate the chatbot

  • Make it seamless and interactive


Initial sketch:
Layout and formatting based on scientific calculator formula sheets

UI DESIGN

  • Inspired by scientific calculator formula sheets

  • Static image with all info


I wanted the design to be instantly recognizable, which left me very little wiggle room in terms of visual design. There was never a question of how it was supposed to look.


A problem that came up was, what if a player had never used one of these calculators before? This solution was based on an assumption that might not be true, especially given that some of our users were under the age of 13. The solution was too literal.

This is a low fidelity mockup of the initial design idea I had.
Eventually, we revisited the idea to make promo art (on the right)

Final Design

With the notes that I received, I worked with the level designer to design an "intro level" that would walk players through the different features of the game. A similar tutorial experience can be found in Monument Valley which slowly teaches the player about the features in the game and only when they need to see them.


PROS:

  • Very approachable and conversational

  • Interactable and kept players in the game

CONS:

  • Takes more time for the user to go through

  • Requires resources from artists, level designers, and is more time to implement


FEEDBACK

These tutorials were much more integrated and seamless. Players could learn features while playing the game. The most difficult part of this design solution was balancing the levels to not overload the players too quickly.


UX WRITING

Dot is the chatbot that we designed to walk players through Calculator 2: The Game. I had the pleasure of writing most of her dialogue. Here's some notes I had for writing her text:


  • Overly positive

  • Uses a lot of exclamations

  • Positive reinforcement

  • Simple words and sentences

  • Loves puns and cracking jokes


She brought a lot of levity and life to the game. Because she's only speaking to you in the second person, it feels very friendly.

This is the first intro to Dot you get in the game.


VISUAL DESIGN

To make the tutorials feel seamless and integrated we had a structure for the dialogue:


  • Text was contained within a chat bubble asset

  • Dot was always in the top left corner using one of her many animated expressions

  • Player would only have one response


Dot's speech was heavily inspired by the way the Google Assistant talks, and her art style was inspired by Tamagotchi characters.

LEVEL DESIGN

The level design was the most complicated part of the process. I love puzzles and I LOVE a good challenge so, the initial levels I designed for these were way too hard and jumped in too fast for a new user. Some feedback I got was to:


  • Only introduce one new button/feature at a time

  • Isolate the new feature/button so the user can focus just on that info

  • Make it sooo easy they can't mess up

Every new button has a brief intro and a very easy level that goes with it.

Outcome

We brought the game to PAX East, a gaming convention, to get some feedback. Our goal was to be able to watch a user go through the onboarding without having to guide them or point them in any way. Overall, it worked! We ended up trimming the text down based on the then shipped the game with these tutorials.


NEXT STEPS

If I were to continue working on this project, I would love to explore:

  • Chatbot interface

  • Audio tutorials

A chatbot interface could work really well with the character and the existing dialogue system. Audio tutorials could move the users along without using screen space to show text.

Here's an idea I had for a chatbot interface.

Infinite Jonathans

Branding, Mobile UX/UI


ROLE
UX/UI Designer


DURATION
2 weeks


TEAM
1 Developer
1 Game Designer
2 Artists
1 UX/UI Designer


TOOLS
Adobe Photoshop
Adobe XD

BRIEF OVERVIEW

Infinite Jonathans is a multiplayer choose your own adventure game where the choices and fate of Jonathan, the main character, are decided by players' votes. This game was one of the first narrative-focused games our studio has shipped. The narrative and art in this game are very playful and comical, and I wanted the UI to reflect that. I was tasked with:

  • Redesigning the mobile user interface

  • Designing the visual identity

  • Prototyping an onboarding experience.

For this project, I worked with a lead designer who provided feedback and outlined the project requirements. I also worked closely with the artists to make sure the interface and art were cohesive. I handed off my prototypes and designs to the lead developer once they were finished and ready to be implemented.

Problem

  • Prototype an onboarding process for a narrative-based game

  • Redesign the visual identity


Early Solution

My first idea was to show a comic book style animation explaining the rules and universe of the game. In the end, I imagined it would be voiced and be the first thing users see when they enter the game.


PROS:

  • Lots of room for creative worldbuilding

  • Very immersive

CONS:

  • Takes up a lot of time of the user

  • Requires either headphones or a quiet space


FEEDBACK

The most important feedback I got from this design was that forcing the users to have headphones or be in a place where they needed to hear it, was not user-friendly. Pulling in extra resources for this prototype also would have been very expensive for the team and based on our timeline, I decided to take the feedback and instead:

  • Make the onboarding text-based

  • Make it faster for the users

  • Make it less expensive for the team to prototype


*This is all placeholder text


*This is all placeholder text

Final Design

For every step of the process, I kept having to remind myself to "keep it simple". The mechanic of the game was not unknown and never changes so keeping it short and getting the players in the game as fast as possible was the priority.


PROS:

  • Short and simple

CONS:

  • Very linear

  • Not as immersive



INTERACTIVE PROTOTYPE

On one hand, I had originally pitched the hyper immersive animated onboarding and on the other hand, I prototyped and handed off the design for this streamlined version. I do think if I had more time and resources there could be a happy medium that combines both prototypes. This was one of the first narrative-based games Simple Machine has shipped so I wanted to design an onboarding that would reflect that whimsy of the game world.


TAKEAWAY

One design element I would like to revisit in the future is the body text font. I would be interested in trying a font that is simpler and maybe more legible for people with dyslexia.

VISUAL DESIGN

  • Organic blobs

  • Comic-book inspired fonts

  • Bright colors


Most of the art for Infinite Jonathans was completed before I designed the visual identity. My task was to design a user interface that fit the mood, colors, and overall narrative that was drawn by the artists.


TAKEAWAY

One design element I would like to revisit in the future is the body text font. I would be interested in trying a font that is simpler and maybe more legible for people with dyslexia.

Outcome

The game is currently in development but my onboarding process was handed off to the developer to be implemented.


Next Steps

If I were to continue working on this project, I would love to explore:

  • Audio transciption

Because the game is a complete narrative experience, it would be interesting to see how we could adjust the interface to be mimic an audiobook. This shift would make it accessible to a wider range of people.


EDHREC

Website Redesign


ROLE
UX/UI Designer


DURATION
4 weeks


TOOLS
Figma
Adobe Photoshop


WEBSITE
edhrec.com

Coming Soon

Write up is a work in progress!
In the meantime, enjoy some large images. :)

App Icons

A mix of app icons I've had the pleasure to design.
Some of these icons ended up becoming the final versions live in the App Store.
Others are concepts that served as stepping stones along the way.


Social Media Assets

Below you'll find various digital assets I designed for Social Media and marketing.
These were posted by the @simplemachineHQ Twitter account.


Twitter Marketing

Designed to help promote upcoming games, boost visibility if we were featured by Apple, or keep people in the loop about email newsletters and beta testing.


Tweet Star Twitter Campaign

Twitter campaign assets I designed to go alongside the release of a game called Tweet Star.
This campaign includes word puzzles, a countdown, a blog post, and an event.



Web Assets

A mix of assets I designed for our website, Twitch, Discord, email newsletter, and blog posts.


Branding

These were either used internally or modified to be used for Twitch and Discord.


Blog Posts

Some visuals I put together for The Making of Tweet Star, a blog post I co-wrote and edited.


Misc

Just some fun icons I drew. :)