Colraices is a company with more than 17 years in the Colombian market. After the pandemic, leadership decided to refresh the corporate identity and brand image, which led to planning a redesign of the company website.
The design team built the entire website design with UX/UI strategies in mind, always focusing on user experience, applying the full brand identity in colors, and using rounded shapes and shadows. The result is a modern but simple design.
For the build, technologies like React were used, enabling smooth user interactions. This website has the special feature of detecting the user's country based on IP and, depending on that, showing different information blocks. By building reusable components, code writing is reduced and these visual pieces can be reused across sections, making event handling easier.
Features
Among the main characteristics, the UI redesign stands out, giving users a simpler flow thanks to the minimalist design:
- Service presentation: Describes the services offered in detail, highlighting their features and benefits.
- Calls to action (CTA): Includes multiple strategically placed CTAs to guide users to actions like requesting more information, booking a meeting, or downloading resources.
- Contact forms: Provides contact forms that are easily accessible across the site so users can reach the company quickly.
- Interactive sections: Includes interactive sections such as image carousels, project galleries, client testimonials, and animated graphics to keep users engaged and provide an immersive experience.
- Intuitive navigation: Provides clear, easy navigation so users can quickly find the information they need and move smoothly through the site.
- Company details: Provides detailed information about the company, including its history, mission, values, team, and locations.
- Blog or resources: Offers a blog or resources section where the company can share relevant content such as articles, guides, case studies, or industry news to educate users and establish authority.
- Mobile optimization: Ensures the website is fully optimized for mobile devices, providing a consistent experience across devices.
- SEO friendly: Implements search engine optimization practices to improve visibility in search results and attract organic traffic.
Preview (Screenshots)
Technologies
| Technology | Use / Implementation |
|---|---|
| NextJS | SSR features and SEO optimization were used. |
| ReactJS | For building dynamic components and reusing them. |
| API | Consumption of external service APIs for dynamic content visualization, such as the blog. |
| SASS | Used to extend CSS functionality and enable code modularization |
| Swiper.js | Ideal for building complex slider functionality |