Otograph
Otograph is a high-score tracking app for arcade rhythm games where user can track, record,
and comparetheir playthrough statistics across all rhythm game titles.
Client:
Google
(Portfolio Program)
Product:
Mobile App
Role:
UX Designer
Time:
Sept 2022 - April 2023
Overview
Otograph is an arcade high score tracking app
designed for rhythm game players.
Otograph’s main features include an aggregated
high score tracking history of a player and social features
such as local leaderboard for a selected arcade rhythm game.
Problems
Players have been having issues
with a way to view, record, and
share their high score achievements
after an arcade game playthrough.
Goals
Design an app that helps
arcade rhythm game players to easily
view, record, and share their high
score achievements
after an arcade game playthrough.
Responsibility
Conducting interviews, paper and
digital wireframing, low and
high-fidelity prototyping, conducting
usability studies, accounting for
accessibilities, and iterating on designs.
Understanding the User
User Research
Summary:
I conducted user interviews to understand and empathize with the users I’m designing for and
their needs. A primary user group identified through research was young adults who plays in
the arcade regularly. This user group confirmed the initial assumptions about regular arcade visitors.
The user groups generally have similar characteristics. The main difference between user groups
is their frequency and main goal when they visit the arcade.
Pain Points
1
Process
Opening their phones quickly
to snap their high scores can be
very tedious for players
because they have to be fast,
which results in
bad quality high score images.
2
Accessibility
Several arcade machines have
region-locked scoreboard
which prevents players
to view their high score
outside of the arcade region.
3
Support
Arcades do not generally provide
any recording support
for players who want to
record their gameplay or high score.
Persona
Introducing: Andrew
Andrew is an employee who works in a national company. Growing up, Andrew has
spent most of their time playing arcade. Andrew also met most of their friends in the
arcade and has considered himself a rather competitive arcade player. Andrew still
goes to the arcade once or twice a week, mostly after work, playing their regular
routine that also doubles as an exercise. Andrew likes that sense of achievement
they feel when they beat someone else’s high score in the arcade machine. Not only
that, Andrew also likes to show it off to their friends by recording their high scores.
However, due to the limited features offered by the arcade to record a player’s high
score, Andrew finds that sometimes they didn’t have enough time to record because
of the timer in the arcade. Andrew also dislikes when some of their arcades are
region locked, preventing them to actually check their scores online. Andrew would
like to have an easier and less restrictive way for them to show off their skills
in the arcade.
Problem Statement:
Andrew is an office worker who needs an easy way to record high score in arcade without restrictions
because arcade timers and region-locked statistics makes it difficult for Andrew to record his score.
Designing Otograph
Wireframes
Paper Wireframes:
Digital Wireframes:
First, I made a paper wireframe as a “sketch” for my idea.
After that, I translated the wireframes into Figma to make
a digital version of it, which will be used later used for my
first iteration of user testing.
Mockups
Some examples of the mockups I made for the high-fidelity prototype
Accessibility Considerations
1
Dark mode is used
to lessen the strain of the eyes
and make the graphic elements
(such as song jackets) pops out.
2
Keeping the overall design simple to
ease out the user flow, while still
incorporating bold images like
the ranks in the high score page.
3
Used Icons to make
action buttons and navigation
easier to identify.
Sticker Sheet
As this project was a small-scale one, I developed a basic sticker sheet to help me streamlined
my design, ensuring that everything is consistent, while acting as a design documentation
for this project
Usability Studies
I conducted two rounds of usability studies. Findings from the first study helped guide the design
from wireframes to mockups. The second study used a high-fidelity prototype
and revealed what aspects of the mockups needed refining.
1
User wants a social feature.
Users want to view a more detailed
progress in their statistics.Visual components are important.
2
The adding friends process was unusual
and confusing at first.
After conducting the second usability study. I made changes to the mockup according
to the user’s feedback regarding the flow of adding friends in Otograph.
Going Forward
Impact
Otograph makes users feel happy that
they can keep track and share their
arcade playthrough in just one app.
“Wow! I'm happy because now I don't have to go
all of the trouble to check each arcade game's
website because everything is integrated”
What I Learned
While designing Otograph, I discovered
that the first iteration of the app is just
the beginning of the process. Usability
study and user feedbacks influenced
the iteration of the app’s design.
Next Steps
1
Conduct another round of
usability studies to validate
whether the pain points
users experienced have been
effectively addressed.
2
Conduct more user research
to determine
any new areas of need.
3
Tidy up the design components
to make a more consistent l
ooking app design.
