Terráqueos: A UX Case Study

The project

Terráqueos was a Brazilian film website created by Emerson Broga back in 2009. As a movie-addicted himself, Emerson created the website as a side project. But because of his busy schedule, he was forced to shut it down a few years down the road. Now, a few years later, he decided to bring it back online and contacted me to help.

Terráqueos was my very first opportunity to build a mobile website and to apply the UX mindset into a real project so I’m very grateful for this opportunity.

By the way, you can also find this case study in my portfolio.

Let’s get started, shall we?

Goals and Challenges

The main goal was to provide a good experience for those looking for movie-related content but especially for those looking for new movies to watch. The initial steps were far from ideal since no information from previous years was available. There was no demographic data, no nothing. Not a single user from the old times could be reached to be interviewed (and due to time constrains, that wouldn’t actually be possible). The main challenge was very clear: to build a website with little to no information about the target audience. It is worth mentioning that because this was my first UX project, lack of experience was also a major challenge.

A lot of assumptions had to be made before the project could move forward. That also implies a lot of testing would be necessary as well. Oh, and there was one more thing. A lot has changed since the website was first online and the client wanted to shift the core of his product. The focus on DVD collectors was replaced by a more generalist approach. The website now was supposed to target anyone who likes movies and not DVD collectors only.

Before we go into the specifics, we need to discuss how the product changed. The website’s core target was no longer DVD collectors but now was supposed to be a place for people to 1) find new movies and TV shows to watch; 2) connect with other cinema lovers; 3) find general information about movies, TV shows, and celebrities.

From a visual point of view, this means a clean and elegant mobile website. It had to be beautiful to stand out from competitors. And from an information architecture point of view movies need to have great discoverability and the navigation process should be as frictionless as possible. These ideas guided the design process and the user tests later on.

The whole website was designed entirely by me and will be coded using React by Emerson. We decided to create something as close to an MVP as possible and implement more and more complex features post-launch. Basically, this means the design had to be created with some degree of scalability in mind.

Target audience and the sea of hypotheses

As mentioned, no target audience information was available which means I had to figure it out who the main audience is without previous data support. I did so by closely watching the competition’s audience, performing a competitive analysis, thinking in terms of most likely scenarios and brainstorming to make an educated guess. This method’s rigor is questionable but it would give me somewhere to start. Every assumption made could be tested later on with real data (especially with post-launch data). The idea was to launch at 70% and iterate later. The hypothesis made were the following:

  • The target audience age spectrum is around 15 to 25 years.
  • A good percentage of users are female.
  • A good percentage of users are students.
  • Users have medium to high levels of familiarity with technology.
The basic competitive analysis made to understand features’ importance.

I also thought it would be helpful to think in terms of the most likely scenarios. That’s because I believe that, at least for this first approach, understanding most users will be more helpful than understanding peculiar cases. So, I’m assuming most users will fall into one of the following scenarios:

  • The user is randomly wandering the internet.
  • The user is looking for a specific information (genre, movie, actor)
  • The user is looking for something but is not sure exactly what.

I decided to design to people who are actually looking for something movie-related. People might just be wandering the internet and I don’t believe this set of users is super relevant unless they have a pre-disposition to search movie-related content. If they don’t have any kind of interest in movies at the moment they land at the website there isn’t much that can be done (at least not in this initial phase of the project).

I though it would be better to design precisely for the main audience instead of creating a bunch of features and flows for an audience group I wasn’t so sure about. This way the product wouldn’t lose its core experience for the main audience and it would be much easier to understand what changes are necessary to be made after the product’s launch.

Sketches

Once I had enough confidence I understood what the client wanted and what the most likely audience would benefit from, the sketching process began. It is worth mentioning that the initial sketching phase was very short. Most features couldn’t be developed due to technical reasons and time constrains so I had to focus on what was absolutely necessary only.

They were mostly used as blueprints for me to build higher fidelity derivable because I wasn’t sure if my very low-fi sketches would actually be able to clarify my intentions to the client. Of course, I could’ve built a presentation or a low-fi prototype but I just thought it would be faster if I get started with the wireframes. Later on, I found out that by making the sketching phase last longer I could probably have saved myself some time.

Wireframes

The wireframes were built using Axure RP and they were mostly for presenting the information architecture to the client in a more appealing way. They also guided me so I could increase the fidelity later on.

