Guilherme Theodoro's profile

Game UX & UI case: Deed redesign


Project: Deed 2.0
Product: Game Software
My role: UI/UX, 2D Art (game elements, assets & icons)

Deed is a Strategy game – positioned as an Educational Game – based on the board game Sustentable Business. The objective is that the user of Deed has a rich and pleasant game experience, so that, in addition to having fun, the user invites friends to do business and make the planet sustainable.

Briefing
Neither the target public nor the directors were happy with the visual interface or interactions of the first version made by another designer. My role was to research, redesign and test all UIs related to the second version (V2) and design new features collaborated with reviewing wireframes, navigation flow, user testing, asset updates and visual design (more than 130 screens to review and update) in 2-3 months. This was a project done remotely, being 90% home office and 10% in person for weekly or occasional meetings.

Before you start
In this content you will see more detecting and solving usability issues than UI design details.




Discovery
At the beginning of the project, analyzing the entire navigation interface and flow, I reviewed detailed heuristics by observing common characteristics, sum of task flow times, interactions and feedbacks, visual pattern, mental model, and shortcuts. Some observations before this analysis had been documented based on previous feedbacks related to usability, so I organized a report with all of them.

Heuristic evaluation notes on Google Seets.

Benchmark
to better knowledge of the usability position of the game in reference to the competition and competitive analysis of them to better understand the performance compared to games of the same segment.
The main reason for this analysis is the insights of usability ideas and
functionalities, performance, goals and retention strategies in each feature. Being able to evaluate several games and their implementations gives me an insight into what already works or does not work in the market.

Board and strategy games was compared during the benchmark.

Design

Wireframes
Once the new sprint implementations were decided upon, wireframes and studies were done to approve the screens and in some cases, low fidelity prototypes of them to test consistency.



Visual ID
I created a new guideline for visual identity that could synthesize the energy of the game and pass it on to the target user / audience, study of colors, typography, patterns, so that identity be consistent wherever it is implemented.

Study of colors. New, old and physical game.
Interface & Visual Communication
A new interface is born. Within the usability standards and best practices and its implementation guidelines, all functions validated after each implementation so that we could go to the next screen/sprint.

..

Key Changes

HUD
Problem: HUD without hierarchy regarding importance and unattractive.
Fix: New organization, layout and design, adjusted with the relevance of each item.

Business cards (image bellow)
Problem: Messy cards, poor organization of information and hierarchy. Depending on the screen size of the device it is not possible to make a good reading of what is written.
Fix: New data organization, color patterns and icons. Texts adjusted for all types of screens with good reading without use of resize.
Shortcuts and action buttons
Problem: Shortcuts inconsistency, same buttons with same actions in different positions.
Fix: A new guideline pattern for all basic shortcuts/buttons and FAB implementation, making navigation as natural as possible.

Match settings (image bellow)
Problem: User flow of match settings grouped into one screen, buttons and very small fonts for the devices, confusing.
Fix: New user flow divided into moments, focus on information and interactions.

Now its possible to select during the flow if players wants to play with random players worldwide or his friends.
Before there was some confusion because it was necessary to use pop-ups to select the players with whom to play, now everything is integrated into a sequential order.

Language and syntax  (image bellow)
Problem: System-oriented game language.
Fix: New friendly terminology based on user language and pop-ups without identity replaced by mentor, incorporated in the tutorial.

Results



"...it turns out that that initial launch of Deed was sort of a learning experience anyway, and so developer Sinergia Studios made the tweaks and fixes that the game needed based on feedback while it was live in the time since its launch, and in fact ended up even completely revamping the art style for the "real" launch of the game when a big version 2.0 update hit last month. Anyway, with all that backstory out of the way, after actually trying the game out at GDC I came away quite impressed with Deed." - Jared Nelson @ Touch Arcade

l'm;
,.,
..d.f

...

Game UX & UI case: Deed redesign
Published:

Game UX & UI case: Deed redesign

Redesigning Deed - the game

Published: