When I first joined the team, the game was close to its end of Q1 Alpha release. A core part of why this was an invaluable experience for me was because I had to opportunity to engage in user research and behavior analysis in depth for the first time in my career.
Working at the studio requires you to quickly and elegantly deliver animated and static mocks which illustrate player behavior and interactions with the game. My mentor was instrumental in ensuring that I was exposed to different opportunities and design challenges.
- Creating a product that provides the player with a pleasant and intuitive experience.
- Designing with accordance to budget and timeline constraints.
- Designing systems that are compatible with past builds and in accordance with game design specifications, while keeping scalability in mind.
- Designing the product with the end user’s satisfaction and needs as the primary motivation.
The overhauls and designs usually involved the following steps:
- Identifying the problem: What exactly are we trying to solve?
- Researching existing solutions: How did other designers solve similar problems?
- Identifying constraints: Will the existing resources allow for the overhauled specs?
- Prototype & usability testing: Let's build it out and get more hands-on with the design!
- Iterating the solution: What is not working, and how do we go about fixing it?
Part of the process for collaborative design is for UX designers to work synergetically with producers, game designers, and developers. A big part of this was thanks to a streamlined workflow.
A large part of the streamlining involved laying groundworks such as establishing style guides and an UI library in both Adobe CC and Sketch.
In this case study I will showcase and explain the steps behind the implementation of the Dossier system.
Flinto and Zeplin were used to do the heavy lifting, these tools vastly improve the speed at which the team was able to complete and collaborate on tasks. Flinto allowed us to quickly build out interactive (90% functional) prototypes extremely quickly, with full featured workflows and animations. Zeplin streamlined the transition from design to engineering by turning mockups into interactive design specs, enabling developers to generate assets and style code directly.
The UX team suggested that a closed beta would provide valuable user feedback for the studio. The playtest was designed in the form of a Longitudinal Diary user studies, and over 50 users participated in the playtest.
I was also granted the opportunity to speak in person with some of our users. What was especially valuable for me in this experience was being able to digest and dissect their comments from both a logical and emotional standpoint.
One major takeaway I learned from this exercise is the practice of empathy - putting myself in the user’s mindset and REALLY, I mean REALLY, understanding the user’s frustrations first-hand. A significant challenge I encountered during this exercise was to remove personal bias when reading into an user’s responses and behaviour. Stopping oneself from injecting their own narrative when analyzing the user feedback is especially important.
Keeping these core ideas in mind, the designs needed to be simple to use, simple in implementation, potentially scalable and also delivered in a timely fashion due to the pressing budget and timeline.
On a few occasions, the game design and UX design team would come into disagreement with the direction or the implementation of certain features.
Under these circumstances what usually ended up happening were collaborative brainstorm sessions. The teams would dissect the problem at its roots, and the points of discussion usually revolved around why a specification or implementation is necessary and whether it will bring value to the end users.
In some ways UX and game designers are almost like fire and ice — game design usually wants complex game mechanics that increases the amount of meaningful decisions the players are able to make (the more stats the better, the more options the better); whereas UX designers work with the fundamental principle of reducing cognitive load by simplifying game experiences.
One major issue that I often ran into was the consideration for the scope of designs. Often times the designed systems are rendered obsolete by existing specs, and major audits are needed. The challenge in these situations would be to always consider the timeline, and finding a solution that is optimized for UX, game design, and development resources. Sometimes this would mean settling for a "budgeted" design, but that's okay. Because sometimes the "best" UX solution is too expensive to implement. Finding the sweet spot in what works for all disciplines involved requires a delicate balance.
It was also interesting because this was my first time working with a games studio. Due to Uken's team structures, I learned that smaller game studios tend to operate in a way that's very similar to agile startups, and similar problems are always encountered. Despite the challenges and problems we faced, I could say that I'm definitely more interested in games development as a whole, and will be looking for opportunities to work with games studios in the future.
Big shoutouts to the CloudBreakers team for having so much faith in me! Especially to my mentor/good friend/supervisor Brian Lin, thank you for the advice you've gave me in all aspects of life. Whether it was over coffee, one-on-ones, or beer, there's always valuable to takeaway from our conversations.
Uken definitely was an amazing experience for me, tons of talented individuals. I'm definitely interested in how the company will develop moving forward.
- Vector graphics are edited using Adobe Illustrator
- High fidelity mocks done using Adobe Photoshop
- Low fidelity mocks done using Sketch
- Animations done in Adobe AfterEffects
- Prototyping done using Flinto
- Hand-off process performed in Zeplin
Roadmunk is an enterprise SaaS platform that enables product managers and their teams to communicate strategic roadmaps to shareholders and their organization. At its core, Roadmunk is a roadmap visualization web application.
I completed a variety of tasks for Roadmunk, from graphics, branding, web development, to product design. I was instrumental in ensuring the product’s success during the four months that I worked there.
Application UX / Product Design
3 Click MentalityTrying to design so that every option is less than 3 clicks away. Hovers and drags count as half clicks. Keep track of the design and try to minimize the distance. The routes should be as direct as possible.
Reducing Cognitive LoadCognitive-load is the mental strain required at any given time to process what the information/accomplish tasks. The objective is to try to reduce it as much as we can, so we can give emphasis to the roadmap info users add.
Tactful TransitionsTransitions are used throughout the app. Hover over any clickable div and see this effect. The rationale behind this was to make the user feel more in tune and have a pleasant feeling navigating around the app.
Here are some features that I worked on during my time at Roadmunk.
Friendly and upbeat colours are used throughout the website. View it live at roadmunk.com/features.
- Vector graphics and icons are created using Adobe Illustrator
- High fidelity mocks and graphics created using Adobe Photoshop
- Mockup process created using UXPin
- HTML/CSS for frontend development
LEGGO mobile app
In its core, LEGGO is an event aggregation mobile platform designed for students, by students. The problem the application tried to solve is to help students find different sorts of social and community events, from parties to raves, from professional talks to campus recruiting events.
After studying the responses of over 40 students from a user survey, I was able to create three major personas. These students are those who are frustrated with finding and organizing campus/extracurricular events.
App UI&UX Design
The core functionality for LEGGO is for users to bookmark, archive, and browse for events. In order to make it easy for users to search and find relevant events, a deliberate product decision was made to categorize events based on when they are happening - today, tomorrow, or in the future.
Landing Page Design
- Adobe Illustrator for vector & icon graphics
- Adobe Photoshop for high fidelity mock ups
A company founded and based in NYC, Noom is a mobile app aimed to treat chronic and pre-chronic conditions through lifestyle change and behaviour change by pairing diagnosed patients with personal coaches.
During my short time at Noom, I was able to take ownership over a number of different projects, from "vector science", establishment of web and app interface guidelines, animation, to product design. It was a blast working with the residence design team.
B2C users are the more traditional user group. When designing for B2C users, the most important thing to keep in mind is the user experience (discoverability, accessability are some of the key things to keep in mind). B2C users have the option of a paid upgrade to access the full features of the app. Upselling and conversion are the goals to keep in mind when designing for B2C users.
B2B users are those placed in the program by their healthcare provider or insurance agencies, and gain full access to all the paid features upfront. Security, customizability, and reliance are the key design constraints when designing for the B2B clients. The emphasis of design is shifted away from the end users, and the focus is placed on the business partners/clients.
Each client requested different features to be made available on these deployment sites. As a result of this, implementing each one of these customized sites required a significant amount of effort from the development team.
To address this problem, the proposed solution was to establish a shared style guide which documents the behaviour, state, and visuals of each UI element. Providing a coherent, and scalable style guide allowed us to maintain the visual language throughout the different workflows, while significantly reducing the development time required for each deployment.
The biggest challenge I faced while designing the style guide was trying to keep the visuals in accordance with the brand, while addressing all the different behaviours and states.
Lingo was instrumental in streamlining the hand-off process. It provides developers access to the assets in SVG and PNGs of different scales.
- Sketch for vector assets and mocks
- AndroidStudio for testing assets
- Animations done in AfterEffects
- Prototyping done on Marvel
- Hand-off process performed using Zeplin
Hiya! I’m Javan!
I previously designed for Noom Inc, Uken Games, and Roadmunk.
As of December 2017, I've completed a total of six internships, with notable placements at Roadmunk, Noom Inc, Uken Games, and Symbility Intersect.
Right now I'm in the process of applying for a HCI, Design, or engineering related Masters program to further my education and training as a designer. Let's chat!
Interface & experience design
User testing & research
Interaction & animatics design
Sketch & Illustrator
InVision / Marvel / Flinto
Hobbies & Interests
Sprites & Pixel art
Game of Thrones