HOME

Interface Design System

Description of Project 📖

My goal for this project is to design a website/platform where people of all backgrounds and ages have the ability to learn how to play an instrument at any level without any cost, can view pre-recorded lessons with instrument-learning basics, can schedule live lessons with a teacher they can match with, and have unlimited access to a high quality, large database of sheet music for any instrument. The screen I decided to design was the homepage that leads to all of the services. I decided to name the platform “Musical-u,” which is a play on words. It encourages a “musical you,” with the “u” also representing education by referencing “university.”

Purpose of Interface Design

The purpose of interface design is to further revise and build upon what you came up with during the paper-prototyping process, in a digital form. Good interface design will not overwhelm the user and separates information into digestable blocks of information and design. Users tend to prefer websites that are well designed, so this is a significant part of the design process.

Design Process

I used my paper prototype as a reference to create this design. First, I used Figma and created a frame with a custom size. Normally, with my projects, I use 1920x1080, the typical HD 16:9 screen size, so I decided to go with that resolution. I then laid out my components from the paper prototype. I added more sections, paying attention to the information hierarchy and structure. At that time, it looked very mid-fidelity. I then created the logo for my proposed service, Musical-u. I decided to go with a cool-toned color palette (purple/blue), avoiding warm tones like red, which is an alerting color, and yellow, which is difficult to design around because of contrast reasons. After coming up with the logo and color palette, I was able to come up with a fairly high quality design. Then, I made variations according to options I preferred for typography, shape, and light/dark mode.

Links to Figma file and prototype

Link to Figma File with my screen design variations.

Link to Figma Prototype of the screens, with some interaction (scrolling, hover states).

Screen Interface Designs 🖌️

Typographic Variations

I decided that for my website design, sans-serif fonts would be best for its readability since there would be a lot of content. I decided on three fonts to compare: Circular STD, Work Sans, and SF Pro.

When comparing the three, I decided that I would want to use Circular STD, because it was the most modern and unique font with amazing readability.

Shape Variations

Throughout my design, I had rounded corners on my rectangles for buttons, search input, and assets. I played around with 4px, 11px, and 15px radius used consistently throughout these components. I thought that 11px was the most fitting radius size. Note: The differences between the three variations are clearer if you zoom in on the file itself on Figma.

Color Palettes

I created a light and dark mode of my design, with some changes in the color palette depending on its usage on light/dark mode. For example, the dark grey color is slightly darker in dark mode to create more contrast. The primary accent color in dark mode is the light purple, as opposed to purple. The grey color is lighter in dark mode, again to create more color contrast.

Layout

For the layout of my design, I decided to go with a 12 column grid with a 300px margin. Historically, I use a 12 column grid for UI design because developers I have worked with used Bootstrap to create CSS and 12 column grid is the most helpful for them when translating Figma design to CSS. I let the Hero section bleed an extra 150px on both sides because Hero sections on websites take up more space than the actual content, which is confined inside the 12 column grid.

Components

When creating my design, I designed the logo and made it the first component. Following, I made the navigation bar and inserted an instance of the logo. For the buttons, I created hover states as feedback to the user that those buttons are interactive. These will be used throughout the website, so creating components early in this state is helpful if I want to make changes to these components. The changes would reflect on every instance.

Impression Testing 📝

Link to screen+audio recording

I showed my product to the same person I did contextual interviews with. First, I did a 5 second test and showed the design for 5 seconds. After the 5 second test, I asked him for his first impressions and what he could remember about the website. The following are his first impressions:

5-second-test findings

• Simple music learning website, got to the point
• Finding sheet music and instructors
• Can find all contact information easily
• Very organized, symmetrical layout
• Mostly white and purple accents
• Search function was one of the first things he saw
• Has what he is looking for if he wants to learn/search for music

I then sent him the prototype link and asked him to go through the screen and give me feedback on the design as he interacts with it. I asked him for feedback on the typography, color palette, and layout.

Color Palette

• Nice and easy to read
• Prefers light mode
• Purple and grey blends together in dark mode (even though they pass color contrast guidelines)
• Picture does not have enough contrast against the dark background
• Dark mode still legible and can read everything
• Background is a good darkness

Typography

• Very minimalistic
• Being able to see everything on the main screen at once is nice
• Legible, nothing is too small, doesn't have to zoom in

Layout

• Having links at the top is nice
• Search function is helpful
• Would have to scroll down, might miss instructor option
• First thing they see is the search function and the navigation

What he would like to see on this page

• Reviews on the page, so he could know credibility of the website
• "Schedule a Lesson" can cause confusion, would use "Instructors" instead but thinks that still can be confusing

Accessibility + Contrast Check 📐

I checked the contrast between the main text components of the website which uses the color palette. The order of the light mode palette contrast check corresponds with the dark mode palette. They all pass the WCAG guidelines.

Final Screen Design & Design System 🎨

Screen Design

Below is the final screen design, in light mode, using Circular STD and 11px radius rounded rectangles.

Color Palettes

Typography

Layout & Spacing

Summary of why I made my design decisions

Typography: As mentioned above, sans-serif fonts would be best for my website’s readability as there would be a lot of content. I compared three sans-serif fonts, Circular STD, Work Sans, and SF Pro, and decided on Circular STD because of its modern and clean, yet unique look.

Color Palette: I chose purple to be the main color as I wanted a cool-toned color palette. I thought that warm-toned colors would be difficult to design around (red=too alert, yellow=hard to design for contrast), and purple/blue is a welcoming color. I created a light and dark mode of my design, with some changes in the color palette depending on its usage on light/dark mode.

• The dark grey color is slightly darker in dark mode to create more contrast.
• The primary accent color in dark mode is the light purple, as opposed to purple.
• The grey color is lighter in dark mode, again, to create more color contrast.

Layout: I decided to go with a 12 column grid with a 300px margin because I have used that layout in the past, and it is standard. I let the Hero section bleed an extra 150px on both sides because Hero sections on websites tend to be wider than the actual content.