RP_Logo.png

Two Designers with One Idea

My friend Alex (Another product designer) and I had an idea in 2013 for a simple mobile game based on the restaurant game where you side a sugar packet across a table and see how close you can get to the edge without falling. It was a very loose and rough idea, but never had the opportunity to work on it at that time, but in 2016, we finally kickstarted the project and began making our game a reality.

 
 
 

The Problem

How do two product designers who love video games go about creating a high-quality, fun and addictive mobile game with limited game development knowledge? This question became our biggest obstacle in our early stages of the game's development, and Alex and I tried solving this by learning the basics of Unity and the C-Sharp programming language.

The Solution

Although our programming capabilities hit a wall, we used our skills as product designers to push the user experience and game design to the best of our abilities. The most important factor was gameplay, and we went through several concepts of how the game should be approached. We made sure that fun and simplicity were always the main focus of Sugar.

 
 
 

Competitive Analysis

We studied several mobile games to better understand the intricacies and nuances of game design. In our analysis, we noted the things we felt these games did well, and things we felt they did poorly. We realized that details such as sounds, particles and animations played a huge part in making a game feel solid and polished. Below are only some of the games we studied.

 
 
 

Exploring Game Mechanics

We decided that because of our limited Unity and game development experience, we could tap into our animation background and utilize After Effects as a means to visualize our gameplay mechanic ideas.

 
 
 
 
 

Art Style Explorations

We went through several explorations of visual design and art styles before deciding on one that we both felt confident in. The aesthetic we chose was very fun to work with, but it was also attractive to people we were sharing our project with.

 
 
 
 
 

In-Game User Flows

Although Sugar is a simple mobile game, we still went through the process of building the high-level user flow in order to visualize the overall user experience. This helped us pinpoint all use cases and scenarios throughout the game.

 
 
 
 
 

High-Fidelity UI & Prototyping

Alex and I collaborated on the branding and game design for Sugar, including the character design and assets. We also placed a large importance on the user experience and gameplay mechanics, and I created the prototype animations for the developer to build from. All music and sound effects were created by me but Alex and I worked together on finessing the perfect sounds and music for the game.

 
 
Screen Shot 2017-03-02 at 1.31.53 AM.png
 
 
 

Development & Release

We meticulously designed every single bit of interaction animation to help us communicate our ideas to our remote developer. We even made sure all the fine details in how speech bubbles would animate, the sugar particles, table transitions…etc., were perfect and matched our mock ups.

Our Developer would send builds and we would user test, log our feedback, build new assets and animations, and he would send us new builds again. This process eventually got to our current build, and we are narrowing in on a first release to the App Store and Google Play.

 
 
 
 
 

Expanding The Sugar Universe

We have brainstormed several ideas to expand the game which include creating a plethora of fun, charismatic characters to play with, challenging obstacles, multiplayer functionality as well as an iPad version of the game.  Another large scale idea we have played around with is adding the concept of worlds to help build out this universe we have created for Sugar.

 
sugar-thumb.jpg
 
 
RP_Logo.png
 

Simplifying The Pet Adoption Process

Our goal is to lower the frequency of animal euthanasia and increase the rate of adoption by creating an experience that is efficient and enjoyable for both potential adopters as well as animal shelter and rescue employees. RescuePals matches animals to a user's specific criteria from neighboring animal shelters and rescues, and allows the users to connect directly with the shelters from within the app.

 
 
 

The Problem

According to the 2016 release and euthanasia rates from the Los Angeles Animal Care and Control Center, about 20% (3,057) of all dogs that entered it’s shelters were euthanized, while about 80% (11,781) were adopted. For cats, about 59% (9,295) were euthanized and only 41% (6,471) were adopted. 

While the ratio of dogs being adopted vs euthanized is better than that of cats, these numbers can always benefit from being improved so that the rate of euthanasia goes even further down and more animals find loving homes.

 
 
 
 
 

The Solution

RescuePals matches animals to a user's specific criteria from neighboring shelters and rescues, and allow the users to connect directly with the shelters from within the app. This solution, combined with an experience that is enjoyable and easy to use, aims to lower the rate of animal euthanasia and increase the rate of adoption.

 
 
 

Personas

I interviewed 6 people, half of which were current pet owners and the other half were interested in looking for pets to adopt. Based on these interviews, I created 3 personas for the development of the product.

 
anna.png

Kaitlin

Empathy, Integrity, History

31, Married, Regulatory Manager, Los Angeles CA, 2 dogs

“Shelter’s never provide enough details about the animals they receive. I want to know as much as I can before going in."

Goals: Gain a better understanding of the animal's history. Adopt a pet that will live harmoniously with her 2 other dogs.

mark.png

Glen

Freedom, Data, Integration

48, single, Production Artist, New York NY, 1 dog 1 cat

