A creation in the collecting world
Part II: A Design Thinking result
Here we are again! The last time I posted, I talked about the first part of this project, if you missed it, feel free to take a look at it! I showed you the investigation that my team and I undergo to understand a collector’s mind, and how we got into the idea of Neightix. Don’t worry if you don’t remember completely, I’ll tell you a story to refresh your mind…
At the beginning of the 80s, a little boy used to play for hours with his toys, he imagined a world plenty of villains who had to fight against with in order to save the city from their evilness. While he was growing up, he let his toys apart, even though his imaginative world was still vivid in his mind. However, as his mother realized that he wasn’t playing with his toys anymore, one day she decided to throw them away without telling him. When he got the news, he got upset…
Years later he turned out to be a great Knights of Zodiac collector. Gathering figures for years have resulted in his treasured collection, which he believes he started it because he “hasn’t overcome his childhood yet”.
Today he’s a man seen from the outside, but from the inside he still has a beautiful childlike spirit that people who surround him can’t see. “He’s 37, and he collects childish things” says his mother.
He feels as he is not comprehended by his friends and family, that’s what encourages him to look for new friends who have the same passion as him for Knights of Zodiac, to share his collection with and talk about it for long hours without being judged.
One day he decides to look through the Internet, and he discovers ¡Neightix! A social network game for collector’s of the 80s & 90s; plus his solution to meet new people as him, while sharing his collection to the world and gathering new object to expand it.
I know you want to get to the bowels of Neightix, but before showing it to you, if you are curious about where does Neightix come from, I recommend you to read the first part. If not, let’s get started!
Rome wasn’t built in a day, and we can assure you neither was Neghtix! We started to create it from the very essential, its skeleton.
Structure
Once we got the idea of Neightix our brains couldn’t stop generating new functionalities for our social network, still we had to put our feet firmly on the ground and be focused on what we were going to actually create. Because an architect can’t build a house without designing the structure before, can him?
Sitemap
First things first, we created the architecture of information to depict all the sites that our social network was going to have, in addition we also considered different actions that our users could do in each site. Doing it in that way, it helped us to have a clear idea of what we had to create in the next sketching phase.
Great ideas don’t work if there isn’t an adequate user-centered design. It is important to take into consideration our users from the very beginning, so that we provide them with a great Neightix experience. The sitemap benefited us to bring the different tasks together in a logical way, but also to construct a less profound structure, making it easier for user’s cognitive load.
Flowcharts
Next step, how are users going to interact with this information?
We used two types of flowcharts to concrete the interaction design at a conceptual level. Flowcharts are graphic representations of a process, a sequence of user’s actions. Both of them allowed us to observe all the steps that our users have to take to accomplish two of the goals that they are able to have in our interface.
Task flow
On one side, we created a task flow of the user who registers for the first time. This process is practically similar to all users, they do the same path when creating their profile and avatar. However, there are two moments where they can choose:
- At the beginning they are able to choose between registering with their Google account or through their preferred email. Afterwards, is when everybody does the same path.
- At the end they have to decide again, in this case between if they want to upload their collection at that moment or do it later.
Work Flow
On the other side, we made a work flow of the user who wants to get a new object, highlighting their happy path with blue. Using this type of flow it helped us to have a wide and clear visualization of the tasks that the user could do when achieving this goal.
- The user is able to buy a product from the market, where they can choose between buying it directly or asking for an exchange to the seller.
- They can also do those actions through a bulletin board that are in every themed building.
Moodboard
We already know what things will be able to do our users in Neightix and how’ll they do it, we’ve made sure they have a full experience without lacking anything. But how will they see it?
We had it clear, we wanted our collectors to be able to take a trip back in time to those wonderful 80s and 90s, where the digital aesthetic was not as sophisticated as it is now. Giving it a retro touch that reminds those early video games where the pixel had no artistic sense, with neon colors of those arcade games which we spent long hours playing.
Corporate visual identity
It was the time to bring out our more artistic side. Brush in hand, or rather mouse, we sarted defining all the visual aspects that Neightix was going to have. Creating a style guide has made it easier for us to design the different prototype screens.
This tool it is also essential to maintain a concordance in brand communication, in order to make it instantly recognizable and remembered by the audience. In addition, a style guide it also helps us to later create new screens, or even when designing other digital interfaces for the social network while keeping the same aesthetic.
Sketch
Although we had already thought about the style that our social network would have, the color palette, the typography… We couldn’t start designing our digital product starting from the roof, we first draw the sketches to focus our attention on usability.
We didn’t need anything else, just a pencil and a paper to depict our own ideas on it. Afterwards, we gathered them altogether to select the ones we liked the most. Personally, this is the best thing of working with a team! Sharing ideas to come up with bigger ones.
Wireframes
Time to jump into digital designing! Sketches started to gain form.
Wireframes are the bridge that we need to walk across to get to the final design. In this step, we gave a logical structure to the design in order to create an easy navigation.
Details are becoming more concrete, and there was a risk that we could lose our focus on usability. That’s the reason why at this point the gray scale is used, to not to be temped to evaluate the aesthetics before usability.
The path starts from the very beginning of a new user, the moment that they register for the first time and have to create their avatar. After this process they find themselves on the home page, where they have different ways to continue, if they want they can go to the market, “My room” or the City.
- Market: on this site they can search for the object they are looking for, buy it or ask the seller for an exchange.
- My room: this is the personal space where users are able to upload their collection. We designed the situation of a user who wants to see their collection once he had it uploaded.
- City: The place where socialization happens, on this view users can choose between the different themed buildings they want to go. Once they are inside, they find themselves in a room plenty of other users with the same interests as them.
Prototype
Finally, it’s time to paint!
With the style guide on the side, we started to add colors to our black & white wireframes. But it is not only about painting a drawing, remember I mentioned the user-centered design? We still have to keep it in mind! This is the part where interaction design is created in a visual stage, so its not only about being nice to look, but also to be predictable to our collectors.
We created a high-fidelity prototype so it gives the feeling of being a real software, therefore we could get a higher quality feedback during testing. We added the look and feel of an old windows computer, adding tiny details such as when the user clicks on a button, it changes into a pressed one as the old times. As I always say, details make the difference ;)
This is a rapid view of some of the final screens:
Guerrilla test
We always can do better, so does the prototype!
At this stage we put our prototype in test to detect those errors that we didn’t see when designing it, as well as the validation of our designing decisions. Doing the guerrilla test helped us to prevent possible errors before the real product is produced, saving unnecessary expenses and helping to make a better final product.
When conducting the test we asked our users to do 5 paths:
- Avatar creation
- Consult a Queen’s vinyl
- Search in their collection to make sure they got their vinyl purchased added in.
- Consult offers of music products without going through the market
- Interact with another user doing the following:
- Send a friend request
- Discover the other user’s badges
- Talk to the user in private
All of them gave us precious information in order to improve our social network. There’s work to do! We gathered the information into groups depending on if they were blocked at some point of the interface, patterns which are blocks that had happened to most of them and suggestions that gave us.
We could conclude that our idea of a social network game could work! However, they miss the general concept of a social network as we all know, such as Instagram, Facebook, Twitter… Interfaces where users can spend hours interacting through pictures and text, giving likes, comments and posting. I must say, these social networks have a design specially created for being hooked to them, something that we must keep in mind when improving this idea. On the other side, the retro aesthetics was well-received, even though we have to improve to make it more detailed and accurate.
After getting feedback from our user tests, we planned the actions we have to take in the future, classifying them by the time they need in order to be done.
This was an amazing project that I really enjoyed next to my teammates. I relished every part of it, from the investigation to the user test! I never thought the collecting world was such beautiful and moving, I loved to get to know it and it made me realize that everybody has a tiny collector inside. Nostalgia is ever present in each of us, in fact this project made me revive those times when I was a kid and I went to the street market with my family to exchange my cards, the great excitement I had just because I got one of my missing cards…
I was born at the ends of the 90s, so I’m closer to the 2000 decade, but I had such fun playing with the aesthetics of the 80s and 90s. It is curious now that we have a sophisticated digital aesthetics we still like and enjoy the old ones that break with the harmony.
Thank you for reading me! Hope you enjoyed the journey that we’ve been through during two weeks to get at this point. If it’s like this, I’ll keep you posted on my following project!
