Sessions
Collab with the world!
Introducing Sessions! The online music networking/collaboration platform! This responsive website was designed as the perfect tool specifically for musicians, to make it easy for you to connect with other musicians from around the world. Whether you're looking to collaborate on a new project or share files and ideas, our platform makes it simple for you to communicate and create the best music, together. With features like easy file sharing and messaging, you'll be able to collaborate seamlessly with other musicians, no matter where they're located. It just takes a quick and easy search to find what you’re looking for to make your song a hit!
Click here if you would like to see the prototype and use it yourself!
Overview
Background:
This project started out as an app prompt from sharpen. As soon as I saw the prompt, "create a networking app and responsive site for musicians," I knew it was something I had to create. All my life I have been a musician and it was an area I had seen a lack of digital products in. For this prompt, I created a brand with an accompanying logo and conducted several rounds of research to give me an understanding of the competition, who my target audience is and what their pain points are so that I could have an idea of where to begin when it came to designing a product.
Role:
Product Designer
Visual, Interaction and Motion Designer
User Research
Prototyping
The Problem:
Musicians don’t have an easy way to connect and collaborate with musicians around the world due to language barriers and travel/financial restrictions
Timeline:
February 2022 - March 2022
Goal:
Design an app and responsive website that allows users to easily connect with musicians all around the world and facilitates collaboration
Research
User Research:
For this project, I conducted interviews, in person and online. I also conducted Usability studies and created empathy maps.
As a musician myself I had a vague idea of the type of website I would look for but going into this project I put that aside so I could put the user first and really understand what they’re looking for. It was eye-opening because they mentioned points that I didn’t even think of and could instantly see how it could help.
Persona
Kimiko
Kimiko is a busy worker and aspiring musician who need to easily network and collaborate with other musicians because they want to learn and further a career in music
User Journey Map
Mapping out kimiko’s User journey helped me identify which areas needed more refining to help give the user a smoother and better journey within the app
Pain Points
Navigation
“I get annoyed when websites aren’t clear with their navigation”
This will help me find an easy way to be clear and be purposeful about navigation
Clarity
“It’s confusing when websites don’t explain the use of their features”
This will allow me to design intuitive and clear features
Features
“I get frustrated when I have to switch between multiple sites because one doesn’t have the tools I need”
This will help me during research and design to see what competitors are offering and design features that cover the base user needs
Low-Fidelity Designs
Paper
Rough design
When drawing the wireframes, I wanted to answer the user pain points with design. I wanted an intuitive design that was deliberate about the features and what it provided making it easy to use and navigate through
With each iteration, I starred what I wanted to keep and the final design I chose.
Design
Variations
With the screen variations, I wanted a consistent design through the sizes but one that wouldn’t take away from offered features due to lack of size.
Digital
With the digital wireframe, i kept it true to the paper wireframe including all the features i stared so i could test them out with the first usability study
Screen Size Variations
I wanted to find a way to include everything from the desktop size into the various screen sizes so I kept it simple to keep a consistent look, feel and navigational flow.
Low-Fidelity Prototype
Time for my favourite part, Prototyping! With the Low-Fidelity prototype, I kept I provided users with a look at the main user flow for this site. Because it doesn’t offer a product the user flow is a bit abstract so I just provided the basic function of my site which is to find musicians and network.
Usability Study 1
Parameters:
Study Type:
Moderated usability study
Participants:
5 Participants - 3 woman, 2 men
Location:
Remote: United States, United Kingdom, Barbados
Length
15-30 minutes
Findings
1
Users didn’t know how to incorporate the search function into their experience
2
Pages are too bland, they like the theme but would like a bit more intuitive design
3:
Buttons look too alike
High-Fidelity Designs
Iterating on Designs
When redesigning this page after the usability study I took into account the feedback received and used it to create high-fidelity mockups that display more design choices.
Before Usability Study
Home Page
After Usability Study
Home Page
One finding from the study was that users were unsure of what to type in to get the answers they wanted. So I redesigned to include specific search parameters that could also be user-specific and find the answers they’re looking for.
Before Usability Study
Network page
After Usability Study
Network page
One finding from the usability study was that buttons look too alike, so where buttons are grouped i changed the colour of one so that users could easily see that their functions were different. Another finding was that pages were too bland so i gave the impression pages were allowed to upload photos and added a picture for the network page.
Prototype
Using the feedback i received from the first usability study, i made more connections to give users multiple pathways to reach the same destination
CLICK HERE if you would like to try it out!
Screen Variation Mockups
Mobile Website
Smart Watch Browsing
Tablet Website
Accessibility & Inclusion Considerations
When designing the app, i wanted to ensure that users of various abilities and backgrounds abilities would be able to use it without issue.
With the colour scheme, i took into account people with different types of colour blindness. So i chose colours that aren't difficult to differentiate. I also made sure use colours that pass the Web Content Accessibility Guidelines (WCAG). My colour scheme has a contrast ratio of 14.99:1, which means the two main colours are light and dark enough to be able to receive on screen information easily.
I designed the site in a way that allows for easy navigation so that users that don’t have a range of mobility or require navigation through keyboard alone or other devices can move through the website easily. I also have plans to make it possible to operate the app and search functions through voice.
I used alt text and plan on implementing audio descriptive features
Conclusion & Takeaways
Lessons Learned
While designing this website and conducting research, i learned that users can really take the designs above and beyond anything you can think of. They really help you navigate the design process and takes you from wondering “Hmm will they like this” to “they told me they liked this feature and didn’t like this, let me adjust” and that puts you in a great place when launching the product
Two quotes from user feedback
“I really like the look and feel of this website. It doesn’t try to hard to look trendy and gets straight to the point.”
“I like the current features, they cover exactly what i would look for in a networking site, any thing else will be great but hopefully won’t overcomplicate the main features”
Thanks for checking out my case study for Sessions!
To check out other projects, click the button below!