borja castropol

Shelves: all your media content in one app

Mobile application created as a side project to help users organise their media content. Our research shows a need for an improved experience for those looking for a better classification system.

My role in this project: UX Design, user research, prototyping and usability tests. Pretty much everything; it’s a personal project.

shelves app login screen

A place for all your entertainment

shelves image

The Challenge

Most users have different methods, or even none, for staying up to date with the content they consume. Already existing apps include a variety of features, but they aren’t suitable for some users. Most users install three separate apps for their TV shows, films and books

Our research reflects a common interest in a simpler yet still powerful entertainment organisation system.

The Solution

A new app to be used as an entertainment hub, collecting your entire media content consumption in one single place. 

We tried similar apps and then proceeded with a broad user research including surveys and 1:1 interviews, gathering data and creating several alternatives as part of our iterative design process.

quantitative data

UX research

By creating this app we want to help users take control of their media consumption, to become aware of the content they watch or read without ever having to spend time mindlessly wondering what to watch or which episode they were in. This would be a new way to improve users digital wellbeing by making sure their screen time is put to good use.

We tried, and collected information about, the organising apps currently available. Then gathered quantitative data by surveying more than 50 potential users. Among these users we focused on the 19-30 age group primarily.

Later on we conducted 1-on-1 user interviews to gather qualitative data with a focus group of 10 users. Our research pointed out the major flaws in other apps out there, but also the need for a better system that works for most users, specially for those classifying all their media content in many different places, both digital and analogically.

We curated a list of top user needs and managed to ideate some design alternatives including most of these features. As part of the iterative process we designed and refined most screens to improve the experience. Making the workflow simpler by minimising the steps needed to complete different tasks such as updating the ‘watching’ status of a TV show or checking out other titles published by an author.

User persona

user persona and qualitative data gathered from user interviews

Design alternatives and iteration

shelves image

Wireframe and user flows

sticky notes with user flow

Creating a design system

We created a colour code with three main hues for the categories: a colour harmony that conveys a sense of familiarity and confidence, all while being fun and modern.

design system hues

The design system was completed with the creation of reusable components such as buttons and, most importantly, the custom icon set to be re-used in the different screens, adapting to the categories and their colours.

icon set, tab bar and secondary icons

All your media in one place

We created a UI combining most of the users’ needs. User profiles with favourites lists, custom lists to organise content (books, films and TV shows) based on whatever criteria users choose and media pages with all the important details and metadata, among many other features. 

We conducted usability tests with Figma’s prototyping tool, and our tests showed a minor learning curve. We achieved this both by using differentiated colours to help users identify the type of content, and by applying similar user flows and styles to some other popular media apps. 

app's profile screen and custom lists
app's films details
App's book details and artist screen
app's TV show details for seasons and episodes
app's screens for user's content
app's screen for media sorting by genre or year

This is a side project created in close collaboration with fellow designer Isabel Cor. We’re currently looking for investors to create this app. If you’re interested, please, contact us to know more details. Thank you!

Please, note that details shown in this UI might not be accurate since its’ purpose is to show the User Experience.