Aarón Hernández C.
Product Designer
Based in Costa Rica
costa-rica-flag
VIBRATO STUDIO CASE STUDY
Creative Direction: Rebranding, UX Design, & Web Development
Discover how Vibrato Studio's brand identity and digital presence was transformed through innovative design and strategic storytelling.

This case study highlights my multifaceted role in crafting a unique visual identity, developing an engaging website, and implementing interactive elements that truly capture Vibrato's creative essence.
Read the Case Study​
Scroll down & Discover more
VIBRATO STUDIO CASE STUDY
The Challenge
Vibrato Studio took the initiative to reimagine their brand identity and digital presence, aiming to accurately reflect their innovative approach and creative capabilities.

This project encompassed both rebranding and website development, requiring a holistic approach to design and user experience.

The multifaceted challenge included:

• Developing a new, conceptually rich brand identity
• Creating a cohesive visual language and design system
• Designing and building an engaging, interactive website
• Implementing UX research to enhance user engagement.

Crafting a storytelling approach to effectively communicate Vibrato's essence Integrating dynamic elements to showcase Vibrato's creative expertise
Scroll down & Discover more
VIBRATO STUDIO CASE STUDY
My Role & Support
In this rebranding and website development project for Vibrato Studio, I took on multiple key roles. As the Creative Director, I led the overall strategy and vision for both the brand redesign and website creation. I was responsible for the UX/UI design, crafting user-centric wireframes, prototypes, and high-fidelity mockups.

While another designer provided support in Webflow implementation, I focused on the concept, UX, and creation of high-resolution graphics, renders, and animations to achieve the high-end look of Vibrato Studio's brand.

Additionally, I oversaw the web building process, ensuring the seamless implementation of designs and functionalities. Throughout the project, I facilitated ideation sessions, conducted user testing, and collaborated closely with the team to bring Vibrato's new identity to life across all digital touchpoints.
• Creative Direction and Strategy

• UX/UI Design

• Interaction Design

• Web Development

• Brand Identity Design

• 3d Animation & 2D Motion Graphics
Scroll down & Discover more
VIBRATO STUDIO CASE STUDY
The Method
About the project:
Utilizing the Double Diamond methodology, this project aimed to enhance client interactions through AI automation for Agentz AI. It involved defining a credible brand, creating an automated onboarding process, and understanding six market profiles to develop custom AI Assistant packages tailored to client needs.

How to create a website that explains who we are and reflects the company’s creative potential.
Type of work:
Double Diamond Methodology
Problem: Identifying pain points in client interactions across sectors such as Sales Automation, Ecommerce, Digital Marketing, Real Estate, Finance & Accounting, and Customer Experience.


Planning: Synthesizing insights from research, interviews, and workshops to define core challenges and develop a strategic roadmap.

Solution: Implementing AI-driven solutions for improved client engagement, including a digital brand identity, interactive materials, a responsive website, and an automated onboarding process.
Deliverables:
• Brand and Design System
• Client Profile Study
• Sales Process Study & Presentations
• Responsive Website
• Client Onboarding Process
• Explainer Videos
• Social Media Content

Discover

Gather insights about Vibrato's market position, brand perception, and industry trends.

• Brand audit
• Perception analysis
• Competitor website and brand analysis
• Industry design trends research

Define

Analyze findings to define Vibrato's brand strategy and website requirements.

• Brand positioning
• Web design best practices
• User flow and experience mapping
• Content and asset inventory

Design

Create brand elements and craft the web experience for Vibrato's new identity.

• Ideation workshops
• Brand identity development (logo, color palette, typography)
• Website wireframing and UI design
• Digital asset creation (icons, illustrations, animations, rendering, motion graphics)
• Interactive prototype development

Validate

Evaluate the new brand and website design with stakeholders and potential users.

• Internal brand presentation and feedback
• Website usability testing
• Design critique and refinement
• Iteration based on collected insights

Scroll down & Discover more
VIBRATO STUDIO CASE STUDY
Strategy
Vibrato Studio needed a cohesive digital strategy to effectively communicate their innovative approach and creative capabilities. The project involved comprehensive rebranding and website development to ensure the brand identity and digital presence aligned perfectly with their vision.
Key Components:

Responsive Website:
 Developed a user-friendly, responsive website to showcase Vibrato’s portfolio and services across various devices.

Brand Identity:
 Created a unique visual identity, including logo design and color schemes, to reflect the essence of Vibrato.

Interactive Elements:
 Implemented interactive graphics and animations to engage users and highlight Vibrato’s creative potential.


Content Creation:
 Produced compelling digital assets, such as explainer videos and social media content, to enhance brand visibility and communication.

Style Guide:
 To ensure consistency and streamline the design process, a comprehensive style guide was developed, standardizing typography, color schemes, and visual identity. This enabled seamless collaboration and high-quality outputs across all deliverables.
