Cultural Commerce Through Collaborative UX & Brand Strategy
Dive into how Hilvana was enhanced thorough UX research, strategic branding, and innovative product design. This case study details my involvement in crafting a strong brand identity and developing a dynamic digital platform for Hilvana's creative community.
Through in-depth research and workshop facilitation, we created a robust design system ensuring brand consistency and customized solutions tailored to the unique needs of creative entrepreneurs.
Hilvana, initiated by the Cultural Center of Spain in Costa Rica, aimed to create a digital marketplace to promote cultural commerce, particularly supporting creative entrepreneurs impacted by the COVID-19 pandemic.
My role in this project was multifaceted, involving UX research, providing visual design support, and overseeing development processes. A significant challenge was designing a user-friendly website that not only showcases products and services but also highlights the stories and human value behind each cultural enterprise.
The platform facilitates direct contact between entrepreneurs and consumers, maintaining a human connection that creates a unique, conscious, and purposeful experience.
Vision and strategy
Aligned with Hilvana’s goals and values
Formulated comprehensive branding, user engagement, and visual communication strategies
Applied design thinking methodologies
UX/UI Design / Generalist
Conducted user research and created personas
Designed wireframes, prototypes, and high-fidelity mockups
Emphasized user-centered design principles
Applied extensive UX skills from research to testing
Project Management Support
Collaborated with project managers
Supported stakeholders
Ensured close follow-up to meet deadlines and milestones
Visual & Interface Design
Crafted cohesive visual identity, including logos, color schemes, and typography
Developed a style guide for consistency
Created narratives through motion graphics and explainer videos
Web Design & Development
Designed and developed a responsive website with automated features
Ensured website usability and brand alignment
Integrated features for client booking and onboarding
Motion Graphics Manifesto
Produced high-quality motion graphics and animated shorts
Refined storytelling through visual media
Enhanced the brand’s digital presence through engaging narratives
Gather insights about the market and the needs of our creative community.
• User research
• Interviews
• Surveys
• Competitors analysis
Define
Analyze findings to define user needs, goals, and requirements.
• User personas
• Affinity map
• Information architecture
Design
Create ways to visualize the information and craft the user experience.
• Ideation workshop
• Wireframes
• Prototype
Validate
Engage users with our product to validate the results and refine the design.
• User research
• User testing
• Feedback analysis
• Iteration based on user feedback
About the project:
Problem
• Limited visibility for cultural entrepreneurs in the digital marketplace.
• Difficulty in showcasing the human value and stories behind creative products and services.
• Lack of a centralized platform for connecting conscious consumers with authentic cultural goods.
• Challenges in promoting sustainable and ethical cultural commerce.
Planning
• Conduct in-depth interviews with cultural entrepreneurs to understand their needs and challenges.
• Organize workshops with conscious consumers to gather insights on their preferences and pain points.
• Define core challenges based on research findings.
• Create a strategic roadmap for platform development and marketing
Solution
• Develop a cohesive digital brand identity reflecting the values of cultural entrepreneurship.
• Build a user-friendly, mobile-responsive platform for showcasing cultural products.
• Implement an automated onboarding process for both entrepreneurs and consumers.
• Centralize all media and platforms to create comprehensive personal profiles with full links and contact information for entrepreneurs.
Deliverables:
• Brand and Design System
• Client Profile Study
• Sales Process Study & Presentations
• Responsive Website
• Client Onboarding Process
• Explainer Videos
• Social Media Content
We collaborated closely with the entrepreneurs to craft compelling content that would showcase their full potential and provide tangible value to clients.
Approach:
• Developed a content-first strategy, prioritizing quality over quantity
• Streamlined information to reduce cognitive load and enhance user experience
• Optimized the design and development process through focused content creation
• Ensured each piece of content directly contributed to showcasing entrepreneur capabilities
To maximize engagement and foster connections, we emphasized the social aspects of the platform:
• Integrated prominent links to entrepreneurs' social media profiles
• Implemented easy-to-use share and like buttons to encourage content dissemination
• Created opportunities for direct interaction between potential customers and entrepreneurs
• Designed intuitive user flows to facilitate seamless networking and relationship-building
This strategic approach not only simplified the reading experience but also enhanced the overall efficacy of the website.
By focusing on essential, high-impact content and facilitating social connections, we created a platform that effectively bridges the gap between talented entrepreneurs and potential clients, driving meaningful engagement and business opportunities.
Holistic UX Strategy: Bridging Cultural Commerce Through User-Centered Design
Elements
Human:
• Cultural Entrepreneurs: Artists, artisans, performers, and culinary creators providing products and services.
• Consumers: Conscious consumers seeking authentic cultural goods and services.
• Designers: UX/UI designers working on the platform.
• Developers: Web developers ensuring platform functionality.
• Stakeholders: Project sponsors and partners, including the Cultural Center of Spain in Costa Rica.
Informational:
• Market Research: Insights into the cultural commerce market.
• User Interviews: Feedback from cultural entrepreneurs and consumers.
• Workshops: Collaborative sessions to gather insights and co-create solutions.
• Competitive Analysis: Understanding competitors and market trends.
• Prototyping & Testing: Iterative process to refine design and functionality.
Desired Outcomes:
• Brand Identity: A cohesive digital brand reflecting cultural entrepreneurship values.
• Platform Usability: Features that facilitate connections between consumers and entrepreneurs. • Social Connectivity: Features that facilitate connections between consumers and entrepreneurs.
• Community Building: Tools to foster an active and vibrant community.
Intersection:Holistic UX Strategy:
Our UX strategy at the intersection of human elements, informational elements, and desired outcomes ensures a user-friendly, engaging, and effective platform. This integrated approach supports cultural entrepreneurs and attracts creative industry consumers.
Intersections
Human Elements + Informational Elements:
Deep User Understanding Combining the knowledge from cultural entrepreneurs and consumers with user interviews and market research to gain a deep understanding of user needs and challenges.
Human Elements + Desired Outcomes:
User-Centered Design Leveraging the insights from stakeholders, designers, developers, and users to ensure the design meets the criteria for functionality, usability, and features that fulfill the user requirements.
Informational Elements + Desired Outcomes:
Data-Driven Decisions Using existing data, research, and feedback to inform design criteria, functionality, and features that lead to success metrics and desired outcomes.
UX Research & Team workshops
In the Hilvana project, our team of three designers collaborated closely, with my role focusing on customer follow-up, participants and team support.
We utilized Figma's dashboard to transform complex information into cohesive website UI concepts. Working alongside our developer, who used Webflow, I assisted with general reviews and content detailing on the platform.
Together, we conducted thorough UX research and developed the website concepts, ensuring a seamless integration of design and functionality.
This collaborative approach allowed us to effectively guide the design process, focusing on user-centered principles and product development.
Understanding Cultural Commerce: User Persona Analysis for Hilvana
User persona analysis was crucial in shaping Hilvana's platform to meet the diverse needs of the creative industry ecosystem.
By developing detailed personas like Sofia the Cultural Entrepreneur, Martin the Conscious Consumer, and Laura the Cultural Center Organizer, we gained invaluable insights into the goals, frustrations, and behaviors of our key user groups.
This deep understanding allowed us to identify clear patterns and requirements across different user types, informing our design decisions and feature prioritization.
The analysis helped stakeholders grasp the multifaceted nature of our audience, from artisans seeking broader reach to consumers craving authentic cultural experiences. By aligning the platform's functionality with these persona-driven insights, we ensured Hilvana would not only meet user needs but also foster a vibrant community that connects and supports all participants in the cultural commerce landscape.
Hover the images to pause the carousel
HILVANA CASE STUDY
Style guide
For the project, I assisted in creating a cohesive design system. We standardized elements such as typography, colors, icons, and backgrounds, ensuring a consistent and unified look across all deliverables.
The guide was vital in maintaining uniformity and high-quality output, even within tight deadlines.
We used Figma to design 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 cultural digital products.
Throughout the creative process, we prototyped elements to test micro-interactions, gather insights, and validate design decisions efficiently.
HILVANA CASE STUDY
Responsive Website
In developing Hilvana's responsive website, I used 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
Crafting Hilvana with webflow: A Designer-Led Web Development Journey
As part of Hilvana's lead team, I played a role in shaping the project's direction through UX research and strategic planning.
My primary focus was on conducting user interviews, performing UX studies, and synthesizing insights to create a comprehensive framework.
This foundation guided our design process, ensuring alignment with user needs and project goals. Using Figma, I collaborated with the team to develop initial designs and prototypes, facilitating quick iterations and refinements of our concepts.
The translation of our design vision into a functional website was expertly handled by our dedicated Webflow designer. While I provided ongoing support and assistance throughout the development process, the primary implementation was carried out by this specialist.
This collaborative approach allowed us to effectively leverage Webflow's capabilities, bringing our Figma designs to life with responsive layouts, engaging interactions, and seamless animations. The synthesis of our UX insights with the Webflow designer's expertise resulted in a website that not only captured Hilvana's aesthetic vision but also delivered an optimal user experience, effectively connecting cultural entrepreneurs with conscious consumers.
HILVANA CASE STUDY
Brand Identity of Hilvana
Hilvana's brand identity was crafted to embody the essence of cultural interconnectedness:
• Name chosen to evoke the idea of weaving cultural threads
• Logo design and animation represent the dynamic cultural marketplace
• Fluid animated elements symbolize evolving creative commerce
• Comprehensive branding approach aligns with the platform's mission
• Visual identity resonates with both entrepreneurs and consumers
A diverse character design collection brings personality to the Hilvana platform:
• Characters represent various user personas in the Hilvana ecosystem
• Inclusive design reflects the diversity of cultural entrepreneurs and consumers
• Subtle animations add warmth and engagement to the user interface
• Animated figures act as friendly guides throughout the user journey
• Character animations enhance storytelling and make complex concepts accessible
• Visual elements reinforce Hilvana's commitment to cultural diversity and creativity
HILVANA CASE STUDY
Video Manifesto: Motion Graphics & Storyboarding
To effectively communicate Hilvana's mission and vision, I led the creation of various multimedia content, including:
• Developed a comprehensive video manifesto, involving storyboard creation, 2D composition, audio editing, and voice recording.
• Produced animated characters and graphic collections that visually represented the brand's personality and values.
Applied motion graphics in the main interactions and information display to enhance the user experience.
• Created and managed a series of Lottie animations for smooth, lightweight website animations.
• Ensured that all multimedia content was aligned with the brand identity and effectively conveyed the desired message to the audience.
Crafting Connections: The Hilvana Cultural Marketplace Manifesto
Storyboard
HILVANA CASE STUDY
Social Media Content
To boost brand visibility, I created a variety of social media assets, including posts, reels, and interactive presentations. These were tailored to different platforms to ensure maximum engagement and reach.
The Outcome
Implementation & Client Satisfaction
Hilvana's platform successfully bridged the gap between technical complexities and user needs, providing a smooth and easy-to-navigate environment for cultural entrepreneurs. This approach fostered community building and enhanced the visibility of the creative industry in Costa Rica.
Brand Guidelines: Developed comprehensive brand guidelines and a brand book, ensuring consistent application across all platforms.
Web Editable Platform: Built an active platform in Webflow with interactive features such as onboarding widgets, calendar widgets, and an embedded manifesto video for enhanced user experience.
Design & Development
Hilvana's design and development phase focused on creating a cohesive digital brand identity and a user-friendly platform.
Responsive Website: Created a responsive website tailored to various devices, integrating essential features for a seamless user experience.
Brand and Style Guides: Included logo assets, visual identity standards, and a comprehensive brand book.
Interactive Materials: Produced a manifesto video and social media content to boost audience engagement.
Client Interaction & Support
The platform's user experience (UX) studies and onboarding process helped in understanding the profiles of creative industry entrepreneurs, their integration to the platform, and the community study, effectively supporting cultural entrepreneurs.
UX Study and User Personas: Conducted comprehensive UX studies to profile customers and understand diverse client needs.
Release Materials: Developed a manifesto video and social media content for Hilvana.io's release, providing consistent branding and messaging.
Community Study: Conducted a detailed study of the community to ensure the platform meets the needs of cultural entrepreneurs and enhances community engagement.
