FORTUNA: The tale of becoming of a forgotten board game to an eGame Phoenix — Sequence UX Case Study
Provocation
Fortuna is an online gaming application which adds a bit of an extremity to some of the equations of playing board games physically. Also, the game can be betted upon by the players, which means all of the players’ mistakes will cost them, literally, which gives the game a better competitive edge.
Also, Fortuna aims to bridge the gap between the physical and online gaming experience. In brief, this can be done via a rock solid Discovery platform and by maintaining the Functionalism of a physical experience by means of a proper gaming user interface. Tackling these challenges includes being able to play with friends as well as being able to discover new opponents to hone skills and be able to create an online equivalent experience of the physical board game.
Design Process
Ideation
I got a chance to learn and play a board game on an outing with my colleagues, called Sequence, invented by Douglas Reuter in 1970s. I was taken away by its simplicity (as opposed to D&D/Monopoly/Business) and the quality of engagement it creates for all age groups of people even today.
I was so hung up on it that I tried to look for an online solution for it to solve the problem of distance between the opponents in Sequence so that I could play Sequence with my colleagues/friends when not together, but in vain. There are a couple of mobile applications around it skipping the “original rules” of the game like Wild Jacks (iOS Application) may be due to copyrights, but no online gaming solution provided the complete alike playing experience as when playing together with being in the same place as your opponent physically.
Thinking about this, gave me a funny gut feeling, like I had automatically decided I wanted to create a Sequence Online Gaming Experience design, and keep it out there, in case some good Samaritan wants to develop something like this and lacks designing skills. Also, I decided to add “betting on a game” capability while playing online, which makes the game much more exciting then it was before and so was aptly named “Fortuna”. This case study represents afterwork of the idea, and some key notes about solutions to some of the challenges faced while processing Fortuna’s design.
Introduction
We will get around to knowing Sequence in a bit of a different way, We will learn about the objectives of the game first and then focus on how to achieve it by obliging to the rules of the game. On a side note, the benefits of this learning process is the same as reading options of multiple choice questions before reading the question.
The object of the game is to form rows of five chips on the board by placing the chips on the board spaces corresponding to cards played from the player’s hand.
The extraneous rules to be obliged entails that Sequence can be played with two to 12 players. More than 12 players cannot play. If more than three people are playing, they should divide evenly into two or three teams. With two teams, players alternate their physical positions with opponents around the playing surface. With three teams, players of a team must be positioned at every third player around the playing surface. Fortuna is about creating a prototype for playing sequence online, hence, the experience is leaned to playing with one team opponent assumed to be as a single player.
The material rules to be obliged entails that a player chooses a card from their hand, and places a chip on one of the corresponding spaces of the game board (Example: they choose Ace of Diamonds from their hand and place a chip on the Ace of Diamonds on the board). Jacks are wild. Two-Eyed Jacks can represent any card and may be used to place a chip on any space on the board. One-Eyed Jacks can remove an opponent’s token from a space. Players may use the Two-Eyed Jacks to complete a row or block an opponent, and One-Eyed Jacks can remove an opponent’s advantage. One-Eyed Jacks cannot be used to remove a marker chip that is already part of a completed sequence; once a sequence is achieved by a player or team, it stands. Once a Jack is played, it ends the turn, you are able to use the coin more than once to form a sequence. The played card then goes face-up into a “Discard” pile, the player then draws a replacement card from the draw deck, and play passes to the left.
Investigation & Personification
I did some player intuition studies, via online surveys and independent play sessions to gather insights about target demographics of this game. Gauging expectations, pain points for players in existing not so rival of a product and to identify critical feedback that I needed to transpile in to our UX and UI Flows for a superior overall experience.
The process involved interviewing key users who
- liked to play online games with friends,
- have played this game on the game board,
- also people who bet online on various types of games including board games.
The research aimed to gather insights along two main lines, i.e,
- the Purchasing of placing a bet to play with a Friend or via the discovery,
- and the actual Playing experience.
In order to classify my survey takers and interviewees, I crafted a set of screener questions to identify a potential player and it’s category which helped me to ask specific in-depth questions. I did create three different types of detailed interview questions which led me to draw the following the pain points:
- They don’t receive the actual amount of their winnings.
- Players have to navigate through a lot more steps then required to start playing a game.
- They are afraid to share their bank details for security purposes and receive a lot spammed content due to data monetization.
- The game takes too long to load.
- There is no proper online game for Sequence. They cannot play with a friend in a different city.
Using the research gathered, a theoretical persona was crafted that best represented to highlight the demographic I wanted to focus towards.
Name: Krishna Shah
Age: 28 years
Goal: Able to play Sequence online and win huge amount
Pain Points: No online gaming experience around playing Sequence online, also needed to be able to play with a friend and randomly too. Also, It becomes boring after a certain period as there is no reward in the end.
Focusing on a specific user helps to keep her needs in mind and not get distracted whenever an idea for a new feature or demand pops up.
Schemation
Up until now I had a vague idea of how the app will function. Mapping the basic flow of the app forced me to figure each step on the path the users will take throughout the solution.
After finalizing the user flow, I created wireframes for all screens which helped me understand the overall product structure and how a user will experience different flows, granular requirements of fundamental UI elements (which helped me create reusable components and styles) on all screens, in a way it helped me symbolize my process of thought plot it to paper. Whether the players play for the sheer thrill or for the rewards at the end, the Fortuna offers it all. The platform does have a secure and easy to use and very accommodating payment system. Also, the games are going on round the clock, people can choose to play with their friends and along with it, players can enjoy the big-ticket tournaments that they can join from their home, that too in a breeze !!
Composition
Creating and maintaining a consistent UI and UX across every part of the game helps users intuitively navigate and successfully interact with different sections of the web gaming applications without confusion.
A component-based design system can grant your applications both visual and functional consistency, helping to make users feel at home and easily navigating their way to complete the desired interactions with the game, also helps create a brand of its own when replicated to different OS applications. Here is my attempt to identifying and designing primitives to achieve above goals.
Colour and Typography
Colour Palette:
The palette emphasizes clean living and balance through bright, fresh colours. The colour palette helps create a calming effect which will help user to focus on game.
- The blue color (#0099ff) is reminiscent of reassurance and trust which will help user to trust the game and feel secure about payment details.
- Where as green (#33cc33) is reminiscent of growth and possibility helps the user to believe in their growth by playing. Green is also related to luck which is somewhat needed in the game to add that x-factor.
- I have used white background which makes the website flat, clean and minimalist. It also creates contrast between bright colours and typography which makes it easy to focus on the important parts. It offers a sense of peace and calm while creating a sense of order and efficiency. It will allow users to quickly scan and read the content and help avoid clutter on UI.
Typeface:
Helvetica is a Sans Serif font that doesn’t have rounded tips or tails which will make the website look cleaner and easier to read. Its ability to convey clarity without any barrier makes it more attractive. The font evokes the feeling of precise and calmness. Simplicity and consistency was the leading mantra; therefore, I decided to go with just one font family.
UI Style Guide:
The illustrations and icons are an important part of the design. They communicate ideas and concepts that should not and sometimes cannot be communicated with words. Furthermore, they allow consistency of the visual aesthetics that help build the users’ trust and produce moments of delight.
Prototyption:
With all the information gathered we made the design of our final interface in high-fidelity with Photoshop and Illustrator.
Using the first greyscale wireframe prototype, I conducted a moderated usability testing with 10 players including 3 individuals from my initial interviews. Every player needed to have experience with board gaming. The task assigned was for the player to complete a successful round of game with being prompted by me for available options on the journey.
To capture user feedback and maximize the opportunity, players were instructed to verbally communicate what options they had and what they were doing with them as well as what they are thinking and feeling. Through feedback and observation, I collected some helpful feedback regarding improving the payment flow, educating the user more about the game and some tips for in-game UI, all of which have been boiled down to the following visual identities.
Acquisition
After 12 weeks of learning & idealizing, I was able to crack through all the nutshells and was provided with an opportunity to demo my work in front of some of my former colleagues who are in Technology who were happy with my effort in detail. Here are a few learnings I took from working on this project to share:
The next big thing is the one that makes the last big thing usable. Sequence is a great board game, which has been played by families worldwide since the early 80s, which due to constraints of daily life of the new millennia is forgotten. Fortuna is reminiscent of Sequence with a lot of other features which makes it more accessible and playable with a lot of constraints addressed with playing traditional physical Sequence board game.
Less is more. In hindsight, being a designer meant not having enough confidence in delivering a simple solution and saying this is enough for the user. The core of the website was figured out pretty early on, but a lot of time was invested into in-game experience.
Conclusion
I had an amazing time working on this project. Even though I had experience with UI prototyping tools, I got a chance to learn about different wireframing and showcasing applications. I thoroughly enjoyed the research and interview process, all the way up to mocking hi-fidelity visual identities. A project is never finished really, but at this point, I am eager to jump into my next project and learn tools like Adobe AfterEffects and plug-ins like BodyMovin. This concludes the story of a comprehensive, visually appealing, user-centric product that solves a real problem for a lot of Sequence enthusiasts.
Thank you for reading! Hopeful you enjoyed this case study. If you have any feedback, I’d like to hear from you. Say hello at ami.moradia92@gmail.com or connect on LinkedIn.
Check out my Behance Case Study on the same and for other projects or check out my Portfolio
