Overview
FELIC.studio faced the challenge of standing out in a competitive market filled with production houses claiming top-notch services. The absence of a cohesive and engaging online presence made it difficult to convey the unique value proposition of FELIC.studio to potential clients. Potential clients had difficulty understanding the full range of services and the niche expertise of FELIC.studio due to the lack of a structured, informative, and engaging online platform.
Goal
The primary goal for FELIC.studio's website was to effectively showcase the production house's capabilities and expertise, making a compelling case to potential clients about why FELIC.studio is their ideal choice. The website is specifically aimed at potential clients in the media, advertising, and creative industries looking for a reliable and innovative production house to bring their visions to life.
Project duration
16 weeks including UX design, content design, and web development
Team members + Roles
Terry (me) - research | UX design | UI design | project management | no-code web development
Tools
Adobe XD | Miro | Wix.com | AI image generator (Stable Diffusion | Adobe Firefly)
Visit the website
UX animation design prototyping
Research
Qualitative
After the initial foundational research, user research was conducted through interviews to dive deep into the needs, preferences, and pain points of our target audience. 12 people were selected for this process.
Research insights
- Visual and more visual: The website's visual appeal was paramount as users looked for a studio whose quality of work could be discerned at a glance. Our audience sought a portfolio that displayed versatility and resonated with the latest trends and their specific needs.
- Reliability: The potential clients needed to feel confident in the studio's ability to deliver on their concept. They looked for evidence of innovation and a track record of high-quality work that could translate their vision into compelling visual content.
- Visibility of contact information: Actions taken by users included actively searching for portfolios and contacting information. They were involved in pitching processes and often needed to review selections and negotiate contracts.
- Reliability: The potential clients needed to feel confident in the studio's ability to deliver on their concept. They looked for evidence of innovation and a track record of high-quality work that could translate their vision into compelling visual content.
- Visibility of contact information: Actions taken by users included actively searching for portfolios and contacting information. They were involved in pitching processes and often needed to review selections and negotiate contracts.
Competitive audit
A competitive audit of 10 rival production houses was conducted to benchmark FELIC.studio against industry UX standards and best practices. The audit revealed significant shortcomings among competitors: The lack of responsive design and the inconsideration of accessibility. These findings informed our design and development strategy in the following ways:
- Mobile-First: In response to the widespread lack of mobile optimization among competitors, FELIC.studio prioritized a mobile-first design approach. This ensured that our website would deliver superior performance and a seamless experience on mobile devices, thereby capturing a larger mobile audience.
- Accessibility: With the understanding that accessibility was a common oversight, FELIC.studio committed to following WCAG (Web Content Accessibility Guidelines) to make our website more accessible. This included ensuring adequate color contrast, text size, and providing alternative text for images. By enhancing accessibility, the website not only became more user-friendly but also demonstrated FELIC.studio's commitment to inclusivity.
- Mobile-First: In response to the widespread lack of mobile optimization among competitors, FELIC.studio prioritized a mobile-first design approach. This ensured that our website would deliver superior performance and a seamless experience on mobile devices, thereby capturing a larger mobile audience.
- Accessibility: With the understanding that accessibility was a common oversight, FELIC.studio committed to following WCAG (Web Content Accessibility Guidelines) to make our website more accessible. This included ensuring adequate color contrast, text size, and providing alternative text for images. By enhancing accessibility, the website not only became more user-friendly but also demonstrated FELIC.studio's commitment to inclusivity.
Journey map
This visual tool was instrumental in pinpointing opportunities to enhance the user experience, ensuring that every interaction on the site is intuitive, engaging, and aligned with user expectations and business objectives.
Scenario
One of the situations visitors may encounter when interacting with FELIC.studio's website
Information Architecture
IA is the structural blueprint of our site's content to create a logical and intuitive navigation experience.
From wireframe to hi-fi prototype
The design journey begins with wireframes and evolves into low-fidelity and high-fidelity prototypes. A significant emphasis was placed on UX animation and motion design to vividly demonstrate FELIC.studio's capabilities as a visual design house. These elements were carefully crafted to enhance user engagement without making them a source of distraction.
User interface
The UI design follows minimalist principles to keep the website clean and modern.
Evaluation
- User Feedback Sessions: We conducted feedback sessions where users engaged with our hi-fi prototypes. The feedback was invaluable, offering insights into user behaviors, preferences, and pain points. Our focus was on both the usability of the interface and the emotional responses elicited by the design.
- First Iteration: Based on the initial round of feedback, we implemented changes that addressed user concerns and enhanced the overall experience. This included refining UI elements for better clarity, optimizing navigation flows, and improving interactive features for greater engagement.
- Second Iteration: A second round of user tests was conducted to assess the efficacy of our revisions. While the first iteration resolved many usability issues, this subsequent phase brought to light finer nuances in user interaction that required attention. We made additional adjustments to iron out these kinks, further polishing the user experience.
- Final Design: The culmination of this iterative process was a user-validated design that not only functioned seamlessly across various devices and platforms but also resonated with our target audience on a visceral level. The final design represented a synthesis of user feedback and design expertise, ensuring that the website was both aesthetically pleasing and highly functional.
- First Iteration: Based on the initial round of feedback, we implemented changes that addressed user concerns and enhanced the overall experience. This included refining UI elements for better clarity, optimizing navigation flows, and improving interactive features for greater engagement.
- Second Iteration: A second round of user tests was conducted to assess the efficacy of our revisions. While the first iteration resolved many usability issues, this subsequent phase brought to light finer nuances in user interaction that required attention. We made additional adjustments to iron out these kinks, further polishing the user experience.
- Final Design: The culmination of this iterative process was a user-validated design that not only functioned seamlessly across various devices and platforms but also resonated with our target audience on a visceral level. The final design represented a synthesis of user feedback and design expertise, ensuring that the website was both aesthetically pleasing and highly functional.
Feedback from users has been overwhelmingly positive, particularly in regards to the seamless experience provided by the responsive design and the engaging nature of the motion graphics. Clients and visitors have expressed appreciation for the visual storytelling and the professional representation of FELIC.studio brand identity through dynamic and interactive elements.
Lessons Learned
The project underscored the importance of user research in informing design decisions and the value of iterative design and usability testing in creating an effective user experience. It also demonstrated the effectiveness of using a no-code platform for rapid development without compromising on design quality.
Future Directions
Plans for future iterations include: creating an interactive 3D splash screen, integrating more interactive case studies, and enhancing the portfolio section with more detailed project breakdowns.
