.png)
An app for learning more about history by connecting with shows and movies that users already love to watch
Role: UX/UI Designer
Duration: July - August, 2023
.png)
Learn how I designed an app with demand,
but no existing competition
The idea for this project began when I was watching a series of period pieces, TV and movies that were set during different times in the past. However, whenever a period piece took place more than 100 years ago, I was very confused keeping track of the time period and historical context. I asked around, and several of my friends had encountered the same issue.
The solution for this was an app, which would place historical movies and TV shows on a timeline. This timeline would allow users to compare the time periods of different shows to each other, and to the larger historical context.
To figure out if other fans of historical dramas ran into the same issue, I conducted user research. I found 10 interviewees who reported enjoying historical TV shows and movies. I held in-person or video interviews with 4 of them; the other 6 completed an asynchronous survey of their preferences.
During the interview process, I wrote down the titles of the historical dramas that the participants listed as their favorites. Later, I looked up the beginning year each title was set in. I've compiled the results in the following graph, showing which time periods are the most popular from my sample. The result was a fairly even spread from the 1400s to the 1900s.
.png)
I followed the same process to determine where the favorite historical dramas of my research participants were physically set. The runaway winner is clearly Europe, and more specifically, England. North America comes in second. This helped me determine what historical themes to emphasize in the app's design.
.png)
The interview subjects don't feel like they have enough historical knowledge.
They want to learn more.
9/10 respondents reported middling to low confidence that they could pinpoint when their favorite historical dramas take place
8/10 respondents cited "learning about history" as a reason why they love to watch historical dramas
I conducted competitive analysis to see what products I could find that were operating in a similar space. First, I had looked for any app or website that offered the exact service as my proposed app; however, I couldn't find one that was even close. At this point, I broke up my search: I found one app specializing in timeline visualization, one app specializing in watched movie & TV show tracking, and one community-based website that provides extensive additional information for most forms of popular media.
.png)
With the results of my research, I created my user persona for the app. This persona loves to watch historical movies & TV shows, and her love for them stokes her curiosity to learn more about the historical context that surrounds them.
.png)
I created a feature roadmap to prioritize what pages and flows were most vital to the functioning of the app. Many of the items on the roadmap are common to most apps, like the signup flow, while others are unique, like the timeline. At the end of the list, I brainstormed some items for future iterations of the app.
I then created a user flow, focusing on the most common paths that my prototype would focus on: the account creation flow, adding a watched movie/show to the timeline, and receiving future movie/show recommendations.
.png)
Alongside the user flow, I created the site map, separating out the different tabs as they would appear on the homepage. To create this site map, I used a card sort activity, where volunteers sorted elements into the tab category that made the most sense to them.
.png)
I created wireframes of essential screens for these main flows. It quickly became clear that the final designs would need to have lots of images pulled in to make it an immersive experience.
.png)
The brand colors were influenced by important colors from history: purple and gold. These colors contrasted well with each other, and gave the app a historical feel without looking out-of-date.
.png)
For my font choice, I chose Lora for the headers and Cabin for the body text. Lora has a distinct look that is easily readable on mobile devices, but still resembles the elegance of a script font. I paired it with Cabin, a sans-serif text that makes reading movie synopses easy on the eyes.
.png)
I decided to use pictures of historical paintings for as much of the imagery as I could, while not being obtrusive. Historical paintings are a view back into the past, which was the same as the goal for this app. Additionally, many historical paintings have done a great job of capturing expressions and emotions, which I hoped to convey to the users.
.png)
My initial idea for the logo was a castle, a symbol from the past, pinned onto a gradient that represented the passage of time: a figurative representation of the timeline portion of the app. However, this first logo was too busy, so for the next iteration, I took out the pin and the circle elements inside the gradient, and worked on ways to simplify the castle design. The second castle design looked too much like a chess piece, and I didn't want it misinterpreted. I landed on a simplified version of the initial castle, with all unnecessary elements removed.
.png)
I chose to design a version of this app that would be for Android smartphones. To represent how it would interact with the OS in its final form, I added an Android's status bar to the top of the screen and navigation to the bottom.
To simulate the zoom and scroll functionality of the timeline, I created three timelines from 1400 to present day, each one double the length of the previous one. I then set the timeline frames to scroll through the overflow, and swapped to a different timeline length when users pressed the zoom buttons.
.png)
.png)
.png)
.png)
.png)
.png)
I conducted moderated usability tests with 5 participants in the target market, by asking them to complete the following tasks:
• Create an account and set their viewing preferences
• Add a watched show, and then view that show on the timeline
• Navigate to their user preferences and edit a preference
Participants were able to quickly and successfully complete these tasks! They commented that the flows were straightforward and easy to follow. They did leave me with a few suggestions, which are sorted on the following chart.
.png)
The first item I prioritized for iteration was adding a page count to the account creation flow. The progress bar had only shown an approximate amount of progress, rather than the exact number of pages left.
The second item I prioritized was adding a search function to the timeline page, for cases where users have added many movies & TV shows to their watched list and want to find a specific one quickly. I added the search button as a collapsible, secondary button beneath the zoom to make it unobtrusive when not being used.
.png)
The most common feedback I got through the entire process was that people loved the idea of the timeline. In recent years, more and more audiences have gotten introduced to watching period pieces, and it has stoked public interest in certain historical time periods. This app serves a need that an increasing amount of people are experiencing, and I haven't found any other app or website on the market that fills the same niche.