The challenge
Atipica’s previous website was challenged to function as an effective funnel for business development. The experience relied on text-heavy storytelling that seemed to overwhelm users.
On top of shared customer research data, we conducted stakeholder interviews to identify the gaps between business goals and the previous web experience. We found that the brand expressions were in conflict with brand messaging, which confused visitors. Additionally, inconsistent interactive behaviors of certain UI elements were contributing to a higher bounce rate too.
Our approach
- Expanding the brand – We worked with the CEO and other stakeholders to upgrade and expand the brand system to include new elements to diversify brand expressions.
- Clear and consistent interactions – To help visitors easily get to the relevant content and improve conversion, we redesigned the navigation system to be driven by user goals and provide better context. Furthermore, coherent interactive elements including buttons and links were optimized to provide clear affordance and feedback for user interactions.
Solution highlights
A revamped web experience optimized for clear communication and user engagement.
Humanistic messaging
Expanding on the original identity system, additional hues and secondary typefaces are introduced to create a more humanistic look and feel for the platform.
Representative UI for illustrations
To communicate the product features and benefits in a more straightforward way, new illustrations are created based on the product user interface are created to compliment copy while helping visitors visualize the product experience.
Learn more about how we do everything
A system for growth
We created a comprehensive style guide to include revamped and new branding elements, content modules, as well as interactive patterns to support future brand development.
What we did
Strategy
- Branding updates ›
- Color scheme
- Typography
- Usability
Design
- Interaction design (UX) ›
- Interface design (UI) ›
- Wireframe
- Prototype
- Design system ›
Development
- Front-end development
- Content modules
- Custom animation
- Integration
Communication
What we did
Strategy
- Branding updates ›
- Color scheme
- Typography
- Usability
Design
- Interaction design (UX) ›
- Interface design (UI) ›
- Wireframe
- Prototype
- Design system ›
Development
- Front-end development
- Content modules
- Custom animation
- Integration