Context
Control y Confort is an established construction company that has been operating in the Colombian market for 30 years, with a specific focus on HVAC (Heating, Ventilation and Air Conditioning) solutions.
Over the years, the company has experienced a steady growth trajectory, which has allowed it to expand its range of services and serve to much larger customers.
In this context, the organization considered that its previous website was outdated and did not accurately reflect its current business situation. Therefore, their main objective was to modernize and revamp it. During my research phase, an important opportunity emerged: developing a new logo for the company.
2 main goals
Process
The Double Diamond Process, an old acquaintance.
As you can guess, I followed the Double Diamond Process, and I present this case study following the next steps:
⎯ UX Audit
⎯ UX Benchmarking
⎯ Design requirements and brief
⎯ Scope / IA
⎯ Creating the logo
⎯ Creating the website
⎯ Prototyping: desktop, mobile
⎯ Visual System Chart
⎯ Mobile Website
⎯ Desktop Website
⎯ Key Solutions
⎯ Next Steps
Discover
UX Audit
I've performed an audit to find the condition of the company's website.
Control y Confort previous website.
Key Findings
👍 ⎯ Simple and straightforward website flow
One-page website
Simplicity and ease of navigation.
Simple information architecture
Only one level. It really works in tandem with the one-page layout.
👍 ⎯ Easy customer communication
Direct contact with WhatsApp
Users can communicate easily using the main menu WhatsApp option.
👎 ⎯ Unprofessional looking design impacted customer trust and harmed the brand credibility
Unprofessional logo
The unprofessional looking logo hurts the company’s brand image and credibility.
Inconsistent layout
The inconsistent layout confuses visitors and hinders user experience.
Irregular typography
Typography looks unprofessional and it’s hard to read in some cases.
Low contrast
Several elements are difficult to distinguish, leading to poor readability and usability.
Not-working map
Not-working Google Map feature that confuses users.
⚠️ ⎯ Missing features
No security certification
Lack of security certifications affects user trust and raises questions about the privacy of user data.
No metadata
No metadata hinders SEO, reduces online visibility, and limits discoverability, impacting digital marketing efforts.
Only in Spanish
Monolingual website limits potential customer reach excluding non-Spanish-speaking users.
UX Benchmarking
I conducted a competitive audit to gain insights into the user experience of five industry competitors. Through this audit, I assessed nine key aspects of their websites and compared them with Control y Confort own website.
Control y Confort
Grupo Thermoandina
Dismec
Aires & Aires
Interim
Aireflex
Websites analyzed in this comparative study. From top-left: Control y Confort, Grupo Thermoandina, Dismec, Aires & Aires, Inserim, and Aireflex.
Key Findings
Competitive audit's summary to five key competitors.
Competitors average vs Control y Confort.
UX Related
⎯ All websites feature simple information architectures.
⎯ Some websites present complicated user flows.
⎯ All websites use messaging apps to facilitate communication with users.
⎯ All websites present virtually zero accessibility options.
⎯ All websites are written in Spanish only.
⎯ Some websites present complicated user flows.
⎯ All websites use messaging apps to facilitate communication with users.
⎯ All websites present virtually zero accessibility options.
⎯ All websites are written in Spanish only.
Visual Related
⎯ All websites use generic-looking graphics.
⎯ Almost all websites present cluttered visuals and excessive graphic resources.
⎯ Poorly developed branding and visual identity is commonplace to all websites.
⎯ Almost all websites present cluttered visuals and excessive graphic resources.
⎯ Poorly developed branding and visual identity is commonplace to all websites.
Content Related
⎯ All competitors effectively tell what their business is about.
⎯ All websites use language that is both technical and distant.
⎯ All websites use language that is both technical and distant.
Conclusions
I have synthesized the previous two analyses in the following SWOT chart:
Define
I discovered several issues that Control y Confort shared with its competitors, such as poor visual identity and lack of attention to user experience. My approach was to prioritize the most prevalent issues and solve them to improve the brand's perception and improve the relation with the users.
Objectives
⎯ Improve brand identity, quality perception, and user satisfaction with the new website and logo design.
⎯ Differentiate the company from competitors by addressing prevalent UX issues in the industry's websites.
Requirements
⎯ Create a visually appealing logo that reflects the brand's identity.
⎯ Develop a clear and accessible design that prioritizes users.
⎯ Establish a visual hierarchy with easy-to-read typography.
⎯ Design clear call-to-action buttons.
⎯ Use optimized, high-quality images.
⎯ Include English version.
⎯ Apply SEO best practices.
⎯ Make the new website easily upgradable.
Scope / IA
1. Create the new logo
2. Develop a visual micro-system
3. Build the new website
2. Develop a visual micro-system
3. Build the new website
Develop
Creating the logo
Air Flow + Temperature + Abstraction
Left: Niche to work. Right: Selection of Google Search images collected for research. I noticed some trends on the group at the right.
Sketches accidentally destroying other sketches. Remember not to use hard markers without testing them first. Notice some The Fifth Element vibes at the bottom of the second image.
Rounded or squared corners? My modernist-self told me "squared". Cyc is another construction company, so it was ruled-out very early in the process.
Crafting the website
I-really-like-to-take-notes. Expressing ideas in words helps me to clarify and ground design concepts.
Besides the visual style, I explored some plays on words that proved difficult to spread, i. e. "We always keep fresh your data."
Prototyping
Two prototypes to ground most of the ideas developed previously.
Mobile First
Needless to say, but I started this stage by solving the small screen version of the website.
@media only screen and
(min-width: 1400px) { }
(min-width: 1400px) { }
I only crafted prototypes for two screen widths. In the end, I setup five screen sizes to cover most viewport widths.
Deliver
Visual System Chart
Mobile Website
Website on Android device.
Desktop Website
Website on desktop browser.
Key Solutions
New logo. In addition to the new logo, I added the tagline to clarify the company's sector.
⎯ Simple but consistent layout
⎯ High contrast typography
⎯ High contrast color palette
⎯ Eliminated unused features
⎯ Floating CTA toolbar
The floating cta bar optimizes users interaction with the company by inviting them to chat or make a call.
Other implemented solutions
⎯ Security certification added
⎯ Optimized SEO and metadata
Next Steps
⎯ Post-launch research: I want to know how the business is affected by the new image and how the website is used. This stage of the project will include a Usability Study, and I want to establish the NPS.
⎯ Implement EN version.
