Das – Aircons, Security Systems

UX/UI DESIGN, RESPONSIVE DESIGN

DAS used to run two different businesses: one for air-conditionings and one for CCTVs. The first time they reached out to us, they wanted to redesign their air-conditioning business and use the design for both their aircon and CCTV businesses. During that time they changed the business direction a few times and we helped them transition.

More recently they decided to merge their two businesses into one platform and add new verticals to it, namely sound and phone systems.

Because Aircons and CCTVs have such a different flow, our main challenge for this project was to create a simple architecture and flow to give users a familiar experience while browsing through the website.

What we did

For this project, we helped the client merge their two main businesses into one and add new verticals to it. This required creating a new structure that worked well for different types of products.

We also advised our client to create a new branding and logo. As their business was growing they needed a more modern, professional branding to reflect their current position as a global and reputable player in the market.

Jeremie and Morphosis team are experts in UI/UX design. They redesigned our Website to be the best online Air-Conditioning website in Thailand. We got a 500% increase in active sessions after implementing their redesign and were extremely satisfied with the results. If you are looking for someone to design or redesign your website I would highly recommend Morphosis team.

Purich Visesthanakorn – CEO at Dasintergroup

Research & Discovery

Any project at Morphosis starts with user research. Because we already worked with them before, we were already quite familiar with the aircon market and industry. However, CCTVs, phone and sound systems were new to us. It was critical to take the time to understand users’ behaviors and needs in this market before working on this project. We sat with our clients to get their full business and user requirements and spent some time to analyze their competitors to understand industry best practices and how to structure the website.

Sitemap & User Flow

Our client had a pretty good idea of what structure they wanted for their new website and they even provided a complete sitemap to support the discussions (image below). Their sitemap was pretty solid and we only made minor changes to it mostly to simplify the flow and create a more enjoyable experience for users.

Wireframing

Our biggest challenge when designing wireframes was to allow users to browse through different models of a product without constantly going back and forth between different models. Air-conditionings, phone and sound systems were pretty straightforward but selecting CCTVs required a lot more clicks because of the number of models and submodels for each brand.

To simplify the flow and amount of clicks required we decided to give users the ability to switch easily to a different sub-model directly from the product page as represented in the concepts below:

When all desktop screens were designed, our designers started working on the mobile version. We kept the experience simple and straightforward.

When we talked to our client about the design direction, it was clear since the beginning they wanted the design to feel more established, bold, modern, premium, clean and professional. However, their current logo at the time (left on the image below), didn’t convey these values. We convinced them to do a complete redesign of their logo to reflect the direction they were taking as a business (right image).

In our design processes, we always start by studying different design directions in black and white only. This allows us to focus on what the brand represents an finding the right feel for it without getting lost into the details. For this project, we studied approximately 10 to 15 different concepts. Below are just some of the best options we presented to our Client:

Once a direction was selected we played with different colors that could best represent our client’s business. Our client was not too much attached to the blue/yellow color palette of their previous websites. This gave us some freedom to explore and propose new color schemes. Since we wanted the website and logo to feel bold and premium (purple) while giving energy, warmth, and excitement to it (orange) to represent that the company is a young and dynamic business.

Visual Design

With a new logo and brand guidelines in hand, it was time to apply this look & feel to our user interface. We opted for a very clean, modern design with plenty of white space and large, bold fonts to create a more grounded and established branding for the business.

Below is a comparison of the previous design we did for CCTVCheck24.com in the past and the new design for DAS:

DAS is known for their exceptional customer support. Users do not want to worry about installation, support and maintenance. Our team at Morphosis took time to develop a clear marketing message across the website to explain how DAS is always there to serve them and support them when they buy with them.

Browsing an online catalog should not be a daunting experience. To simplify the experience, we decided to display all the CCTV sub-models straight onto the product details page to avoid endless back and forth.

As users can’t buy a product directly on the website without contacting a salesperson first, the inquiry form needed special attention. Initially, our client wanted to have different forms on the website and call to actions but we convinced them to keep the experience simple. Having too many call to actions (CTAs) or forms on one page would only create more confusion for users and eventually increase drop-offs.

For our forms, we decided to make them as visual as possible to help users select fill-up the form as quickly as possible. No one likes forms but that doesn’t mean we can’t create a pleasant experience for users.

In parallel, we translated each and every desktop screen to mobile. We tried to keep the experience as simple as possible on mobile without losing in functionality.

Styleguide

Before wrapping up the project, our designers created a complete style guide to assist the developers. Here’s just an excerpt of what we did for them:

Summary

Working with DAS (and previously Aircheck24 and CCTVCheck24) has always been a good experience. They are always open to our suggestions and give us ample freedom to experiment and make the best recommendations for their business. In the end, our client was really pleased with the redesign.

If you are interested, you can see the new website at www.dasintergroup.com . Feel free to send us a message here to let us know what you think about it.

Let’s work together!

Are you ready for a creative collaboration that will transform your business?