Chosen Existing Application

IMDb was the chosen existing application/website, this is an online database for movies, tv series and other streaming content.

Evaluation of the existing site

The accessibility of IMDB was evaluated against the WCAG principles.
Website aesthetics evaluated e.g. colour scheme, white space etc.

Evaluation against WCAG

Perceivable

IMDb does use some text content for non-text-based content when viewing images on movies, series, or a person. However, there was a lack of alternatives for time-based media, (viewing a trailer)

Use of light grey text on a white background, this is not easily perceivable for users, especially visually impaired users. Furthermore, this text colour is used for small text making it even harder to read clearly.

Addtionally there are no accessiblity setting available to the user apart from changing the language.

Operable

The website is keyboard accessible, users can navigate through the site without touching the mouse

• Tab to move. • Shift + Tab to move backwards. • ‘Enter’ or ‘space’ key to activate specific element.

No content on the page flashes more than three times in one second so this meets the guideline. There is no session timeouts. There is a lot of information to read on the page and writing a review may take some time, having no timeout will allow each user to use the site at their own pace.

Understandable

The website doesn't use any unusual or unfamiliar language so is easily understood. Error messages were written well and could be clearly understood. One big problem IMDb has with being understandable is the predictability of the site with the page layout. Pages look very different from each other, buttons and headings shift from different locations on different pages.

Robust

IMDb is compatible with a lot of different browsers and devices. For browsers I tested it on Edge, Chrome, Firefox, and safari. With devices, it was tested on a laptop using windows 11, PC using windows 10 and a MacBook Pro and it the website worked as intended on all different browsers and devices.

Methodology

For the development of the prototypes, an agile methodologywas used for iteration. There were 3 prototype iterations (2 low and 1 high fidelity) and feedback was gathered after each iteration.

Heuristic Evaluation of IMDb

Conducting a heuristic evaluation, I assessed the usability of the existing application when comparing it to the Jakob Nielsen Usability heuristics. I went through each of the ten principles and assessed the website on how much it followed the principles.

Some key issues identified:

No clear indicator to what page you're on, some pages have headers, some do not, no consistency.
Some actions not providing clear feedback, e.g., when creating a list, you are not 100% sure it has been successful.
Lack of consistency, pages look completely different from each other.
Ads take up too much space.
There is unneccsary buttons/links on pages. For example, when viewing a movie, there are links to user polls, user lists and pages irelevant to the page
No focus on essential information, too overwhelming for the user and can get easily distracted, this makes navigation difficult

Interviews

A short interview was conducted with a user for their thoughts on the existing IMDb website. During this interview, I got the user to use the website as they would if they were a normal user and additionally gave specific tasks to.

Some key points raised:

Navigation menu being unintuitive.
Ads take up too much space, pop ups too invasive.
Blue buttons – did not like certain button just being text colour blue, out of place.
Drop-down menu too big and overwhelming
There was an easy reversal of actions, back buttons worked all the time.
The sequence of information was structured poorly.

User Personas

User Personas were created based on the users that would use IMDB, for example, movie reviewers/critics and causal users who just look for tv series and movies to watch.

User Journey

User Journey's were conducted using the created personas to understand the emotions, feeling and any frustrations a user would have when they use the site to achieve a specific goal

HTA Diagram

Hierarchical task analysis was carried out to break down tasks into smaller more manageable chunks to allow a much clearer understanding of the requirements and goals for the users.

Cognitive Walkthrough

Cognitive walkthroughs were carried out to test the usability and elarnabiltiy of the prototype. Feedback from this included:

Too many buttons on the top navigation, too close to each other and cluttered in one place, everything is too tightly packed. Users struggled to find the correct action.
More information needed on the notification pop up to guide the user.
Pop up to say a review is successfully submitted, users were not aware if their review was submitted after clicking the submit button.
Tell the user that the review will need to be approved before writing, a user was not aware reviews had to go through approvals.
The quick navigation buttons were used and liked.
One user was not aware of the profile icon was a button when trying to find the list page. Should consider making it easier to understand it’s including a dropdown menu, maybe add a down arrow beside it.

Low Fidelity Prototype 2

A rework to the navigation by creating a side navigation going vertically compared to the horizontal layout which squashed all buttons together too closely.

Side navigation for all sections on movie page, Either scroll to go to each page with the movie page (e.g., release calendar, top 250) or use the side navigation buttons.

Low Fidelity Prototype 2 feedback

Cognitive Walkthrough

Another cognitive walkthrough was carried out on the 2nd low fidelity prototype.

Have the ability to have a link shortcut on the notification pop up.
Users completed tasks easily could clearly find and know what actions were required to complete the tasks
The addition of the side navigation was liked and used by the users, Users liked that it was in a fixed place

High Fidelity Prototype

This section will go through all the pages I created for my high fidelity prototype.

Home Page

Existing Site

High Fidelity Prototype

Key improvements over existing website:

