Square Eyes

The frontend of a streaming platform where independent film makers connect with their audience. This was my first web project ever! While the code was obviously amateur, I keep this project as a memoir of my early beginnings as frontend development student. It taught me important lessons regarding semantic HTML, CSS, UX/UI, responsive design and, most importantly, usability tests. Here's how the development process looked like:

• Designing wireframes and prototypes;
• Understanding concepts of design, typography and colour theory;
• Developing a responsive website;
• Creating a headless WordPress installation to manage the website's content;
• Making API calls to the WordPress REST API to fetch the data;
• Installing Hotjar;
• Performing usability tests to improve user experience.

Product

Design concept

I created an AA-compliant colour palette based on Chaplin’s 1936 Modern Times movie poster:

Wireframes

Heat map

It is crucial to run usability tests with real users. By using Hotjar, for example, we can generate useful heat maps like these ones below. They may be valuable assets when taking relevant and better-informed design decisions:

Tools

• Adobe XD
• Adobe Color
• HTML
• CSS
• Vanilla Javascript
• Hotjar

Code snippet

Performing API calls for the first time was a little confusing, but in the end it worked well. This is how I fetched the "category" tags from the API:

const urlTags = "https://henrikugler.no/cmscaapi/wp-json/wc/v3/assets/project-imagesproducts/tags?consumer_key=ck_4ee7eb518ecca82639976d69725b240eca7cd1e5&consumer_secret=cs_3ab719e026712e212e3eeefdb0f8a25ec4c3326d&per_page=90";
const categoriesContainer = document.querySelector(".categories-container");

async function getTags() {
  try {
    const response = await fetch(urlTags);
    const tags = await response.json();
    for (let i = 0; i < tags.length; i++) {
        categoriesContainer.innerHTML += `
            <a href="/search-results.html?id=${tags[i].id}&tagname=${tags[i].name}">
                ${tags[i].name}
            </a>
        `;
    }
  }
  catch(error) {
      console.log("An error has occurred.");
  }
}
getTags();

Grade & Feedback

Details

Grade: 10 / 10

Grading criteria

• User-Experience: Can apply knowledge of the central concepts and processes for visual designing user-friendly solutions and services for web and mobile devices (3points);
• Technical proficiency: Masters Adobe XD and can perform simple image editing, designing or editing identity elements for on-screen use (3 points);
• UI: Typography, colour palette and layout component choices: Can apply basic knowledge about identity elements such as typography, color and graphic elements and perform simple development or editing of visual elements for on-screen use (3 points);
• Report: Includes a thorough report (1 point).

Feedback from instructor

The site has a very nice use of colour, and it’s easy to understand overall. The user experience is smooth, easy to navigate and master, with great user feedback & guidance. Keep consistency in mind for your site; the sizing & placing of the pages, text and elements across the website should be the same across the pages. Your mobile version works really well!

Links

• Mid-fidelity prototype on Adobe XD