Audio Device API
Vokalen Connect
Branding • Personas • Wireframes • User Interface • User Experience • Prototyping
Role: Product Designer at Sonictek Inc.
Project Overview
The goal of the project is to create an Audio Device App seamlessly connects to our audio products, offering intuitive controls and personalized sound experiences. With its user-friendly interface and diverse functionalities, it's the perfect companion for managing your music, adjusting settings, and ensuring a hassle-free audio experience.
My Contributions
As the project's lead designer, I played a pivotal role in crafting the brand identity, defining it through comprehensive flows, wireframes, and UI designs. From conceptualization to execution, I created the brand's aesthetic essence and conceptualized the logo, ensuring a cohesive and impactful visual representation across all design elements.
Starting from the beginning. Who, what and why.
Initially, I strategizing and delineating the brand alongside its intended audience. As it concerned start-up company, my first step involved outlining brand characteristics and formulating a brand statement by understanding the products.
Background of Vokalen is an emerging international brand with its roots in Canadian design. Our focus revolves around catering to the day-to-day needs of the younger generation, offering stylish and affordable audio devices. Designed with a contemporary flair, Vokalen embodies a blend of functionality, trendiness, and accessibility, making it the go-to choice for those seeking fashion-forward yet budget-friendly options in their everyday lives.
Product Overview
Over-Ear Headphones
In-Ear TWS Earbuds
Sports TWS Earbuds
Affinity Mapping
After extensive discussion with the team, I mapped out an affinity map on several user aspects including: Listening preferences for example Equalizer, User testing expectations, app integration and connectivity, and community support such as FAQ. These are important for the initial research for the Vokalen APP
I conducted comparisons with both major brands and smaller competitors. As a result, we streamlined certain features that we deemed excessive.
Competitive Analysis
Exploring the competitive analysis is crucial in our quest to develop a superior audio application. By delving into the landscape of similar products, we gain valuable insights into the strengths and weaknesses of our competitors.
Persona
"Vokalen, the premier headphone brand, caters to the tech-savvy generation who prioritize exceptional sound quality. Designed for young individuals seeking an immersive audio experience, Vokalen merges cutting-edge technology with sleek aesthetics, offering a range of headphones that resonate with those who value great sound performance. Embrace the beat of innovation and indulge in the ultimate auditory journey with Vokalen."
Tech-Savvy Alex’s Journey Map with Vokalen Headphones application
Creating User Flows & Wireframes
Following that, I advanced by crafting a User-Flow Chart illustrating the app's organizational structure, engaging in discussions with engineers to consider the addition or removal of specific flows.
Onboarding
During the onboarding process, our aim was to simplify the connect to device setup, enabling users to connect to device with as few steps as possible.
Moving from flow charts to wireframing involves diving into detailed design, ensuring every screen prioritizes user-friendly navigation. Gestures and buttons are strategically positioned for effortless interaction. Troubleshoot is necessary.
Wireframing
I have divided the user flow into four different segments. This enables me to conduct user testing more efficiently. I also created specific scenarios for when users click on a button, but unfortunately, the desired outcome hasn't been achieved. So, we need to troubleshoot the issue and revert the action back to its previous state before trying again.
I employed the initial "Connect to Device" user flow to depict various scenarios through wireframing.
Usability Testing
I explored the usability of the "Connect to Device" user flow by gathering a group of users to test out various scenarios. Through this process, we engage in back-and-forth troubleshooting to identify and address any issues that arise. We were able to find multiple errors, these errors may cause future user bugs.
Prompt: When I attempt to return to the previous page from the "Add device error" page, should I start over from the "Add your first device" page?
Visual Exploration
I explored various color combinations and incorporated glassmorphism into secondary pages and buttons to enhance the app's aesthetics and user experience. I created animations for loading and update screens.
Logo Exploration
I experimented with diverse logo designs, contemplating a brand name that resonates with top-tier sound quality. This involved selecting the ideal font and testing multiple logo variations to achieve the perfect match for the brand's identity.
Final Logo Design
After extensive team discussions, we've selected a sleek final logo that best embodies our brand identity. We experimented with various color combinations to ensure the logo resonates perfectly with our chosen font, creating a fitting representation for our products.
Final Prototype
I collaborated closely with the engineering team and developers, and devised the final API UI design. My primary focus was ensuring that it encompassed all the essential features of the app.