Improvement to the colour scheme. Added a dark grey colour for the background and will be consistent on every page. IMDb constantly changed between black and white backgrounds.
Side navigation added- Shows different sections on the page, user can click the button to scroll to selected section. You know exactly what is on the home page where with the original site you have no idea, saves time scrolling.
Icons were added for all the main navigation buttons.

Main navigation section, you can see that each button has an icon and it is much more organised and quicker to navigate compared to the original dropdown menu IMDb used.

Existing Site

High Fidelity Prototype

The dropdown menu from the existing website was completely removed and moved to the main navigation and each given their own page. This is much more organised compared to the overwhelming dropdown.

Existing Site

High Fidelity Prototype

The existing website navigation bar was not sticky, with the prototype it is, it will stay with the user whereever they scroll. This change was done as there is a lot of scrolling required as there is a high amount of content on all the pages. It allows for easy navigation and doesn't take too much space on the screen away from the content.

Existing Site

High Fidelity Prototype

An additional page was created for a users reviews. This was previously held in the my activity page, during testing of the existing site, users had difficulty find their reviews as it was hidden at the bottom of the page.

My List Page

Existing Site

High Fidelity Prototype

Side navigation provides shortcut to watchlist page. This page has been tidied up and the 'create new list' button has been mived underneath the heading with everything else. It was out of place to the side originally.

My Watchlist Page

Existing Site

High Fidelity Prototype

Watchlist page - tidied up the page and removed unnecessary information off the page. Shortcut to mylist page with side navigation.

My Ratings Page

Existing Site

High Fidelity Prototype

With the rating page, the your lists section was removed as it was unnecessary and took up content space. If this wanted to be included it could be placed at the bottom after all the rating content, it looked out of place in the existing site.

My Reviews Page

Existing Site

High Fidelity Prototype

THe existing website didn't have a page for a users reviews, it could only be found at the bottom of the my activity page. With user testing, some users struggled to find where to find their reviews. This addtionally felt out of place as there were dedicated pages for reviews

Notifications

The notification button was added from the first low fidelity prototype, this stores user activity (e.g., creating a review, adding a movie to a list). The existing website gave little to no feedback when users completed actions. A notification page was created.

Notification example

A shortcut was added into the notification was due to a user interaction during the cognitive walkthrough. A user wanted to click on the notification to navigate to their review, this is now possible.

Movie Page

Existing Site

High Fidelity Prototype

The side navigation scrolls to the selected sections of the navigation page. There is a much better balance of white space in the prototype, a big problem when viewing a person, movie or tv series on the existing website was the unnecessary information being displayed. All information not related to the specific page was removed to prevent overwhelming the user with information.

The sequence of information on the pages was restructured as it felt disorganised. For example, the storyline section was moved up to the top instead of being found in the middle of the page.

User Reviews Section

New Critic Reviews section

A new section was created for critic reviews. This was previosuly only accessbily by a small button at the top of the page which was easily missed by users.

Existing Website

High Fidelity Prototype

When the low fidelity prototypes were tested, a user was unaware that reviews needed to be approved and that it was not stated anywhere. A notice was added above the submission stating this information.

Review Close

Error prevention has been added when writing a review, if a user attempts to close the review, a message will popup stating that the review will not be saved and will be deleted. Some users may not be aware that incomplete reviews cannot be saved when closing. In the existing website, users could click the close or click outsid eof the review section and it will close and delete review progress.

Movie Forums

Movie forums were added, this was an old feature in IMDb named as movie boards but was removed over 5 years ago due to difficulty with moderating. Itallowed users to have discussions with other users on movies. This has been implemented in the prototype by having a movie forums section. Within this section are various links to different forums on the internet that the user can look at, this removes the need for moderating the forums.

Actor Page

Existing Website

High Fidelity Prototype

The actor page had the same redesign as the movie page with the much better use of white space and having less information at the screen at once.

Accessibility - Colour blind setting

Colour blind settings were added. 8 different colourblind types available for the user to pick from. The image below shows the changes that happen to the page when the user picks one of the 8 colourblind filters. Colourblind settings were included as the existing system did not have any accessibility options for colourblind user, having these 8 different settings should cater to improving the user experience for users with different types of colour blindness.

Accessibility - Dark mode

Option to make the page light or dark.

Feedback

Cognitive Walkthrough of High Fidelity Prototype

Cognitive Walkthrough with 5 different users to test the usability and learnability of the prototype. This had a more successful completion rate compared to the previous two prototypes. improvements include:

Improvements required from testing:

Side navigation not having clear headings. For example, when viewing a specific movie, the heading of the side navigation should be the mobie title, not 'movies'
Clicking to view a movie should be easier, multiple users clicked on the image instead of the title to navigate, image should link as well

Heuristic Evaluation of High Fidelity Prototype

An heurstic evaulation of the final prototype was conducted.

Improvements to make:

Lack of hover effect on buttons
Poor labelling on heading on the side navigation.
Have side navigation buttons change decoration when clicked on