CONCEPT AND OVERVIEW
The concept of my website, Kel’s Keyboard, was inspired by the lack of websites about learning the piano that provides short and simple information specific to a niche audience. The website details basic piano theory lessons, tips and piano covers. Kel’s Keyboard’s purpose is to teach the fundamentals of piano theory by using my perspective and skills that I’ve learnt through my piano lessons. The content provided on the site assumes the user has no previous knowledge on learning the piano. Thus, the target audience are beginners of piano who have no idea where to start but have a keen interest for self-studying the instrument. It is also aimed at people who have just started to learn and want to revise the basics and have a better understanding. Kel’s Keyboard is much more straightforward, and minimal compared to other piano websites. The addition of my own covers on the site intends to inspire audiences and show my capabilities in teaching them, making it unique from other sites.
VISUAL COMMUNICATION AND DESIGN
Parallelism delivers an articulate structure for classifying and learning from images. By forming an arrangement of relationships and rhythm, “parallelism becomes the poetry of visual information” (Tufte 1997, p. 103). As seen in figure 1, the image of the piano note changes, but the consistent position of the image and the similar features of each note provide a sense of familiarity. This is an example of multiple parallel images whereby the consistent structure of the images and explanations for these images provide further clarity, efficiency, and balance. As a result, the website has an organised visual aid, resulting in an ease of understanding the differences in each piano note.
Colour is used as a design-feature that can distinguish different parts of a website (Kress 2009, p.139). To enhance the simplicity and readability of my site, a consistent colour scheme was maintained. Through Johnson’s guidelines for using colour, I found that it was important to, “distinguish colours by saturation and brightness as well as hue” (2010 p.61). I decided to choose the colours yellow, blue and red-pink for my logo because the contrast between these colours are high, enabling each colour to be seen clearly. I also kept this colour scheme consistent throughout my website to avoid elusive colour differences and increase legibility.
Typography was another factor that was considered in the visual communication and design of my website. I was offered a limited amount of text fonts due to the restrictions of a free WordPress account, however, I thought that the font ‘Oswald’ best suited my website for titles because the tight kerning makes for a formidable and succinct effect (Saltz 2009, p.71). Moreover, different weights were used to determine the different hierarchies (Saltz 2009, p.30). For my pages (refer to figure 2), I wanted the title of the page to stand out. Hence, I made the font size bigger to highlight its’ authoritative title, providing a rough idea of the following information written below.
USER INTERFACE DESIGN
To create the best suited interface design for my website, I had to, “avoid ambiguity, be consistent, and understand the goals” (Johnson 2010, pp. 8-9). The first step in creating the website involved picking a theme on WordPress that would align with my goals for the interface. The ‘Ixion’ theme was selected for its minimalism and the specific placement of each feature on the home page. Through this theme, I was able to insert a photo of a piano as the header in hopes to immediately convey to users that the site is music-related. Also, the menu bar is designed to categorise the specific content depending on the user’s goals. It is located at the top of the home page (refer to figure 3) for familiarity as that is where websites normally place it. This allows users to spot and recognize exactly what they want to look for whether that be lessons, tips or covers. The design of the drop-down menu once the user hovers over each option provides further insight and detail for each category.
Figure 3. Kel’s Keyboard Homepage
As the user scrolls down on the home page, there are posts chronologically ordered by date that refer to the content produced for the website (refer to figure 3). These concise posts aim to stimulate users who wish to browse in a linear fashion. Ease of navigation was also considered and this is shown through the embedded hyperlinks in these posts that direct the user to their desired page. To create further visibility, widgets located on the right of these posts are of top pages, social media pages and the option to follow the website. In addition, an interactive interface is formed through the ability to comment on pages and ask questions. This is particular helpful for this website because not only are users learning from the website, but from others who have similar goals.
User Experience Design across Digital Platforms
Social media has the capacity to be a key source in driving traffic for a website and to build a larger audience (York 2016). For Kel’s Keyboard, two digital platforms are used: Twitter and Instagram. For a coherent user experience design, these digital platforms were used in means to promote piano-related content and prompt users to visit the website. In addition, the use of widgets allowed the website’s home page to show the social media accounts.
The use of twitter for Kel’s Keyboard aimed to share funny, informative or interesting piano-related videos and notify users of new content. The affordance of Twitter allowed for short, simple messages and the automatic hyperlinks whereby users could be easily directed to the website. Hence, when informing users of a new post, I could easily embed a link to the post in a tweet for easy navigation.
It was important to use Instagram as a visual aesthetic for the concept and not only does this aim to captivate the current audience, but also increase publicity effectiveness (Colliander & Marder 2017, p.35). This platform is based on video and image posting that is restricted to a certain size, enabling for a uniform profile. I designed pictures, tips, quotes, and always ensured that these posts were yellow, blue or hot-pink to connect with the logo, resulting in a consistent theme. Furthermore, I captioned questions, short information about the post, and relevant hashtags to drive audiences to visit my website and acquire high engagement. However, the constraint of Instagram in the inability to hyperlink in captions forced me to constantly tell users to check my website link in my bio instead of providing a link to the post’s caption.
AUDIENCE METRICS
WordPress statistics enabled me to see how many views I received for my website for each specific page. Judging by the data (refer to figure 4), the views were relatively low except for the home page. As the home page is the page everyone sees once the site is accessed, this indicates that users did not have a strong desire to explore the website. Thus, the structure and design of the home page was not as effective as I thought.
Other digital platforms such as Instagram and Twitter were used to promote Kel’s Keyboard. The engagement for Twitter formulated similar results to my website. I accessed my top tweets and noticed the one with hashtags and capital letters formed the most impressions. The high level of impressions may be due to the hashtags that drive in more audience engagement. However, my engagement rate on Twitter was relatively low in comparison to Instagram and this may be because I posted more regularly on Instagram. I noticed a higher audience engagement every time I posted through the increase in “likes” and gradual increment in the number of followers. The post for most engagement on my Instagram was a preview of the first cover I uploaded on my website. This indicate that perhaps the audience enjoy videos more than images regarding piano-related content.
Future Directions and Development
Learning how to play the piano is an extensive process and moving forward with the site would involve continuously adding more content in regard to lessons and tips. I also envision uploading video tutorials on my website for additional visual communication. In addition, I would continue to post more regularly on both Twitter and Instagram to promote Kel’s Keyboard.
Though the covers were fairly successful on my Instagram, instead of uploading the favourite songs I like to play to inspire the audience, I could aim to upload covers at an easier level. This can make my audience seem like it is achievable for them, and thus, intrigue them to stay longer on the website.
In terms of design and analysing the statistics of my website, I realised that my website has not been very effective in encouraging users to click any further from the homepage. A more aesthetic approach and captivating titles on the home page can increase audience engagement and grow the site. To do this, I would consider using a premium WordPress website for access to different themes that allow me to be more flexible with the layout.
Reference List
Colliander, J & Marder, B, ‘Snap happy’ brands: increasing publicity effectiveness through a snapshot aesthetic when marketing a brand on instagram, vol. 78, no.1, pp. 34-43.
Johnson, J 2014, Designing with the Mind in Mind: A Simple Guide to Understanding User Interface Design Guidelines, Morgan Kaufmann Publishers, Massachusetts.
Kress, G 2009, Multimodality: a social semiotic approach to contemporary communication, Routledge, London.
Saltz, I 2009, Typography essentials: 100 design principles for working with type, Quarto Publishing Group, United States of America.
Tufte, E 1997, Visual Explanations, Graphics Press LLC, United States of America.
York, A 2016, 6 ways to immediately boost your social media traffic, SproutSocial, viewed 12th June 2019, <https://sproutsocial.com/insights/social-media-traffic/>.
Kel's Keyboard 