Redesigning and rebranding Musicorp's user interface to improve user experience
This case study is about how I created a new brand identity for musical instrument retailer Musicorp to enhance their website's user interface, increase brand recognition and user retention and improve their user experience.
Role
UX & UI Designer
Industry
Music and Retail
Duration
Stack
Figma, Adobe Illustrator, Jitter
Tasks
User Stories, User Flows, Wireframes, Mood-boards, Mockups, UI Prototyping, Animation and Gestures, Style Guidelines
The who, what, when, where and why of it all
Who
Musicians of all levels who are looking to rent musical instruments and equipment on cost-effective, short-term leases.
What
A user-friendly, responsive web app containing a database of available musical instruments/equipment available to rent with comprehensive information on each listing.
When
Musicians will use this tool when conducting instrument searches and making decisions about what kind of instrument or equipment they want to play/rent.
Where
Musicians will use this tool at home or on the go. Users can search for instruments anywhere, as long as they have a device with internet access.
Why
Musicians need to access reliable, uncomplicated information about the potential instruments they want to play. Musicians need to get a feel for an instrument by viewing comprehensive information about the item and then playing it for a short-term period before investing in an outright purchase.
Identifying necessary UX and UI improvements from the existing website
To begin this project I analysed the existing Musicorp website to identify areas where the UX and the UI could be improved. The performance of the necessary functions of the existing site were passable, however due to a lack of brand identity and intuitive UI the site’s memorability, discoverability and user enjoyment was identified as the focus for improvement.
Next I created user stories and user flows to better understand the users needs and motivations of Musicorp’s users and to address any existing pain points.
User stories help empathise with the needs and motivations of the users
Search and filter
As a user, I want to be able to search and filter instruments, so that I can find good matches based on my needs.
Save favourites
As a user, I want to be able to save or mark instruments I am interested in, so that I can easily revisit them.
Information
As a user, I want access to as much written and visual information as possible about instruments I’m interested in, so that I can make an informed decision.
Rental application
As a user, I want a rental application process that is quick and simple, so that I can easily rent my desired instrument.
Account details
As a user, I want to access my account that contains all of my rental criteria, so that I can make changes to my rental terms.
Sketching user flows to visualise the achievement of user goals
Based on the user stories I built initial user flows to better understand and visualise what screens needed to be kept or amalgamated for users to achieve their goals. To save time I prefer to sketch on paper as this keeps my design process agile during this early ideation phase where there can be many iterations. For a more complicated build I would go on to illustrate user flows digitally.
Low and mid-fidelity wireframes to iteratively design elements for main functions
From the user flows I was then able to sketch out low-fi wireframes to get an understanding of what elements needed to be kept, removed or redesigned on each screen for users to complete the main functions. A challenge at this stage was balancing the simplification of the screens with the need to provide the appropriate elements for complete user comprehension. Starting with low fidelity paper wireframes enabled me to focus solely on the most important features. I was then able to increase the fidelity to include more detailed UI elements.
The importance of layout, spacing and grid systems
When designing the mid-fidelity wireframes I ensured that all my designs adhered to a layout, spacing and grid system. This is important when designing for different breakpoints later on. I also take a mobile-first approach when designing for different screen sizes as this too makes it easier to implement responsive design when it’s time to scale up.
Designing for different breakpoints using a mobile-first approach
Responsive websites are crucial for businesses looking to create a successful online presence. So designing for different screen sizes and devices is a must to enhance the user experience. I designed for tablet and laptop breakpoints along with the mobile screens so that scaling up for users accessing the site on different devices would be possible.
Bringing the designs to life with a new brand identity
I created several mood boards to find inspiration, gather ideas and set the tone of the project’s new brand identity. I was inspired by the Bauhaus design movement as it evokes action, rhythm and musicality.
Other more eclectic and playful mood boards were designed focusing on students, young people, and beginner musicians.
However this technical, passionate, thrilling direction encapsulated a larger target market: slightly maturer musicians, who can afford to rent the more expensive products, who perhaps are pursuing a career in music and want the best quality instruments and audio equipment.
This identity had a cooler, more professional vibe, which will of course appeal to more novice musicians too as many are starting out with the hopes of becoming as good as their music idols.
The more sleek, professional look also gives users a sense of security and trustworthiness, reassuring them that their details will be safe, their lease contracts upheld, customer service prompt and professional and the products of the highest quality.
Responsive high fidelity designs for different devices
Creating mockups and prototypes
Defining the brand identity
I defined the look and feel of the website through colours, typography, illustrations and photography based on a new brand identity that would better capture the attention and memory of Musicorp’s users.
Writing website copy
I established a tone of voice to inspire users, including memorable headings and informative texts.
Refining design elements
I created an icon set, added and refined all necessary UI elements such as cards, progress indicators, filters, text fields, search fields etc according to universal UI patterns.
Creating an interactive prototype with animations
I designed animations and defined interactions and gestures to make the mobile website engaging for users. I then built an interactive prototype to bring my designs to life.
Watch a quick application walkthrough:
Retrospective with some next steps, final thoughts and challenges
Next steps
If this were a real world project I’d be excited for the next stages where I’d get a chance to conduct rounds of usability testing to validate my design decisions.
I’d then focus on iterating on the website based on user feedback, solving any pain points and improving on both the UX and UI elements of the designs.
I’d spend more time designing exciting gestures and interactions for the product, in order to bring more delight to users. I’d also expand the functionalities of the desktop and tablet designs to then eventually assist in a smooth handover to developers.
Thoughts and challenges
Like with any project, I experienced a number of challenges with this redesign. Due to the pace of the program, there was not time for a thorough UX research phase which I think is integral to designing a user-centric product. There was also no time to test any of my designs on users which I think would have been very beneficial to improving my iterations.
I had to make do with limited resources, for example, having access to only the free versions of design and imaging services, which have reduced capabilities. I look forward to working in an environment with a budget for these things.
There was also a steep learning curve in a very short time frame when learning how to use different design softwares. I am keen to spend more time mastering Figma, especially when it comes to prototyping. I’m particularly interested in animation, interactions and gestures and would love to have the chance to improve my skills here.
I would have also appreciated more opportunities to collaborate with other UX/UI designers on the project, as I love to get feedback on how to improve my designs by those with more experience or different points of view.
