Oops! I Did It Again…UX Design Website Challenge With Adobe XD

Case Study Exercise Round 2 for Coursera’s Google UX Design Specification

Here I am again, posting my 2nd project from Coursera’s Google UX Design Specification. This time, I’m doing it with Adobe XD. It’s really easy to get started with Adobe XD, as it only took me one day to complete the initial design with all the design artifacts for one user flow.

To give you some background about the course. The course, “Google UX Design Professional Certificate,” is designed for beginners who have no prior design experience like me. You can also check out my first UX design portfolio here.

To get the course certification, students must design 3 UX projects throughout the entire 7 modules. I picked a topic that I’m interested in from a prompt generator called Sharpen. Today, I’m going to design a responsive website for an orchestra.

Friendly reminder, I made a lot of assumptions when creating this design project, so most of the results of the interviews are hypothetical based on my own experience. And the copyrights of all the album cover image goes to their respective record companies.

Now, let’s jump right to it.

Project Overview

My 2nd assignment is to design a website for an imaginary orchestra. I created a short intro for one Neverlandseeker Philharmonic as below. For this design, I’ll focus on the checkout process.

Understanding The User

User Research — Summary

I conducted user interviews leading to “empathy maps” to better understand Neverlandseeker Philharmonic’s target user profile and needs. I discovered that apart from existing orchestra fans, the new platform may attract additional music lovers who have broader music tastes. Users are likely to enjoy listening to music to relax after a long day at work or from school. A powerful music search engine and a smooth ordering process are essential to keep the website’s drop-off rate low.

User Pain Points — Persona of Sam & Pete

As an all-time music fan and records-keeping lover, I applied my own pain points and desire when browsing similar music download websites. Below 2 personas reflect different client groups the orchestra is trying to capture.

User Journey Map — Pete’s Example

Pete’s user journey reveals that the orchestra should redesign the search engine logic to provide a better user experience. Also, more prompts will be preferable during the checkout process.

Sitemap

A well-structured sitemap before drafting a wireframe is an excellent opportunity to think through how my ideal website will look and what functions I want to embed in which menu tab.

Starting the Design with Adobe XD

Digital Wireframes

A wireframe is an important artifact of UX design. To help students with the 2nd assignment, Google’s Coursera lecturer introduced another design tool, Adobe XD.

I’m just a beginner and haven’t explored all the functions yet, but I would say Adobe XD does have some refreshing functions compared to Figma, such as “Repeat Grid” and a very delicate image display. But a major weak spot is that Adobe XD doesn’t work on the web like Figma, so the file size is huge, and the app crashes in the middle of the design.

In the low-fi wireframe below, I changed the placeholders in the header. I want to make sure all the functions displayed in the sitemap can be accessed on the homepage with a minimalist style. You may also notice that I have already revealed the musician for the demo, the magnificent composer Ennio Morricone.

Also, you can see how different the website looks on a desktop from on a mobile device. Usually, these two versions look similar in terms of layout. I wanted to create something unique, so I designed a section below the hero image on the mobile screen where menu items are broken down into small icons. User can filter their search with one click, among other features. (This section is not following the usual responsive web design guidelines)

Low-fidelity Prototype

The “low-fidelity prototype” connected the music ordering user flow from homepage navigation, album searching, tracks selection to payment and track download. It also embeds features like saving favorite albums/tracks and different music format selections when downloaded.

At this point, I have already adjusted my design based on initial user feedback. I will use the revised prototype for a 2nd round usability test to address all the pain points.

Click here to access my lo-fi prototype on Adobe XD

Usability Study with Findings

You can do the usability study for multiple rounds. The below screenshot includes the parameters and settings of the study. You can see that I choose to do an “unmoderated study,” which means users can complete the whole test in a remote location. Researchers will receive a video recording of their operations afterward, from which researchers can see what a real user may react when using the platform without guidance. It’s also a great approach to gather overseas feedback, which aligns with the persona of Neverlandseeker Philharmonic.

Refine the Design

It’s time for my favorite part. Bring in all the images and colors! I selected some of my favorite albums of Ennio Morricone.

Mockups

Some major changes were made to reflect new feedbacks.

1. Search Result Page: Some users complained that they were unable to find the right album. My insight is that a popular musician may have as much as dozens of albums associated with him or her, so I added sort by button after users enter first keyword set. A 2nd click of the sort by button will then sort the search result in descending order.
2. Credit Card Page: As the orchestra has a global audience base, I inserted new payment options from 3 to 7 based on user preference. I also changed the formatting of information input from oval shape to rectangle one to align with overall website design. Moreover, I created an eye-icon to “hide” users’ personal data and give them more privacy from prying eyes.

I mainly used the same layout in both desktop and mobile websites, except that I included a section of gadgets below the hero image, which can help mobile users find what they are looking for faster. Then I removed those sharing icons on the mobile homepage and rearranged them under the “about me” icon.

This responsive design will enable desktop and mobile websites to be resized automatically based on different devices used. Here’s how the screen size variations look like:

High-fidelity Prototype

After 2 more rounds of usability tests, a high-fidelity prototype can now be released. All website formatting and features were updated to offer more user-friendly music ordering process flow.

And don’t forget to consider “accessibility”: alternative text, contrasting colors, keyboard-only navigation, and closed caption are all common features when doing UX design.

You can take a quick look at the below snapshot or play with the demo on Adobe XD here:

Takeaway and Personal Notes

I designed this music ordering platform for Neverlandseeker Philharmonic to create a user-friendly and refreshing user flow with an accessibility mindset. With more design iteration to display striking visual hierarchy and fine-tune features in detail, I hope to generate higher browsing and download volume for the orchestra in the long run.

Music ordering and downloading is not a fresh idea, so making a splash out of it is challenging. Most websites I’ve used or researched are alike in terms of layout and functionality. While an orchestra may offer such products on their website with artistic but limited functions, other record companies or streaming websites are pretty standard, with a lot of room to improve, I would say.

Anyhow, it’s fun to do a responsive web design. Creating a mobile website is generally cheaper and less time-consuming than designing an app from scratch. However, when comparing my two projects, I still favor the “mobile-first” approach. After all, designers have to brainstorm how to embed the most functions with the most concise style and best user experience. As an advocate for innovative thinking, I enjoy the challenge.

This article is my 2nd UX project, and I hope you can see some improvement already?

Hope you like my UX case study. If you are a fellow music fan and are doing some self-learning on UX design, too, don’t be shy to give me a shout-out below or simply drop me an email.

Before you leave, don’t forget to subscribe to my newsletter so that you won’t miss all the fun. You can find my other learning articles here. 

Last but not least, if you find this article useful, you can support me by clicking the icon below so that I can continue to create high-quality content on this website without ads.