UX design is an interdisciplinary practice aimed at proposing, understanding, and enhancing relationships between people and the products and services they use. As a user experience designer, my work involves designing enjoyable, usable, and useful digital product interactions that help people in their lives in a meaningful way.
In this capstone project, I applied my understanding of the core concepts of user experience design toward the creation of a compelling digital user experience.
I will be identifying, planning, researching, and designing a digital mobile interaction that addresses a problem space, using the tools and techniques of user experience design.
YUGO is an app that provides a convenient GPS location platform, making it easy for players to connect with each other locally or far. The app allows direct messaging and gives players an efficient way to buy, sell, and trade cards.
The research I conducted showed that more than 80% of Yu-Gi-Oh players do not have all the cards they need to play competitively. Moreover, players encounter complicated platforms when trying to buy, sell, or trade cards with other players online. Because the transactions can be complicated, they do not trust these platforms.
Also, there are about 10 million Yu-Gi-Oh! players out there and the majority of those players not only play the game for fun but also as a way to supplement their financial income. In addition to that because of Covid 19, 6.7 million of those players face barriers to meeting other players affecting their income.
My initial user will be
Yu-Gi-Oh players that don’t have a lot of digital connections with the game community.
I believe my customer need to have access to cards. This need can be solved by negotiating a price or trading in the player community.
My biggest risk is for players who don’t have a mobile device or access to technology.
I believe there are not enough digital products for Yu-Gi-Oh players in order to give them tools to connect with one another. Because of that they can not develop knowledge or have access to the cards that they need.
I will know if I am right when I see many of my assumptions appear as common themes based on the interviews conducted.
Yu-Gi-Oh Players, feeling internal frustrations with the game.
Miami, Florida, USA
(18 - 34)
I performed a decontextualized method to conduct the interviews. The goal understands Yu-Gi-Oh Players and their experiences when trying to connect with one another. I am collecting qualitative data to empathize with and understand players' constraints when looking for other players or cards.
I conducted 4 user interviews in a decontextualized setting asking a series of scripted questions and completed by phone call and zoom recordings.
Through synthesizing interviewee pain points, motivations, and behaviors via Affinity Mapping, I discovered 4 themes that organically presented themselves.
After categorizing all my findings into behaviors, motivations, and pain points of my participant criteria interviewee, I was able to identify that players did not have a platform to connect and engage with one another which affected their social aspect in the game.
Although all of these themes play a role in contributing to my problem space, I wanted to refine my focus on social & communication theme.
Armed with primary and secondary research findings, I needed to ask myself a question to help guide me through this problem and keep the focus on the players and their needs.
After reviewing all the insights from the interviews, I was able to create a primary persona that represents and personifies the core attributes of an identified target user. This gave me a clear picture of different users’ expectations, pain points, and needs, and how they would potentially use a product solution.
Pedro wants to connect with other Yugioh players but is frustrated because he cannot easily find other players.
Using the primary persona of Pedro, and once I had all the information about my interviewees, I visualized the target audience’s experience and I was able to map his current experience when Pedro is trying to negotiate cards or looking for players to play and create an Experience Mapping.
I saw an opportunity for design intervention. Design a digital solution for a mobile device to allow Yu-Gi-Oh! players to connect virtually with each other to execute trades and sales of cards, and to share knowledge. The mobile app would speed up friend requests, making connections with players through a user’s GPS location to access resources and to buy, sell or trade cards a better and faster experience.
To begin ideating different functionality and tasks that my digital solution would need, I created user stories based on the persona developed from the pain points, behavior and motivation gathered from my interviews. The user stories helped me specify the functional needs of my persona.
My Chosen Epic, “Connecting with Players” was based on the persona and his needs. This Epic also was chosen because it encompasses the following user stories.
I expanded on my core epic for Connecting with Players, highlighting all the common user stories that direct me towards a primary solution. These user stories will help me create my primary user task flow.
Before jumping into the task flow for the solution that I have come up with, let’s quickly examine our most compelling user story that encompasses Pedro, my user's primary goal.
In order to begin to translate the user stories into tasks by determining what the main task flow would be, I chose the main user story:
As a player, I want to meet players online so that I can increase my knowledge at Yu-Gi-Oh! and engage with other players
Now it's time to show you my Inspiration boards that I organized using InVision. This is where I brainstormed a variety of ideas I wanted to try out when designing my wireframes and high fidelity prototype.
I collected visual components, elements, and other attributes to inspire my digital product. Referencing my UI inspiration board, I generated some core screens by sketching elements that will help me piece together solutions for Pedro’s connection problem. I looked at widely-used dating and messaging apps such as Facebook, Tinder, Messenger, Badoo, Grindr, and even email apps for inspiration. Not only does this give me a starting point, but it also allows me to see what kind of functionality my end users are already familiar with.
Referencing my UI Inspiration Board, I began sketching the preliminary layout and interface following the core epic mentioned before. The sketches captured the features and functionality best suited for my target user.
Based on my UI Inspiration Board I sketched many variations of my screens that were represented in the task flow diagram. These sketches include a Home, Map, Profile, Chat, and modal screens
In this phase, I referred to the solution sketches and UI Inspiration Board to translate the analog paper sketches into an initial set of grayscale digital wireframes and an interactive prototype. I used Figma to create my grayscale wireframes and a working prototype so that I could test my idea to see if the functionality of the app was working appropriately for my user target.
Now that I had a working prototype, I wanted to test my design and functionality so far.
User testing allowed me to gather real-time feedback in an unbiased environment so I could implement changes to my prototype that enhance the user experience.
During the user testing phase, I tested my initial prototype with a group of 10 users in two rounds.
During the first round of testing, the user would go through a series of tasks. I was able to gather a lot of valuable user feedback in a short period of time, having the opportunity to learn if the prototype had any missing actions, whether the app was working intuitively, and even what could be improved for a better user experience.
I made a list of comments, ideas, points of confusion, and body language that users showed me during their testing session that would make the app more intuitive and user-friendly and implemented the changes designing a revised version of my prototype
Now that I had implemented the feedback changes from the first round of user testing in the prototype, it is time to test again.
then I did the second round of user tests to continue to improve my prototype. I selected five new user testers and ran through the same process.
After conducting two rounds of user testing, I was able to gather all feedback from the users and implement changes in the interactive prototype. The goal was to improve the user experience when navigating through the app, creating a more realistic experience. From this feedback, I was able to design the final grayscale prototype.
Now in order to bring my low fidelity wireframes to high fidelity, I needed to create a visual identity. I began brainstorming ideas that captured my brand’s identity, highlighting the feelings and sensory reactions that I wanted to evoke in the users as they interacted with the app.
I thought of words that reflected the type of emotions I want to evoke in my users when they are interacting with my product. To effectively achieve this, I had to think back to my initial research phase. One of the biggest pain points that I found, was that Yu-gi-oh! players didn't have a fun, interactive, way to connect with one another. So finding colors that helped alleviate those major pain points were essential to my branding process. So I create a mood board.
Using the mood board, I then pulled colors that evoked the feelings and emotions that I wanted my users to experience. The primary emotion I wanted the user to feel was magical. The secondary emotion I wanted the user to feel was connected. The tertiary emotion I want the user to feel in cyberspace.
I chose SF-Pro because this font is consistent and legible. This san-serif font expresses a friendly voice, and is instantly recognizable by iPhone users. This typography will be used for the UI
Since the beginning of the project, I had a brand name in mind. However, I wanted to explore more choices.
The wordmark choices take me a significant amount of time. I looked for several different inspirations resources for branding aspects including fonts, weights, icon design, and finally color.
Once I had gathered all my inspirations, I began the Color Injection Trial. The objective of this stage of the design process is to achieve balance using brand colors while ensuring that my visual identity stays on point. The brand colors needed to be balanced to be neutral for the user regardless of gender. Also, I had to be conscious of how the colors were used so that they did not reflect another theme such as purple being related to Halloween. See examples below.
Did you notice the design of the screen changed?
While executing the color injection trial and looking at additional styles and trends, I found that designers were listing profiles horizontally with larger weight and infinite scrolling giving the user less cognitive load. This was a good solution to allow Pedro to scroll and connect with infinite profiles.
After many rounds of experimenting and testing with various color combinations, the following color combination represented my brand and how I wanted the user to feel when using the app.
It’s time to see how all of the steps came together to create this product for you!!
What is atomic design?
Atomic design is the methodology for creating design systems. There are five distinct levels in atomic design that work together to create an interface design system.
Now is time to show you my design system. I created a design system (Library) that would not only build consistency but also save time for the client as they build new features. This will improve the overall process and experience for the App.
The smallest unit; is something that can’t be broken down further.
The smallest identifiable unit is made up of multiple atoms.
A whole with interdependent parts is made up of several molecules and atoms.
Blueprint outlines serve as structure for content creation.
The final stage in the atomic design framework is where the templates are filled with actual content.
By Enrique Magno
Since the app allows users to connect with each other and buy, sell and trade cards, I thought about creating and implementing a new feature that would allow users to select a "sleep" or "do not disturb" mode. Since most social websites encourage connecting, there should be a feature to allow users to silence this feature when they do not want to be disturbed whether it’s a particular time in the day or for a longer period of time.
Being able to realize my research into a functional prototype was an extremely rewarding experience. I learned how to deal with unforeseen challenges, set realistic goals for myself, engage with peers, and receive constructive feedback to improve my product. Most importantly, I learned that I can create products that help people by using human-centered behaviors as my design guide.
The Capstone highlight was a passionate project. I applied the UX Design Process and enjoyed seeing how I integrated the process and achieved evidence-based design. Thank You.
I essentially designed for Yugioh players and begin part of that community I design this project for myself.
Someone finding their passion in their design and later pursue.
I'm Enrique Magno — a designer who works pushing creative boundaries.
uxemagno@gmail.com
