Mobile app that connects musicians and instrument owners in a dynamic marketplace, inspired by the community-driven approach of 'Airbnb'.
Piano Spotter
UX/UI Designer & Researcher
Problem
The initial design, skillfully crafted by a previous team, unfortunately, missed the crucial step of user testing. This omission raised concerns for the client, who wanted to ensure a seamlessly user-friendly product for their clientele before launch. Subsequent user testing revealed additional areas needing refinement, highlighting the importance of this phase.
Solution
We developed a prototype based on the initial design and conducted unmoderated user tests to gather valuable insights for improving the application. The findings helped us identify specific areas for enhancement, such as the placement of call-to-action (CTA) buttons, adjustments to font sizes, and changes in verbiage. We then strategically redesigned elements of the application based on these insights.
The initial design, skillfully crafted by a previous team, unfortunately, missed the crucial step of user testing. This omission raised concerns for the client, who wanted to ensure a seamlessly user-friendly product for their clientele before launch. Subsequent user testing revealed additional areas needing refinement, highlighting the importance of this phase.
The initial design, skillfully crafted by a previous team, unfortunately, missed the crucial step of user testing. This omission raised concerns for the client, who wanted to ensure a seamlessly user-friendly product for their clientele before launch. Subsequent user testing revealed additional areas needing refinement, highlighting the importance of this phase.
Solution
Piano Spotter connects musicians, particularly pianists, with music space and equipment proprietors, facilitating discovery and collaboration. With a social media-like feed for user interaction, the app fosters a vibrant community. Under my leadership, our team created a prototype for user testing, addressing and resolving design issues based on user feedback.
overview
Discovery
prototype
user-testing
To kick off the project, we started by importing the original Figma design into a working file containing high-fidelity mockups, components, and a detailed style guide. During our initial team meeting, we reviewed these assets and mapped out a project plan. We decided on Figma for prototyping and Lookback.io for hosting unmoderated user tests. By choosing unmoderated testing, we aimed to gather genuine feedback on the app’s usability and ensure it delivered an intuitive and user-friendly experience.
With the prototype finalized, I initiated usability testing by hosting unmoderated user tests on Lookback.io. Participants were asked to complete five predetermined tasks during the testing session.
You are looking to create a new host account with Piano Spotter but do not want to verify your identity at this time.
You changed your mind and would like to verify your identity now.
You want to create or edit a listing as a host on Piano Spotter.
You decided to make a few changes to your personal information. Save your changes once you are done.
You are eager to discover what is happening near you. Explore your local area to find out what’s happening around you.
Redesign
Our team then delved into creating fresh high-fidelity mockups for the impacted screens. Our priority was maintaining the original design's essence while proactively tackling the issues uncovered during testing.
Changes implemented include:
Our team then delved into creating fresh high-fidelity mockups for the impacted screens. Our priority was maintaining the original design's essence while proactively tackling the issues uncovered during testing.
Changes implemented include:
I integrated a location access modal into the account creation process for renters and listed owners. If users do not authorize access at this stage, they will encounter the same prompt when accessing the feed within the application.
To enhance the prominence of the CTAs on the account information screen, I increased the font size for the edit CTA from 16 to 18. Additionally, I updated the edit icon for the profile photo to align with the overall design.
To enhance the prominence of the CTAs on the account information screen, I increased the font size for the edit CTA from 16 to 18. Additionally, I updated the edit icon for the profile photo to align with the overall design.
To enhance the prominence of the CTAs on the account information screen, I increased the font size for the edit CTA from 16 to 18. Additionally, I updated the edit icon for the profile photo to align with the overall design.
I added our redesigned screens to the developer handoff for Piano Spotter, ensuring a smooth transition. To maintain consistency, I used the same Figma plugins as the previous team—Dimensions for measurements and Annotate It for annotations. This approach kept communication clear and preserved the design system, helping deliver a polished final product.
Reflection
Prototyping and redesigning Piano Spotter was an enlightening experience, showcasing the synergy between prototyping, user testing, and iteration. I played a key role in designing and developing the prototype, a phase I especially enjoyed. User feedback drove our design forward, reinforcing the importance of user-centricity. Through collaboration and peer reviews, we refined the product, ensuring the best possible version for the client.
I used Figma to build a high-fidelity prototype, leveraging the detailed screens from phase one. This strategic move aimed to streamline user navigation for upcoming testing. By translating screens into an interactive prototype, my goal was to enable users to seamlessly explore the app's functionalities and offer valuable feedback. During the prototype construction, I identified potential usability issues, such as crucial CTA buttons in hard-to-reach areas, hindering accessibility and visibility.
The CTA buttons were initially positioned at the bottom of the screens with a spacing of 24px. I adjusted this to 40px below the screen content to enhance visibility and alignment.
I added our redesigned screens to the developer handoff for Piano Spotter, ensuring a smooth transition. To maintain consistency, I used the same Figma plugins as the previous team—Dimensions for measurements and Annotate It for annotations. This approach kept communication clear and preserved the design system, helping deliver a polished final product.
Problem
We developed a prototype based on the initial design and conducted unmoderated user tests to gather valuable insights for improving the application. The findings helped us identify specific areas for enhancement, such as the placement of call-to-action (CTA) buttons, adjustments to font sizes, and changes in verbiage. We then strategically redesigned elements of the application based on these insights.
I integrated a location access modal into the account creation process for renters and listed owners. If users do not authorize access at this stage, they will encounter the same prompt when accessing the feed within the application.
UX/UI Designer & Researcher
Leveraging the detailed screens from phase one. This strategic move aimed to streamline user navigation for upcoming testing. By translating screens into an interactive prototype, my goal was to enable users to seamlessly explore the app's functionalities and offer valuable feedback. During the prototype construction, I identified potential usability issues, such as crucial CTA buttons in hard-to-reach areas, hindering accessibility and visibility.
Leveraging the detailed screens from phase one. This strategic move aimed to streamline user navigation for upcoming testing. By translating screens into an interactive prototype, my goal was to enable users to seamlessly explore the app's functionalities and offer valuable feedback. During the prototype construction, I identified potential usability issues, such as crucial CTA buttons in hard-to-reach areas, hindering accessibility and visibility.
Leveraging the detailed screens from phase one. This strategic move aimed to streamline user navigation for upcoming testing. By translating screens into an interactive prototype, my goal was to enable users to seamlessly explore the app's functionalities and offer valuable feedback. During the prototype construction, I identified potential usability issues, such as crucial CTA buttons in hard-to-reach areas, hindering accessibility and visibility.
Leveraging the detailed screens from phase one. This strategic move aimed to streamline user navigation for upcoming testing. By translating screens into an interactive prototype, my goal was to enable users to seamlessly explore the app's functionalities and offer valuable feedback. During the prototype construction, I identified potential usability issues, such as crucial CTA buttons in hard-to-reach areas, hindering accessibility and visibility.
To enhance the prominence of the CTAs on the account information screen, I increased the font size for the edit CTA from 16 to 18. Additionally, I updated the edit icon for the profile photo to align with the overall design.
