UX/IU Mobile App Case Study
Inspiral (formerly Tile) is a micro-video app for learning new skills in the easiest way possible. An instant access to knowledge. Made by everybody for everyone. Inspiral has been my first real client project at Red Academy. I was part of a team with two of my classmates. We had 3 weeks for this project.
Inspiral is a startup that is developing a micro-video platform. Its purpose is to make knowledge sharing easy and quick. When we took on the project, the name was still Tile, and the app just a beta for some users to test, working only for Android system. On the kickoff with the client, we talk about what the app means for them, which were their goals, where they see the app in five years time, which were their expectations of our collaboration.
We found out this app has a very important social impact, allowing everyone from any part of the world to have instant access to practical knowledge.
At that moment, the app was only a beta which was very slow and fails often. The UI design was very basic and the UX design was almost inexistent. We had to redesign the app almost from scratch.
Our client knew that a rebranding process was urgent. We needed to find a new name, logo, and style guide.
We set up the following business goals
• Onboarding process
• View video tool
• Searching tool
• Creating video tool
In this project, we follow the principal steps of the UX process.
During the first week of the project, we mainly focused on the new branding. We spent longer than we expected, but a new name was crucial for our client; it was their top priority.
With this in mind, the three of us made a design inception sheet. This exercise helped us to visualise the app identity from a conceptual point of view.
We thought about the app mood, what it wants to express, what the app means to be, etc. We thought of concepts, feelings, that we related which the app identity. In the inner circle, why, we thought of the app purpose, why the app has been created and which is our client’s MVP.
The next step was to meet up again with the client and do a brainstorming together, trying to find a final name. We wrote down on post-its words, names, adjectives, feelings, that we associated with the app identity. We wanted to be completely free, without restraint, from Greek words to wordplay, everything that came to mind we gave it a try.
At the end, we voted for our favourites.
At this stage of the project, the name chosen was Inflo, a combination of Information and Flow. With that name, we continued our process and Jason started to work in the new branding
However, the name was once more changed almost at the end of our time together, and the app was eventually named Inspiral.
Our researching process started with a comparative analysis of similar apps. We looked into the features they offer.
We looked into the most significant features our app could have, like the option of creating a video, if they have adverts, if it is possible to navigate into the video or if you can add product placement, something the app must have because it is the main monetisation element for video creators.
After our comparative analysis we continued our research conducting some personal interviews.
For the last part of the interview, they were given a task to perform in the app. We had the opportunity to do a contextual inquiry by observing how they interacted with the app. We paid attention to what they found enjoyable but also what they found unpleasant. It was a very useful and interesting exercise that gave us many tips for a better understanding of usability.
The last step in researching was to create an affinity diagram with all the information collected from our interviews.
In this technique, we wrote down all the information on post-its and we stuck them on the wall. This allows us to have a broader vision.
This helps us to have a general vision of the situation and to identify the pain points, to avoid them, and focus in which ones would be the key features our app must have.
Due to the time we had for the project, we had to prioritise our delivering and we decided we will do an onboarding process, to introduce the user with the app, the search tool, and the view video tool. We must leave on the side the user profile and create video tool.
At this point, we were ready to set up the user goals and move to the next step.
With all the research done, we started planning our design. I created a persona, one of the things I enjoy the most of all the process, due to allows me to bright out my storytelling skills. I made Amy, someone who resumed many of the opinions we collected in our interviews. By creating Amy I wanted to make someone who could be credible, someone who our client could empathise and feel connected with. I expected they could find their future users on Amy.
To understand better Amy’s goals, and to help us to design better the app, I made a user story based on Amy loves for knitting and how she could get help with the app.
“I want to use the app without login, find a particular information about knitting, and then watch more videos of the most talented knitted creator on the app. After, I would like to save some videos if I make a profile account.”
Other option would be if she wants to look at more videos of a particular creator, and how she could save them for later or even voted them. Those user stories helped me to make a few users flows, like the one it follows.
In this user flow, we can follow a particular task. This helps us to understand the user journey.
We identify that users don’t want to have to sing in and make an account in a new app they still don’t know. It was crucial in our app to make possible for the user to experienced the app without having to sign in. However, many options like save videos or rate them, are only available when the user creates an account
At this moment, I was ready to create the final sitemap. By doing this before the design process we can make sure the structure of the app is the correct and it helps us to prioritise the information and how it must be shown.
As we said, a new branding was a priority for our client. It was not easy due to the indecision for a final name, for almost 2 weeks the name chosen was Inflo. It was in the last week when our client told us the final name it would be Inspiral. We tried different colours, logo ideas and sketches, feelings, etc, we based our research on the app identity rather than the name. With all of this, Jason completed the final branding for the app.
As a first approach, we made a mood board which expresses what the app means for us.
Jason came up with different colour pallets options, and we all agree on this one.
For the final logo, we wanted to symbolise concepts like intelligence, knowledge, sharing, connections.
With the visual identity done, it was time to get ready with the wireframes.
Our first set of wireframe it was a paper low-fidelity one. It helps us to visualise the app organisation and prepare us for the first round of testing.
The first step is the onboarding process, we designed a few screens that would explain what the app is about, while adding brand values. It follows a screen for sign in, or navigate through the app as a guest. Once the user has decided how to navigate the app, will find the browser and viewing tool. The viewing tool was the area we had to work more in, for all the features we want to include.
We had to do some iterations after the testing sessions.
We went deeper into the viewing tool in the mid-fidelity prototype.
I made a user flow following a specific task, looking for a video about how to use an Italian coffee maker. I wanted to use real pictures from the app. Following this user flow, I made a few screens which help us to think about the many different viewing tool display options
Finally, and after some more iterations, we made the final high-fidelity prototype.
As an introduction, four screens for the onboarding, which can be skipping if the user desires to. In this onboarding process, we want the user to understand what Inspiral is, and transmit the feeling of sharing and inspiring others as the app aims.
It follows the create an account screen. We wanted to give the freedom to join or to continue as a guest. Due to our research results, we knew many users won’t give an opportunity to a new app they still don’t know if they are forced to create an account since the beginning.
Our first screen after the onboarding/ create an account is the home page. The trending videos will be shown, and in the case to have an account, you can access your followings and recommended videos based on your profile. And the most important, the searching bar, from which you can reach out any video you may want.
On the bottom bar, it will be the home button, the icon to go to your profile and the creator tool, the icon to record a video, which is the app logo.
When viewing a video, the screen is all bare from icons. Just when you tap on icons will appear. The beta version showed every video on loops until you slide left or right to the next step/video. In our research people found it that annoying, they wanted to decide if watch videos like a loop or one after other. The icon on the top (line/circle) gives you this option.
Another big difference here with the beta is how the steps are shown. Instead to show all the video steps icon on the top, as the beta, only the one playing is showed.
On the bottom, the creator pic and the up arrow, that indicates you must slide up to access to the overlay menu.
On the overlay menu, the key features are shown. The details section, where you can see all that is needed for the task, and a link to buy those items if wanted. This is how the creator would do a profit.
On clips you can choose which video step you want to watch, they are numbered, and the one you are watching has not the number on. The bottom bar shows the icons for liked, add to your list, share on your social media and report the video.
This project has been a great opportunity for me and gave me the opportunity of developing some soft skills. To work with other people as a team is a very enriching experience, but it could be difficult sometimes. That makes it more valuable when you reach out your goals and you are able to deliver a good product.
Another important aspect of this project was to work for a real client. We were very lucky having Inspiral team as a client, they were very motivated and enthusiastic about work together. We’ve learned a lot about how to manage to work with clients.
Hopefully, the stuff we made for them is something they can use in the future. I’m looking forward to seeing our job been part of the future app.