Workshops & UX/UI with Figma
The team utilized Figma extensively for the Vibrato Studio project, employing its powerful features for prototyping, wireframing, and fostering creative discussions. Figma's collaborative environment allowed for real-time feedback and seamless iteration, ensuring that every design element was meticulously refined to meet Vibrato's innovative standards. This collaborative approach enabled the team to rapidly prototype and test ideas, ensuring a user-centric design process.
Throughout the project, Figma served as the central hub for all UX/UI activities, streamlining the design workflow and enhancing team productivity. The platform's robust prototyping capabilities allowed the team to create interactive mockups that simulated real-world user interactions, which were then reviewed and refined through collaborative workshops. This iterative process ensured that the final designs were not only visually appealing but also highly functional and aligned with Vibrato Studio's brand identity.
VIBRATO STUDIO CASE STUDY
Branding
812d30cb866ec8d9642d634e3c6d134fc042abc2.png
For the project, I supported crafting a cohesive design system. We standardized elements such as typography, colors, icons, and backgrounds, enabling the team to maintain a consistent and cohesive look across all deliverables.

The guide was crucial in ensuring uniformity and high-quality output, even within the tight deadline.
I Figma to design the interactive components, following an atomic design approach. We focused on creating basic components (atoms) and patterns (molecules), resulting in a versatile set of elements for designing healthcare digital products.

Throughout the creative process, prototyped elements to test micro-interactions, gather insights, and validate design decisions efficiently with team reviews.
Our solution was to record a person saying Vibrato and then took the recording wave graph, synthesized it, stylized it and finally brought it to be part of our brand identity.

This was how, after all, we managed to visually incorporate the sound and the whole concept of our name in to our new logo.
We took the sound wave graphic of the word Vibrato and then stylised it to get the starting point of our logo design
We convert the line graph into an infinite loop, this way, our logo would say Vibrato infinite number of times.
We designed the new Vibrato logo in 3D modeling software, so we can have it in any view we want.
Although our logo is a dynamic figure, we designed it to have a front view that looks like a "V" to use it as the most representative image of our visual identity
AGENTZ AI CASE STUDY
Responsive Website
In developing Agentz AI's responsive website, I employed a comprehensive, user-centered approach:

• Conducted in-depth user flow analysis to optimize navigation and user experience

• Created a detailed sitemap to structure the website's content and hierarchy

• Developed low-fidelity sketches to explore various design patterns and layouts

• Transformed initial concepts into high-fidelity wireframes using the established style guide

• Crafted interactive prototypes to test and refine user interactions
The design process prioritized user experience and responsiveness:

• Incorporated carefully selected interactive elements to enhance engagement

• Ensured full responsiveness for optimal viewing across various devices and screen sizes

• Conducted multiple iterations and refinements to balance aesthetics and functionality

• Collaborated closely with developers to ensure accurate implementation of design elements

• Performed with the team, usability testing to validate design decisions and make necessary adjustments
Sitemap
Wireframes built using Figma
Wireframes - mobile prototyping
The Outcome
Implementation and Client Satisfaction
Agentz AI successfully implemented the initial phase of their digital presence on WordPress, addressing the immediate needs of their startup.

The client appreciated the comprehensive support provided, which helped them understand the sales process and the potential available AI stack for web application integrations and the different six market sectors of Agentz AI for use in automated workflows.

This understanding bridged the gap between the programmers' technical perspective and the product packaging for custom clients with specific needs.
Design and Development
Digital Brand Identity
 Developed a cohesive brand identity reflecting Agentz AI's values and mission, including a package of assets, editables, values and mission documentation, and service profile research for defining the brand and product characteristics and its market.

Comprehensive Design System
Created a design system to ensure consistency across all digital assets, also delivered material for presentations, editable dashboard for branding purposes, and assets for social media profiles.

Responsive Website Development
Designed and developed a responsive website using WordPress to cater to various devices, featuring embedded pitch, explainer, onboarding widgets, and calendar widgets. Conducted UX analysis of the landing page process and onboarding process.
Client Interaction & Support
UX Study and User Personas
Conducted UX studies that included sessions for profiling customers and scenarios on how to make product packaging, and training for editing these documents and pricing with branded assets for sales personnel.

Automated Onboarding Process
Designed an automated onboarding process to streamline client integration. The UX study created steps for processing the information that clients provide in the onboarding form, enabling the team to use ChatGPT and prompting for making product packs, analyzing different product configurations, etc.

Interactive Materials
Produced interactive materials, including explainer videos and social media content, to improve client engagement. Also provided templates for guiding campaigns in further productions of the startup.
Previous Case Study
Next Case Study
Explore All My Case Studies
Check All my works in this section
Dive into my case studies to see how I’ve helped brands create custom solutions, enhance user experiences, and achieve their strategic goals.
Open All Case Studies
A Glimpse Into the Design Process I use.
Explore my approach to creating impactful, user-focused designs through UX research, innovative methodologies, and design thinking principles.
Watch the video
Role:

Design Thinking

Design Strategy

Branding Identity

Web Design

Web Development

Problem-Solving

Customer Centered

Interaction Design

Motion Design

Design Thinking

Design Strategy

Branding Identity

Web Design

Web Development

Problem-Solving

Customer Centered

Interaction Design

Motion Design

Design Thinking

Design Strategy

Branding Identity

Web Design

Web Development

Problem-Solving

Customer Centered

Aarón Hernández C.
Product Designer
UX | User Research | Visual Design
Home
|
Case Studies
|
Contact
|
Resume
Behance
LinkedIn
Back to the top of this page
Built in WordPress by Aarón Hernández Cubero. 2024.