I also took the opportunity to connect all different pages together so I could understand the flow better. Being a very visual person I need to actually see how pages connect to each other to be able to actually understand what is going on. I didn’t feel like any progress was made until I could actually see the bigger picture.

And later I found that by doing so I could more easily go back and change things when necessary (and yes, back and forth happened rather frequently).

Shots of the wireframes created for the project.

I also found myself trying to understand (in a more visual way) the information flow. What information is displayed when someone clicks “See more”? How hard is it to access information once the person went down a certain navigation branch? By trying to understand questions like that I came up with this (sort of) flow you can see below.

First flow I created for the website. Used Axure RP. I just love this tool.

This was particularly helpful because I could track how the different pages with different sets of information were related to each other. It did help to take a step back and see the big picture. Some flows were fixed without the necessity of user testing only by doing this exercise.

Prototype

As for the prototyping goes I have used Adobe Experience Design (Adobe XD) to create a high-fidelity clickable prototype. Before doing so I’ve come with a few tasks that users would have to execute. These tasks were designed to give me answers I was looking for. The idea was that planning such tasks would help me to confirm (or not) all the initial hypotheses that were made and avoid wasting time prototyping unnecessary flows.

So the process for the prototype was very straightforward: I knew what my hypotheses were and the answers I was looking for (more on that in the next section) then I started thinking about how to design a task that would lead me to an answer. Finally, I used the wireframes as the foundation for a higher fidelity version of the website and that’s pretty much it.

First high-fi prototype created for the project. RIP.

Because I wasn’t sure how realistic the prototype had to be I ended up creating 40+ artboards on Adobe XD. Most of them pretty useless and with no clear relation to the tasks. Things got out of handy quickly and I realized I had to find a better way to make the prototype work. I took a few hours to redo the prototype to make sure only important flows were there. It went from 40+ art boards to about 15.

Old prototype versions (these never saw the light of day).

Unfortunately, I had a severe problem with Adobe XD. My Android app was not being able to synchronize with the Creative Cloud paste in my computer. I’ve tried to manually synchronize them both and long story short: I lost my prototype. Not great. That was very frustrating. Especially because I have no idea what I did wrong. Next time I’ll make sure to have more reliable backups just in case.

I re-created the prototype from scratch using Marvel. I didn’t use Adobe XD because I was afraid something like that could happen again. It made me waste a lot of time and I couldn’t afford to have the same thing happening again. It was a pain but it was necessary. I also took this opportunity to create a better version of the prototype (increase fidelity) and to learn a new tool. So, despite the not ideal situation, I was actually able to make some personal growth out of this. Using Marvel for the first time was a nice experience after all even though I found Adobe XD to be pretty awesome as well.

User Testing

Due to lack of resources and time constrains, no test was done before the prototype went to the high-fidelity stage. The user test aims to investigate participants’ ability to understand and use the new website. I’m mostly interested if they can easily find new movies to watch. I want to determine whether the new website is intuitive and use the information gathered to identify both short-term and long-term improvements.

And this is how the test happened: I downloaded Marvel App to my smartphone and asked people on campus to help me testing the prototype. I explained the purposes of the test and how it would work. Then I watched their reactions as they went through the tasks and took notes.

The main questions I tried to find answers to are following ones:

  • Can they easily find and use the search?
  • What will people use to find movies? The menu, the search button?
  • Is it clear how lists work?
  • Can they find a movie through a list?
  • Can they easily navigate the website?
  • Once they find something they wanted can they easily do something else?
  • Can they easily create an account?
  • Is it clear how they can use the filter to find movies and news?
  • Is it easy enough to find their friends?
  • Can they easily identify what the action buttons mean?
  • How easy is it for them to find actors and news?

I believe those are the most essential questions that needed to be answered by the user test. The tasks created were basically to gather feedback about the navigation, if the current features are relevant or not and the general aspect of the website. And that’s what guided the creation of the following tasks.

