BYTE Audio Figma Project - 3 Responsive Products

Project Overview

In New Media Design (NMIX4011), I worked on a project to create a faux company and design three responsive products for that company. My team and I were tasked with creating a responsive mobile website, desktop website, and an interactive app prototype.

Tools Used: Figma, Photoshop, Canva


Project Date: Spring 2025

Role: Team Lead, UI/UX Designer

View Project Files

Problem Statement

For my team’s project, I set out to design a cohesive digital experience for a fictional company that sells music production software, Byte Audio. The challenge was to design and develop three responsive products: two websites that informed users about the company and streamlined product purchasing, and an interactive app prototype that allowed users to record and edit their own audio samples.

Project Goals

Create a digital experience that’s easy to use, keeps users engaged, reinforces the brand, and immerses them in the world of music production.

✅ Enhance usability across all platforms

✅ Maintain consistent brand identity

✅ Create an immersive, enjoyable experience

Phase 1: Ideation

In the ideation phase, I created Byte Audio’s visual identity with the user experience at the forefront. I crafted every element to make users feel welcomed, inspired, and excited to engage with Byte Audio:

  • Two distinct customer personas (one for seasoned music producers, one for newcomers) guided every design decision to ensure the brand resonates across our audience spectrum. Hand-drawn cat mascot and logo that embody our playful, retro brand personality

  • Bold color palette of blues and bright red creates energy and memorability

  • Thoughtful typeface choices enhance readability and approachability

  • BYTE Audio Logo (Photoshop)

  • Brand Vision Board

  • Byte Audio Typefaces

  • BYTE Audio Pictoral Logo (Photoshop)

  • Color Palette with Description of Impact on User

  • Mascot + Logo (Procreate)

Phase 2: Low Fidelity Prototypes

With the visual foundation set, I brought Byte Audio’s ideas to life through early sketches and user-centered exploration. I began working on our low fidelity prototypes for our three products:

  • Wireframes to map user flows allowed me to quickly test different layouts and visual hierarchies, keeping usability front and center.

  • By refining navigation and structure, I ensured every interaction felt intuitive and purposeful.

  • These low-fidelity explorations laid the groundwork for a seamless transition into high-fidelity design.

Mobile Website Digital Wireframes

Phase 3: High Fidelity Prototypes

In this phase, I evolved Byte Audio from sketches into polished, interactive designs that captured our brand’s retro energy and user-first vision.

I created a fully responsive prototype, including a desktop website, mobile website, and app to ensure a seamless experience across all devices.

  • Interactive components brought the brand’s playfulness to life while maintaining consistency in color, typography, and tone.

  • Each screen was designed with accessibility and clarity in mind, translating our low-fidelity concepts into a cohesive, engaging user experience.

  • Desktop Responsive Mockup

  • App Prototype Mockup

  • Mobile Responsive Mockup

Reflection

 💡 What Worked

  • The app’s interface and navigation felt intuitive, allowing users to explore features without confusion or friction.

  • The responsive design translated seamlessly across devices, maintaining usability and visual consistency.

  • I loved that this project gave me the chance to combine branding, UX, and responsive design across three different platforms.

  • I strengthened my skills in Figma, building desktop, mobile, and app prototypes that maintained consistency. I also strengthened my understanding of responsive layouts and scalable design systems using Figma.

🌟 Key Takeaways

This project strengthened my ability to align visual design, user flow, and functionality within a cohesive brand experience. It also refined my skills in responsive design and UX strategy, which I’ll am excited to continue building on in future projects!

🔧 What I’d Improve

  • In the future I’d strengthen the hero section with a short product demo or testimonial carousel to better communicate value and capture attention faster.

  • Add “Join the Community” and “Upload Your Track” features to boost engagement and retention.

  • I would integrate a sign-in system with saved downloads, update alerts, and cloud syncing for a more personalized experience.