Letterboxd Mobile/App Redesign
| Project Type: | Solve Your Own Problem – Mobile/App Redesign |
| My Role: | Student |
| Client: | Northern Alberta Institute of Technology |
| Tools: | Adobe XD |
| Year: | 2020 |
For my Web Usability class, I was tasked to find a problem relating to UI/UX design and solve the problem. I decided to redesign the mobile/app home page design of Letterboxd, a social media website revolving around films.
The Problems
On using Letterboxd for several years, I found a few problems in regards to usability and user experience.
Screen responsiveness
First, I found that the website is not responsive to different screen sizes.
Small text and images
Second, while Letterboxd has a mobile app, the usability and design of it could be improved. As seen in the screenshot below, the size of the content is fairly small. The text below the posters — the reviewers’ username and rating — are small and hard to read.
Inconsistency between web and app content
Another issue I found with the app is that the display and content are inconsistent from the website. For example, the first row displays “New from friends”, and the second row displays “Popular with friends”. However, on the app, the first row is actually “Popular this week”. This would be confusing for a frequent website user because they would expect to see “New from friends”, followed by “Popular with friends”, as that is how the website is laid out.
Solutions
With these points in mind, I created this Letterboxd mobile/app redesign with Adobe XD.
Consistency between web and app content
First, I made the display and layout more consistent by including the welcome message at the top, as seen on the website. I also changed the title of the home page from “Popular” to “Home”.
I also removed the “Popular this week” section seen in the app and moved the “New from friends” to the top, to reflect the layout of Letterboxd’s website.
Readability and size of content
Second, I made the font size and image sizes a little larger so that they are easier to see. I also aligned the content so that it flows in a column, rather than side-scrolling.
Functionality
A small excerpt of the review is displayed. When the user clicks/taps on it, they would be brought to the full review page. When the user clicks on “Load More”, two more reviews would load underneath.
Below the first section is the “Popular with friends”, keeping with the website design. There is also a “View all popular” button that would take the user to a separate page displaying all popular movies amongst their friends’ list.
In summary, I redesigned the home page of Letterboxd’s mobile app to be more easily readable and viewable, as well as to be more consistent with the original website’s design and layout. This would allow users to have an easy and seamless experience on both web and mobile devices, and prevent users from being confused with the inconsistencies.
