Building the Prototype of Gameup
The initial prototype should be super simple, even the design can be basic.
All that matters here is making a version for users to test the app.
Objectives
After brainstorming and researching, we gathered various ideas for our app:
- Home screen showing nearby games, favorites, games joined, and hosted.
- Search screen with filters like date, game, player experience, etc.
- Feedback system with user reviews and ratings.
- User profile with game preferences, current games played/hosted, etc.
- Notifications for users.
- Messaging, both group and personal.
- And many more small features.
Using these ideas, I started building the prototype.
The first step was choosing the application for the job. I've used Figma a bit before; it’s a mostly free design app. I wasn't a pro at it, but I loved the app. I watched some YouTube tutorials about Figma and started building the Gameup.
Crafting the Prototype
Before starting, I made a simple moodboard with colors and various images, shapes of arcade icons, and old computer games. A moodboard is meant to… Well, set your mood for the design you're creating.
Arcade games often used purple, giving them that classic 8-bit feel. Therefore, I selected purple as the primary color, along with complementary colors that complemented it well.
After having a clearer idea of the shapes and colors, I had an okay feel for the app.
For the actual prototype, specific colors and designs aren't crucial. Things will likely change as the project progresses, so don't spend too much time on them.
After building the first version, new changes followed because after a few days, the first version showed its true ugly face.
In design, there are many days that you do not see the truth at the exact moment; you can only notice that your design sucks after a good night's sleep.
I updated the colors, sharp-edged shapes of buttons, and other shapes to rounded corners for more friendliness. Pretty much the whole design changed. Even though I shouldn’t have bothered with perfecting the design in the prototype stage, it's difficult for me to turn off the inner perfectionist sometimes.
Creating a prototype, you should aim for a quick and simple design, focusing on features and navigation instead of design itself, at least in the primary version.
Prototype Review
My teammate Tadas Botyrius reviewed the prototype first. Together, we went through all the steps, and I explained why things were there and how to navigate the app. Tadas gave a lot of good feedback.
I went back to the drawing board for a few more days to fix the issues Tadas mentioned.
After that, we went through the app again. This time, there were fewer comments, and nothing major. We decided to keep these unchanged for now, to see how users respond and if they are really an issue. It's hard to judge with just two people; our thoughts might be influenced by our experience in board games.
Gathering Feedback: Learning from Users
Together with Tadas, we created a feedback form using Google Forms. The form had 10 sections, each with 2-4 questions.
Before sending the form to potential users, we went through it ourselves to make sure it made sense.
I admit, the form was quite long and exhausting, but the questions were important.
The sections were structured by the app screens. For example, there was a section about game hosting, asking about the hosting experience, how easy it was to host a game, any excessive or missing fields, etc.
There were simple questions as well. For example: how likely users would be to recommend the app to their friends. These were important for understanding users’ feelings about the app's design structure and usability.
Adjusting the Prototype: Responding to Feedback
Many of our friends are board gamers, so we made a list and sent the form to each person individually, asking them to test the app and fill out the questionnaire.
Not everyone reviewed it; some might not have had the time or interest, which is totally fine (they are in a blacklist now, I’ll forgive you eventually, maybe).
We're extremely grateful to those who did take the time to check our app, answer questions, and show interest in our progress.
We received 16 responses, which was more than we expected. It was enough to get a lot of good feedback for the app, and we made many adjustments based on those answers.
Some updates were easy to agree on because multiple people mentioned the same thing, while others required in-depth team discussions (by the end of the feedback gathering, Deividas joined the team, so now we're Three Musketeers).
Ready for Development
In my opinion, a prototype is never really done. It reaches a certain point, but the design will keep changing as the app progresses. I see it like an ocean, always moving.
Anyway, we have what we need to start coding. So let’s put on some cool sunglasses, fingerless gloves, and get to hacking.
What Comes Next
For those interested in programming, next we’ll talk about the stack we chose, why we chose it, and our approach to working on the app. In other words - we’ll get a little bit technical as well.
Listened to:
Love what we're doing here? Let us know lukas@sitkus.com.
Thanks for reading. Peace.