the Project

Terráqueos was a Brazilian film website created back in 2009. The website was shut down and now, a few years later, they decided to bring it back online and contacted me to create its mobile version.

Read the full case study on Medium.

my process

I started by framing the problem. That was accomplished by interviews and chats with the client. I also created a content inventory to help me understand the scope of the project. Then I felt ready to do some research and start the ideation.


Due to technical reasons, all data gathered through previous years was lost. Also, it is worth mentioning this was my first UX project so lack of experience was a major challenge as well.


Initial research was made to find out who the target audience really is and to gather as much data about them as possible. How? By studying competitor's audience, creating the most likely scenarios and performing a competitive analysis.


The sketching process was rather short because the number of features and pages was not large. They were mostly used to explore, validate and compare ideas and as blueprints to build higher fidelity deliverables.


Wireframes were build using Axure. They were used to take the exploration of ideas to a higher fidelity level and for presenting the website concept to the client.

They also guided the next steps as the wireflows helped me to understand the navigation and to detect navigational gaps.


I have used Marvel to create a high-fidelity clickable prototype. Before doing so I’ve come with a couple of tasks users would need to perform. These tasks were designed to give me answers I was looking for, to confirm (or not) the hypotheses made about the target audience.

  • Create an account so you can enjoy the whole website’s benefits.
  • You want to find all Now Playing movies so you can decide which one to watch on the theater.
  • The Mummy is a very popular film you would like to watch. Add it to your watch list.
  • Once in the Hitchcock list you realized you want to add the first movie into your watch list. Do it so you remember to watch it later.
  • You have been told about this great Hitchcock drama list. Find it.
  • You want to find new Drama movies to watch. Find lists of Drama movies.

I downloaded Marvel App and asked people from my 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. After the test was done I also had a few follow-up questions. These were the most important findings:

the good

  1. People were able to effortlessly remember the possible paths to the website's main pages.
  2. The fixed header helped them to navigate to locate their current position.
  3. Users found all the information they were expecting.
  4. All tasks could be completed.

the bad

  • Similarities between "Movies" and "Lists" pages made people confused.
  • The advanced search for movies and lists either confused people or were completely ignored. Most of the times, people rather use the menu or search to find movies.
  • Using images as covers for " Lists" is confusing.
  • Some people were not expecting lists in the Movie page so they never thought about scrolling down to look for lists, they went straight to the Lists page when given a task.
  • Some people actually preferred to navigate using the menu. For those, the experience was not optimized as some important links were missing.
Iteration & HANDOVER

User testing made clear some things were not working as they should. I went through my notes and after some critical thinking came with a few solutions.

01. Problem

Similarities between "Movies" and "Lists" pages made people confused.

01. Solution

I removed the "featured list" from the landing page to make sure both Movies and List pages felt as different places.

02. Problem

The advanced search for movies and lists was not working at all.

02. Solution

I removed the advanced search feature. I believed that removing such feature would hurt the movie's discoverability but people could easily find them by using the menu or the search.

03. Problem

Using images as covers for " Lists" is confusing.

03. Solution

Instead of using images as covers, 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.

After changing the most urgent items the website was ready to be handed to the client so he could start coding it. These are some of the final screens:

What I would do differently

Honestly? A lot of things.

  • I wish I had better organization from the very beginning.
  • I would like to prototype earlier.
  • Next time I’ll make sure I have enough time to gather useful data through early user interviews and online surveys.
  • Next time I’ll make sure to have a back-up of every single thing I touch. I wasted some time because I didn't.
  • I would like to sketch way more to avoid wasting time creating high-fidelity pieces.
What I learned

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

  • Done is better than perfect.
  • 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.

I appreciate the time you took reading this study case.
If you want to talk, here is where you can find me: