Huddle is a cute demo multi-player game built in Unity with C#, done in under two weeks. This project required that players would have an emotional response and would need to work together to solve a problem.
There are few common code snippets I used that are pretty standard stuff for working in Unity, namely the singleton pattern. As for external stuff I used : I used a tweening package called DoTween a few times, I downloaded an external font and some of the secondary artwork but most of the artwork is original (UI panels, jello-square players, etc).
GitHub Repo: https://github.com/emontecalvo/huddle
Watch me and a friend play this game as we try to stay warm while gathering fuel for the fire.
Bartholomew forgets that hula-skirts don’t go on your head
A game available on the Android store, built with the Phaser game engine.
process: I dove into tutorials on Phaser, while sketching out a game idea. I would follow along with a tutorial, next dive into trying my hand at something original, then back to another tutorial, then back to my project. I conducted rapid user-research within a circle of gamers to check on the fun-factor of the game idea and usability with the website prototype. Game art was created using Sketch and GIMP. I coded this using JavaScript and, after writing my own physics, discarded that in favor of the built-in Phaser physics. Launching the game required a series of exhilerating hoop-jumping, utilizing Cordova and IntelXDK. Splash pages, thumbnails and icons needed to be created within a moment's notice to launch on time.
results: Mondo Is Phat is live on the Android store, the result of a five-day learn-it-to-make-it-to-launch-it game.
objectives:
Learn as much as possible about a new technology stack as quickly as possible.
Create an original, relaxing game with original code.
Create original artwork.
Conduct user research and testing if possible.
Get a live project up on the Android store.
Five-day turnaround for all of the above.
Generate smiles from players.
initial research:
Gathered tutorials on Phaser, both text and video.
Start the process of setting up a Phaser project and getting familiar with moving around in the engine.
After a few test-run mini-projects, write down game idea outline.
Test game idea on fellow gamers to see which storyline resonates best.
Dive into writing physics, only to discover using the built-in physics will be better given the short turnaround time.
user persona:
Given such limited time, the scope of the game would need to be short and sweet.
Mobile games are typically used in short intervals (as opposed to desktop or console games where the user is usually more committed to playing for a longer chunk of time.
The game is designed to be relaxing and requires minimal effort; a simple piece of entertainment.
Typical user would be somebody who needs a laugh while standing in line at the grocery store or after a hard day at work. The user doesn't need to think about the game after they put it down or when they start playing. The lead character moves easily with minimal effort.
wireframes:
Game Backstory: Mondo is a Phat and Phabulous cat. He owns it like a BOSS! He eats what he eats, he hates what he hates and does what he wants. All he wanted was to eat and sleep, but the haters wouldn't leave him alone. Sometimes, there is a peace that can only be found after war. And today, Mondo got out of the house.
Game Objective: This is a relaxing game. Mondo eats the mice, chihuahuas, and food. He likes only tuna, strawberry jam, hot cocoa and scrambled egggs. Belly-bop the enemies (mice and chihuahuas). Jump to get the food. Watch your vengeance points accumulate.
Just a few screens/scenes will be needed.
Forward/backward buttons only need to be touched once for mobile, but it was discovered they were more fun to click multiple times on the web-version, so game was adjusted for that after user testing.
Short backstory is shown on the intro screen.
Short instructions / objective.
Outline of scene and character movement.
learning process & other adventures in hoop-jumping:
First time dive into Phaser also led into a first-time dive into IntelXDK and Cordova, with only one day before the deadline!
Setting up the SDK file required very specific icons, splash pages and thumbnails in various dimensions, which had to be created on the spot.
Setting up an Android developer account was relatively simple.
I was impressed with Android's violence survey, and how accurately it was able rate the "violence" of this game (cartoonish, the character just swallows his enemies and Android rated this as "mild fantasy violence").
Once SDK file was built, and the correct art for the Android store is available, it was live on the store very quickly, under two hours in this case. Not bad for a first time launch.
results:
Successful delivery of a Phaser game.
Original game with original code.
Downloads from across world have rolled in, from the USA to Australia to the UK to Vietnam.
Under 50 downloads, but $0 spent.
The Daily UI Challenge is a series of 100 UI projects (http://www.dailyui.co/). #dailyui
process: Originally I started the Daily UI Challenge using only Sketch and limited myself to a 15-minute timebox. About 3/4 of the way through creating 15-minute designs in Sketch, I wanted to make these interactive. Looking for a way to practice my React, JavaScript, C# and Unity skills, this seemed like a good challenge and with 100 UI's, the project will be a substantial UI library. The original Unity container system for a mobile-device had to be redone after deciding to launch the demo site via WebGL. The React demo utilizes GitHub pages and involved a substitute "Home" component.
results: The Unity portion is about 30% complete, and the React portion is about 10% complete. The WebGL demo site has some clunkiness. So far, it has been easier to obtain a professional UI with the React.
objectives:
Complete all 100 Daily UI outlines in Sketch.
Implement Daily UI designs in Unity.
Implement Daily UI designs in React.
Continue to refactor code as patterns emerge.
Deploy live demo sites.
initial designs & iterations:
Initial designs done daily in Sketch with only a 15-minute timebox.
The designs I personally loved most were generally the earlier projects.
Designs were done "fresh", I only looked at other designers work after my creation in order to compare, which is opposite of how I generally work as I prefer to consult the work of experts and gather ideas.
unity:
While Unity has quite the built-in GUI system (UGUI), in order to improve my C# skills and deepen my knowledge of the Unity framework as a whole, the Daily UI's were created with C# code for most of the interaction instead of relying on UGUI for the heavy lifting.
Prior to launching the demo site with WebGL, the container system developed worked perfectly and transitions were fairly smooth. After deciding to launch the demo with WebGL, the container configurations needed to be re-done and still need improvement as the interactions aren't as smooth and the visuals aren't as sharp.
Despite Unity's asset-management issues for production-level apps (scale; versioning doesn't translate well to dynamic updating verses bundles; memory management has poor control over visibility over what is available in memeory at any given time), it has been a joy and a pleasure to work in Unity again after a time away.
Favorite Daily UI was an animated timer, showing a cloud emptying it's rain out as the timer counted down.
react / redux / css:
Components were subdivided by days of tens, and then single days within those components.
Currently there is only one action and reducer file, but that will need to be expanded as the Daily UI's grow.
Demo site was launched by using Github pages for hosting and creating a substitute "Home" component to highlight my favorite of the UI's.
Professional-looking UI's utilizing React and CSS were easier to achieve than with Unity.
I enjoyed exploring color gradient transitions with CSS.
Be it the 80's nostalgia or CSS color gradient transitions, my favorite Daily UI in react was the User Profile, featuring the Princess from the movie The NeverEnding Story
results:
All 100 Daily UI designs completed in Sketch.
Demo site for the Daily UI's in Unity is up.
Demo site for the Daily UI's in React is up.
Produce-scanning app.
problem to solve: We have built the technology that can take a picture of produce (fruit, vegetables) from a phone and analyze how fresh it is, and even see if it is organic or not - but can a regular person understand, use and want to use the data? Can we get results specific enough to make a difference to help stores?
process: Deciding on the scope of the app was an ongoing process due to the interest garnered by different companies at random intervals. Originally the idea was that Poma would be a consumer app, but after industry interest from companies dealing in produce, a B2B app was pushed through. First engineered with Android studio, the second iteration involved a rebuild in Unity. As talks with stakeholders emerged, a corresponding website would also be needed. Several trips to offices, farms and warehouses were made, both to gather information about users as well as the business needs and state of the produce at each phase. A wide range of users with different jobs in varied conditions would need to be able to use the app, with management and corporate employees accessing the website to generate data and reports.
summary: The Poma technology has the ability to take a picture of a fruit or vegetable and analyze how ripe and fresh the product is. Pictures are even able to tell the difference between organic and conventionally grown fruit. The science is fascinating, and Poma has the potential to create a new market in the produce business. My UX involvement has been on an as-needed basis (ranging from every other month to every day).
logo & sticker design
The white color in Poma’s letter “m” is actually intended to be clear as a sticker, and that would be where we would get to see the vegetable/fruit.
Take a picture of the produce with your phone and Poma analyzes how fresh / ripe it is, comparing the color of the produce through the sticker to the information in our database.
user persona:
User personas were created to foster empathy for engineering and focus on user goals.
Four main categories of users were identified through research: corporate employees, middle-management, warehouse employees and produce clerks.
Conditions would vary from user to user, the app being used in the produce isle, at a warehouse, on a farm, an office and boardroom.
wireframes:
Wireframes were requested for stakeholder meetings, semi-high fidelity
Wonderful learning process for me as the UX designer, because although the wireframes I created were not in the style I wished them to be (by request of the founder), they were ultimately audience-appropriate for the other stakeholders.
The website would need client views, as well as views that were Poma-dev team only.
The information architecture at this point in time had not solidified and we were presenting an overview for feedback.
results:
Two patents achieved (and counting!).
First round of funding was technically achieved (although later declined by the founder).
Currently presenting to investors.
