S o u n d C h k .
desktop website
*Created in Sketch
Overview
SOUND CHK. is a desktop website with an intuitive interface whose goal is to streamline the way performing artists and venues connect and book shows.
TEAM: 2 designers & 4 developers
TIME: 3 week sprint
ROLE: UXUI Designer
*Created in Sketch & Adobe XD
Global nav transition: transparent to solid.
*Created in Keynote
The Process
Immerse yourself in information. Collect data and inspiration. Learn what the user needs.
*Created in Sketch
User Survey
Surveys are an effective way to gain insight on your target user. They're cheap, simple to conduct, and most importantly during the COVID-19 pandemic, they allow information to be gathered remotely.
While working on SOUND CHK. the user survey couldn't be more valuable. We learned exactly what our users struggled with from the performing artists perspective, as well as the host venue. This meant we could determine our user's pain points, and begin hypothesizing on how to solve these issues.
The biggest concern that we discovered was that there was a difficulty in communication from both sides. Our survey also allowed participants to write in specific issues and we were able to use these responses as reference for features we wanted to add.
Hone in on how to best serve the user. Reflect on their journey.
Personas
The persona allows us to put ourselves into the mind of our user and make decisions based on how they would behave, and interact with out site.
*created in Sketch
*Session conducted in Miro
Journey Mapping
To best determine how a user will interact with, and maintain loyalty to, SOUND CHK we conducted a user journey workshop. From here we were able to create a list of feature ideas.
The user journey, coupled with the survey we conducted, allowed the team to gain a clearer understanding of what our users needed and wanted from us and SOUND CHK.
MVP
After going over our features list, we needed to determine the core of the site, so we conducted an MVP session. This allowed us to narrow our focus, to ensure we make the best possible product in our allotted time frame.
It was here that we made our final decision on the features that were most needed and desired for our site, making sure to consistently check our survey results to be certain we were staying true to the user’s needs.
*Session conducted in Miro
Sitemap
With the features of the SOUND CHK determined, the next step was to create the site map. This is used to sort out which pages and templates go where, and to give a broad representation of how pages flow together.
*Made in Figma
We wanted our site to have a simple structure because our main features are: profiles, messaging, and category pages. We also wanted to allow the opportunity to add new features in the future, and maintaining a simple and intuitive site was key.
Bring concepts to life. Work with others to mark a clear path. Let creativity flow.
Screen Sketches
Screen sketches are a great way to start designing. Being able to roughly put thoughts down onto paper is helpful in quickly getting ideas out of my head and into the real world. It’s also useful in getting non-designers involved in the design process. Oftentimes non-designers have great visions and letting them show you with an easy screen sketch is invaluable.
*Made in Sketch
Wireframes
During the wireframe is where we digitized and cleaned up the layout of the screen sketches. Here we really looked back at our audit and inspirations to form a site with a solid structure. Working in white and shades of gray helps keep us focused on purely the layout and not become distracted with the imagery, yet.
Here is also where we determined which features were most feasible to build out in our time frame, and really narrowed down which ones we needed.
During this task we were able to easily structure out the onboarding process and create varying paths based on user responses.
Our onboarding wizard was an incredibly important feature that needed to be addressed and added to SOUND CHK. There is a lot of information necessary for users to input so we chose to break it down into separate pages that displayed the information in a conversational tone.
Moodboard
Here is where I have the most fun with any project: the moodboard. During this process we get to nail down the tone and the branding of a site. While not a DSM, the moodboard is the predecessor and gives the team a direction to follow while working on mockups.
We chose to keep it minimal with a few pops of color, as SOUNC CHK. is intended for artists and venues to add their photography and other features to tell their story and express who they are, so keeping a simple palette was key.
The rich red as the primary CTA is energizing and exciting to represent how people feel when booking a show. While the dark charcoal mimics the moodiness and lighting when one is at a venue waiting for a show to start.
*Made in Figma
Mockups
The mockup is where the real fun happens (at least for me) you get to see your creation start coming to life. Here you apply all the color and flair that you collected for the moodboard and really begin seeing the work come together.
While applying the moodboard to the mockups we did make adjustments to layout even before user testing, as the dark background required more breathing room for certain modules to not feel cramped.
*Made in Figma
*Made in Figma
*Made in Figma
*Made in Figma
Test with the target audience. Receive feedback. Iterate. Rinse & Repeat.
Prototype
Through prototyping we are able to undergo the flow the user experiences. We get to test our own product to resolve potential issues before spending lots of time and money on a final product.
Our flow has to accommodate the perspective of different users, so as an initial prototype we chose to present it from the perspective of an artist creating her account and visiting a venue’s profile. We can then take this prototype and apply it to other user perspectives so their function reflects accordingly on the live site.
IXD
Utilizing interaction design helps provide visual cues to the user as they navigate the site. Not only does IXD provide confirmation that an action took place, but it also helps push a brand’s personality and tone.
*Prototyped in Figma
*Prototyped in Figma
Here we are demonstrating how the tab bar slides to indicate which section a user is on, as well as, open up the rider PDF as an overlay so the user isn't navigated away from page.
We also wanted to demonstrate the carousel functionality, showing that it's not only useful for images, but also long lists of performances in a calendar. The user is also able to see the flyer for any performance the artist is scheduled to be at.
*Prototyped in Figma
User Testing
Now that we have a site that feels real, we need to test with users. Here is where we receive feedback: we find out what works, what doesn't, what makes sense, and what is downright confusing. We make changes based on continuous feedback, and test again. And make changes, and test again. Until we have a product that is good enough to launch, but still knowing, there may be more possible changes.
*Made in Figma
*Made in Figma
Add finishing touches. Compile all files and resources. Ready yourself for the next sprint.
Hand Off
Now it's time to get ready for handing off the finished mockups to the web developers. We had the convenience of using Figma for this project, so providing a view only version of the product allowed developers to inspect and view the CSS of each element, as well as access the prototype view so they can experience the exact vision we had. After giving a quick lesson of Figma to the developers, they were good to go!
NEXT STEPS
At this point, we are waiting for our web developers to complete building what we handed off for SOUND CHK. Hopefully by the next time you visit, there will be an update. :)
Even so, we have plans to add a "build your own," rider feature, where artists can customize a stage plot based on a venue's stage layout.
Have questions, feedback, or want to reach out? Feel free to get a hold of me at my contact page!
If you'd like to know more about me, check out my resume.