Before testing with actual people, I’ve tried the prototype on a friend just to make sure the tasks and their order actually made sense. It didn’t. There were some gaps that I needed to fix. After putting some though tinto it, these are the tasks I came up:

  1. Create an account so you can enjoy the whole website’s experience.
  2. You want to find all Now Playing movies so you can decide which one to watch in the theater.
  3. The Mummy is a very popular film you would like to own. Add it to your watch list.
  4. Once at The Mummy’s page, find information about its cast.
  5. You now are curious about Tom Cruise, the main actor. Find his profile so you can find more information about his older roles.
  6. You want to find new Drama movies to watch. Find lists of Drama movies.
  7. You have been told about this great Hitchcock drama list. Find it.
  8. Once in the Hitchcock list, you realized you want to add the first movie of the into your watch list. Do it.
  9. You are curious about people who have watched The Mummy already. Check them all.
  10. You now realized the first person is actually a friend of yours. Check other movies he watched.
New prototype screens (version used for testing)

After testing I also asked a few follow-up questions. I just wanted to get more feedback about how participants felt about the website and its features. This is what I asked:

  • Are there anything here that felt particularly important to you?
  • Is there any information you were expecting that is missing?
  • Did you find it hard to find the most relevant information to you?

The whole process was very informal and honestly, it was more of a chat about the website. The main purpose here was to test usability, navigation and user flows but I found a lot more. The testers also gave me some incredible feedback and some ideas. These are the insights I got after testing.

  • Some people tried to use the search button as soon as they were given a task. Others tried using the menu. The search is apparently clear and in plain sight and no one had problems find it. The menu is lacking some important links for those who would rather use the menu navigation though.
  • The “Movies” and “Lists” tabs display very similar pages and people didn’t feel like actually switching between two different pages.
  • Most people completely ignored the big search section where they could find and filter movies. I thought that would be the main feature for allowing movie discoverability and I was wrong, people didn’t seem to get it. Some people couldn’t even understand the difference between the Find Movie and the Find Lists feature.
  • Using images as covers for “ Lists” is confusing.
  • People could easily go back and forth when looking for information which means the navigation (the go back button especially) was very clear. The page name at the top did help and so did the fact that the top area is fixed. Some people actually mentioned how they would hate to be forced to scroll up if they changed their minds.
  • Some people were not expecting lists on the Movie tab so they never thought about scrolling down to look for lists, they went straight to the Lists tab.

Every task was accomplished by all users but some features and flows were not yet in their optimal state so I went back and made some changes. Because the problems found were not the lack of features and more about how they were displayed I went right away to find a solution

I removed both the “featured list” and “regular lists” from the landing page to make sure no one would get confused again. I also removed the advanced search. I believed that removing this feature would hurt the general discoverability but people demonstrate they could easily find movies by using the menu or the search. They were not spectating such feature, therefore, they simply ignored it. And finally, instead of using images as covers for the movie lists, I decided to use 3 posters from movies included in the list as its cover. That way people would be sure they were looking at a movie compilation.

Some of the final screens.

What is next?

The website will slowly be coded now. Emerson has a very busy schedule so the coding process will take a while. New features such as people being able to create and share their own movie lists which are important to create a link between the website and the user are planned to be implemented post-launch. By then an online survey should be made to help identify the most valuable features for the users. We also plan to use Google Analytics data to provide information about what to do next.

What I would do differently

Honestly? A lot of things.

  • At the beginning, the process was fine but as soon as things got more complex entropy started taking over the whole thing. I wish I had better organization from the very beginning.
  • I would like to prototype earlier. Maybe taking pictures of sketches and prototype using Marvel. That would be pretty interesting for sure.
  • I would love to have some data to work with. Next time I’ll make sure I have enough time to gather useful data through early user interviews.
  • Next time I’ll make sure to have a back-up of every single thing I touch. (Yes, I’m talking to you Adobe XD).
  • I would like sketch way more to avoid wasting time creating high-fidelity pieces.
  • Maybe an online survey to find out what are the most important features would have helped a lot since I had no data.

What I learned

The whole experience has taught me a lot. These are some of the most important things I’ve learned during the process.

  • Done is better than perfect.
  • The creative process is a quantum superposition of both pain and satisfaction.
  • People create tons of sketches for a reason. I should sketch way more.
  • Making beautiful shots to post on the internet is fine but making things that actually work and are able to handle real-world situations is a completely different thing.
  • Lack of organization will make you to waste precious time.

Well, that is it. My very first UX study case, my very first UX project. Took me a lot longer than I thought it would to finish but I’m proud I’ve made it. The first step of a long journey.

I appreciate the time you took reading this study case! Feedback will be much appreciated!