First and before all, I apologize for bad spellings, I’m from Colombia. Let’s talk about it!
I live in a 50 million people country at the top of South America, a place where diversity, eccentricity, noise, nature, smoke, industries, rivers, 2 oceans, graffiti, techno, indians, farmers, music festivals, coffee, flowers, big buildings, fashion shows, corruption and terrorists -and corruption-, take place at the same time. It’s difficult to get bored in a place like this, you just get lost in the details, and it can make you a great observer. But how important could be something like that, if your job is to build an app?
This is something to be answered with some design concepts and a simple example: my first app. I can -try to- tell you, as far as I’ve been learning design for the last 6 years, that people always know everything you need to know to build a successful interface. All you have to do is to look around and see how people behave with their environment, what makes them happy, what are their needs, their concerns, what could help them to become better workers, friends or partners. In this case, I just wanted to make people better tenis players. But how?
I’ve been taking some classes recently and realized there is a lack of satisfaction with the information you can find locally. Knowing about playing tennis in Bogotá is something that you usually won’t find on virtual platforms, the few ones are completely disconnected one to another, and most of the courses are held by private institutions with no interest in being located on the internet. That’s how I realized that there’s a lot of people -digital natives and millenials- afraid of getting involved with this sport because of the missing information for amateurs, newbies or interested ones. There was another group of people, actual players, that weren’t so happy with their courses as playing at time with lots of students could affect their learning process, and their problems and individual challenges become blurry -among many people- to teacher’s eyes.
This is where I started, I had to make a research, make interviews, to brainstorm ideas with players and amateurs. Talking to people was the key to end up understanding their real concerns. At some point I had to take a decision whether my real concerns were focused on current players or not, an certainly, as I am a current tennis student, making a platform for players would make this easier for me, I was also designing for me.
So it all started with a simple sharpie-made storyboard.
What is the reason of my observations? what is people looking for? what would be an ideal scenario for my app? how fluid, easy and confident should be the interaction between my creation and the people?
All of those questions should be answered on a poorly drawn story. The main reason why this is made on sharpie is to avoid unnecessary details, this is about the story, the people thinking, needing, talking and reading. Super realistic lines could affect the quality of the intention, and that’s the basis of the platform, it shouldn’t be underestimated.
In this case, my character just joined a tennis course, he doesn’t know what to wear, what racquet to use and where to find it. He doesn’t know where to ask, there are no information on the internet. Then he download this app to his phone, and hurray! the final frame is a happy ending, with his new racquet, shirt, pants, etc.
Then we have the wireframes.
Wireframes are about bringing us down to earth. We’ve been dreaming too much in a better world, now it’s time to start sketching, I’d recommend a simple pen, no rulers, no drawing skills. Just a simple idea of how things will be located all over the space, and how and when their going to appear. What’s the best device for that specific intention? Draw it. What are the main elements? draw them. What are functionalities? draw them.
I realized that there are three important lack-of-information-stages when you’re a player.
- Before playing. What do people need before a game, how they can find something without knowing exactly what they need, is there any specific information among all the products pool on the internet?. What if there’s a recommendation system that tells me what are the better products for me, taking in count my age, my height, my weight, my experience and my needs. These recommendations should help people improve their skills, based on their personal information, without any marketing purpose.
- During the game. I realized that most of course’s teachers are not aware of physical improvement, they are worried about teaching technical skills. I thought that a great functionality for my app could be having numbers. Something to measure the activity, an app connected to my smartwatch, taking advantage of its sensors, measuring speed, strength, movements and hits. That would be like a personal teacher, and it was called the data recorder.
- After the game. People need do know how good were their performances, how they got better with time, where did they where, and how it is now. So the app includes a data calendar and an overall statistics panel where the user can find all the recorded information.
The wireframes were tested with some people in order to know how the idea performed, if things were understandable and if the elements were fluid and easy to use.
Then mockups, and more mockups.
According to the feedback received, most of the elements were refined, polished and received some make up. It was not just about aesthetic tweaks, it was about interaction details, how element were going to be presented, how images were going to work better, what’s most appealing or intuitive or engaging. I added colors, buttons, backgrounds, images, menus, all the necessary to make it look real. The main idea here, was having it as close as possible to a real application in order to have trustable feedback, accurate reactions and real information coming from the testers.
Not all the screens and fill forms can be made as a real app, but all the necessary assets to make your point on how it should be, what are the procedures and how are going to be the end-conclusion-result stages for each part of the application.
At the end, an A/B testing was applied. I needed to know what was the better way to make a purchasing process on the recommender, to let it as intuitive and fluid as possible. I tested it with 4 participants by using the usertesting.com tool, where their reactions, thoughts, impressions and behaviors were recorded. All of that in order to gather insights and get useful information to improve user experience details on my platform. At the end G.O.A.T (Greatest Of All Time) reached the last stage, ready to be developed.