“There are too many animal shelters to keep track of. I wish I could browse through all of them in one place.”

Goals: Quickly browse through available pets, regardless of location. Adopt a pet that will live happily with his dog and cat.

tiffany.png

Tiffany

Intimacy, Relationships, Communication

22, Boyfriend, Massage Therapist, Orlando FL, no pets

“Too many shelters and not enough time. I wish there was one place to see them all and quickly contact them."

Goals: Have intimate conversations with shelter worker when learning about the animals she is interested in.

 
 

IA & User Journey

High-level flows allowed me to better understand the solution and pinpoint strengths and weaknesses in it's concept. From there, I continued to brainstorm and refine the idea, always making sure to stay in-line with what the user's needs and goals are.

 
 
 
 
 

Wireframes

Once the overall goal is defined in the flow stage of my process, I move onto rough sketch wireframes that go alongside the defined flow from earlier. These sketches are typically very lose, as the process of building a product  is always organic and changing. Slowly going from rough sketches to a more refined wireframe allows the design and layout of the product to take shape, while still being flexible.

 
 
RP_Wireframes_Sketch.png
 
 
 

Branding

I believe every aspect of design should be considered for the user and their experience when using a product, which is why branding and visual design also played an important role in the development of the RescuePals app.

I started off by brainstorming fun, but meaningful product names and eventually landed on RescuePals. From there, I sketched out thumbnails for the logo and began refining the brand.

 
 
 
RP_Branding_Sketch.png
 
 

High-Fidelity UI & Prototyping

During the hi-fidelity design part of the process, I made sure to always stick with the brand's visual language, while continuing to adhere to the user’s goal with the product.

After designing the hi-fidelity screens, I prototyped the user flow with InVision. This stage is very important as it allowed me to experience how the product would feel, as well as test it to users and get their valuable feedback or validation. From there, I go back to refining the product based on user feedback, as there will always be ways to improve an experience for the user.

 
 
Screen Shot 2017-03-02 at 1.31.53 AM.png
 
 
Onboard | Inquire Flow V.02.png
Screen Shot 2017-03-02 at 1.32.24 AM.png
 
 

Scaling

What's outlined here in this project is only a small portion of the user/adopter side of what RescuePals has to offer. Of course, there is an entire administrative and management side to consider in order to fully realize this product. When considering the admin portion of RescuePals, it is easy to understand how powerful a tool it can be in a shelter's workflow.

 
rescuepals-thumb_V02.jpg
 
 

Overview

Our web team at Ubiquiti Networks was tasked with redesigning and rethinking of the user interface and experience for an out-of-date and broken Support page. The old Support page at that time suffered from a confusing, slow and inefficient user experience which did not serve well for a page that has more than 200,000 visitors per week.

 
 
 
 
 

My Role

As the UI / Visual Designer for Ubiquiti's web space, I worked closely with the community team and stakeholders to research exactly how our customers interact with our Support page in order to rethink an experience that serves our customers exactly how they expect.

The Goal

The primary goal for the Support page redesign was to design a user experience that functioned quickly and efficiently for the majority of our users, so that they can come into the page, find exactly the firmware or documentation they need and then finally download it. 

 
 
 

Process

Clear communication across several different teams within the company was key in designing an efficient user experience. From our collected user feedback, we discovered efficiency as the key component in developing a better designed Support page for our users. We implemented quick points of user interaction such as auto-complete and auto-load search as well as a thorough product navigation tree which would display to our users only the most up-to-date firmwares and documentations available for download.

 
 
 

High-Fidelity UI

 
 
 
ubnt-downloads-thumb.jpg
 
 

Overview

iOS user experience and user interface design for REVOLVE Clothing's shopping mobile app. The mobile app UX and UI was completely redesigned based off the REVOLVE rebrand in 2013, which changed it's previous dark color scheme to a brighter, more lively and upbeat aesthetic.

 
 
 
 
 

My Role

As the UI / Visual Designer, I worked closely with the Senior Visual Designer, development team and Director of Product to collaborate on user-flows, user experience, UI design and branding consistencies. We also collaborated to adapt important desktop experiences such as Checkout, Search and Size Guides into a rich mobile experience without any compromise.

The Goal

Our goal was to provide dedicated REVOLVE customers a simple, yet immersive and personal shopping experience through the iOS app. Integration of popular social media platforms including Facebook, Twitter and Pinterest played an important role in connecting with our current customers as well as future customers, which in turn would lead to high conversions and sales.

 
 
 

Process

The Product Development team worked together to analyze the user interactions on all the features of the desktop site. With our findings, we brainstormed to develop the most simple and efficient approach for the mobile user interactions, with the ultimate goal of driving more sales and increasing conversion.

 
 
 

High-Fidelity UI

 
 
 
revolve-app-thumb.jpg