SetUp
SetUp
SetUp
I would like to introduce you to my very first serious project called SetUp.
It's a native app born to help film technicians set up their projects.
It's been a long road to the app it is now, so this is the journey that brought me to this point.
GENERAL INFO
Problem
Task
Project
DESIGN THINKING PATH
FIRST STEPS - RESEARCH
First, I created a Notion document to start.
A calendar to prioritize the activities I needed to accomplish to complete a Minimum Viable Product.
Research to find out:
a. what kind of apps or programs existed in the market?
b. what I didn't know about the problems they had?
c. what problems I was missing?
d. what data exists related to the financial part?
Findings: there were a few tools that helped the office technicians, but I didn't find a tool for the shooting technicians, who later answered the survey the most.
That led me to help them first, so I focused my work on that kind of public.
In the following link you can see the complete research.
LEAN SURVEY CANVAS
To collect all the ideas that were going through my head the moment I decided to help film technicians, I started using a Lean Survey Canvas, an overview board that is used to organize ideas, focus on what you want to learn, and help you find the key questions for the survey.
I realized that in production teams, time is of the essence and film technicians do not have a tool to help them organize their projects.
They have to send the same information over and over for their hiring process, and I wanted to know what other problems they were having that I was overlooking.
SURVEYS
Out of 83 film technicians, 10% do not take notes on their projects, 24% take notes on their projects with paper and pencil, and half of them use the phone as a memory aid, but only 10% of them have looked for a more specific tool for this problem.
Technicians need to keep submitting their hiring information because the average technician may have between 3 and 10 projects per month.
Most of them send this sensitive data through channels like Whattsap or email. This means that errors can occur when copying and pasting, and there are no special security measures in place to match the importance of this type of information.
Only 17% of the technicians use a tool like Dropbox to access the shooting data while working, and 2% of them need to print the documents so they don't have to constantly search in their cell phones.
The rest of them search the information in their emails or on their cell phones because they download the documents on their devices.
This is a bad work habit considering that time is crucial in this work.
CONCLUSIONS
90% of film technicians don't use an specific tool to organize their projects because it does not exist.
They need a common tool for sharing their hiring information and sensitive data with security.
They need a common place with agile access and storage for the shooting documentation.
INTERVIEWS
Total number of respondents:
4 people, all of whom held various positions in the film industry.
The interviews were a very good way to understand the problems from the point of view of people who work not only in the production team, but also in other areas, such as the artistic team or in more technical areas like camera or sound.
Insights:
The terms in their employment contracts have to be clear since the very first time.
Being able to review all of those terms before shooting and having the ability to contact the hiring team to resolve any discrepancies.
Artistic Teams
Include artistic agencies in the app so they can see the calendar of extras without having to call them every time to check their availability when the agency needs them.
AI-Based Tool
For creating Transport Orders that includes
1. The available vehicles
The time each person needs to be present at the shooting
The start and destination locations
AFFINITY DIAGRAM
What is it?
The affinity diagram is a place where you can record independent ideas that you have gathered in each step you have taken so far.
Why you might use it?
It is very useful if you have a scattered mind like me.
This is something very good I discovered while learning UX /UI because the tools you use to organize your ideas make so much sense in normal life too, and I also love using post-its to work with because colors make me think and separate thoughts.
How to use it?
Once you have all the individual ideas, it's time to group them by category so you can find the relationship between some of them and translate that sense into a functionality, an interface concept, or just something you have overlooked.
Result
As you can see from the pictures, the first one is about the different concepts I took from all the sources and the second one shows that these ideas grouped together make sense.
USER PERSONA
To get a more complete picture of the people I wanted to help, I created what is called a User Persona, an exercise where you put yourself in the shoes of the people you want to help.
Knowing the position of the people in the office, I gave birth to Sergio, who, like me, is an assistant to the production manager. I created this person because I wanted to take the opportunity to use my knowledge in this position.
I also created Isabel, who is the sound engineer, and Iker, who is a young assistant director. So with this kind of people, I wanted to help all kinds of positions, or at least a very different kind.
To learn about their needs, I first imagine their age, position, and all demographic details. Then I imagine their behaviour and finally, more importantly, their needs.
EMPATHY MAP
Now that we have defined our user persona, it's time to get inside their heads and try to find anything related to what they think from above. This is where the Empathy Map comes in.
As before, we will use a whiteboard and post-its to express all the thoughts that go through our minds and feelings such as needs, what they see, what they hear from others and how they feel.
This is the previous step to get into the Journey Map, where we indicate how we can solve these problems with a real digital solution.
JOURNEY MAP
With the Journey Map I focus on real problems that can occur in a normal working day to find out how to solve these problems and turn them into possibilities of functionalities.
One way I found that could be very useful in this example is to automatically fill a Google Sheet with all the hiring information of each employee, adding them to the team with one click, they accept our request to use their sensitive data during the shoot.
In a real shoot, this takes hours for an assistant production manager as long as they have to do this work manually.
MoSCoW
After defining thousands of functions for many different problems, it was time to use some techniques to develop a Minimum Viable Product until I had to present it.
Here I use MoSCow because I think that among all other exercises this is the one I like the most, as long as you can see in a very simple way the first steps to implement it in the design part.
It consists of 4 separate sections. One with the features that the app must have, then the ones that it should have (these are the ones that I want to develop once I have shown the app but that I think could make a difference), then the features that could be had but are not necessary, and finally the ones that do not fit and that the app will eventually not have.
SITEMAP
It's impressive how the first time you sit at the table with an idea, you can not imagine a simple functionality, and then, some exercise later, you have to decide what to develop because the app has become huge.
As you can see, this is my SiteMap, which is the skeleton of the app. Here I realized that I was forced to make a desktop version to manage the projects with the office staff and production companies or even the artist agencies that I could not define because of the time, so I could only raise them.
I focused on the app part for technicians and also defined the desktop version to be developed right after the presentation of the project. I was not very concerned about it because I knew there were already some desktop apps and I wanted to create something new.
USER FLOW
Before we jump into the actual design part, we have to take a path, because the development of the whole app is a very extensive work that needs a lot of time and testing to work. Let us say it's like visualizing all the ways a task could be done.
We define the different actions with different forms to identify them quickly. It depends on the steps we take to get to one goal or another.
We always start and finish with globes and make decisions with diamonds.
Once you have a path it is time to design the flow.
CRAZY 8
Crazy 8 is an exercise that consists in dividing a sheet into 8 parts.
Then you have 5 minutes to draw how you imagine an interface, in as many ways as possible. It does not matter how crazy you think they are.
After those 5 minutes, you look at the results, and if you are doing this process with a team, you compare them and talk about your impressions.
Then you repeat the whole thing for another 5 minutes to implement new ideas or fill in the sheet as best you can.
This helped me to start drawing and I tried to think about other apps that I think are very easy to use or have a friendly interface.
Low Fidelity Wireframes are the first approximation of the real face of the product, and that makes this part very exciting and very difficult at the same time. You have to go back to the research to look at other apps that you like and find inspiring, to distribute the information so that everyone can find what they are looking for.
To make it more realistic, you can test these sketches like a real app by uploading all the images to a place called Marvel and then just link the buttons and make the interactions.
I did this to test the flow with a friend who works as a production assistant, and found that some documents were not in the right place. So I redrew some screens before moving on to the high fidelity part.
MOODBOARD
Moodboard is an exercise to help you get into the mood of your product.
I find this one of the most enjoyable exercises because it allows you to see how others work. It's inspiring and I love looking at the colour combinations people use depending on the type of product they are promoting and the tendencies and trends.
There are a lot of people who are full of creativity, and in this case, from the beginning I was thinking about something related to the RGB style and glitch notes for the logo.
I am a big fan of the 90s, I love grunge music and one of my favourite movies is a documentary called "The year the punk broke" based on a Sonic Youth tour. It has a lot of VHS records in it and I love the effect.
So since I decided to make my project about something related to cameras and the film industry, I knew I wanted to combine it with that glitch VHS atmosphere.
STYLESCAPE
Stylescape works to take what we have gleaned from the mood board and turn it into a real product of our own, with its own personality.
I have defined some key concepts here like the colors, card style, and typography.
I will follow this document throughout the process of developing the final product.
For example, it's very useful when you need to create something new that you did not have in mind to follow a style without moving away from the basic tone.
With the high-fidelity wireframes, I could mix the shapes and colors I chose for my app to see if they would work and reflect the mood I wanted.
I had to change some cards and buttons and also try different accent and base colors because I had to create my app in dark mode. That's because you have to be careful with the light when you are shooting, as long as it could interfere with the scene and the technicians could be checking their projects as they work and other teams could be calling them or needing information in the middle of their projects in progress.
I could also see a general vision of what it will look like, and use references from other applications to copy the dynamics that might work and help for my purpose.
UI KIT
At the same time I was creating the high fidelity wireframes and prototype, I created a small UI kit to organize all the components so I could organize and reuse everything I created.
This helps to have a common approach to the project and a common esthetic to unify the personality of the brand and speed up the composition.
FINAL PROTOTYPE
Finally, I created the prototype, and it was very difficult to delineate all the basic functionalities, so the final prototype is almost the complete interface I envisioned.
I started with the login and focused on the flow of Alvaro, a production assistant who syncs his contacts with the app to get in touch with everyone he has in his mobile agenda and who is also on the platform.
He makes interactive actions to help him with his work, before, during and after his production in progress.
Let me show you the final prototype while explaining all the actions to see it better.
