Dragon Auto

Website Redesign and Brand Direction

Project Role:

UX/UI and Graphic Designer (Freelancer)

SKills Honed:

Stakeholder Interviews, Digital Prototyping, Figma, User Testing, Adobe Creative Suite, Webflow

Challenge

Conveying information about a novel and developing service sector can be a challenge. Often new customers are bombarded with too much information all at once which leads to the overall confusion that hinders the sales conversion rate of a small business. Pairing this with a lack of visual cohesion across different media makes it difficult for a budding small business to stand out. That’s why when a client reached out to me about their small business I was excited about the prospect of helping shape a business at the ground level as I saw a potential for growth in a developing market. The owner had a general idea about what they wanted their brand image to represent but lacked proper direction and consistency across their platforms.

Old Dragon Auto Assets and Business Card

Ideation

After the initial stakeholder interview, I was able to get a sense of the narrative and story behind the brand. I shifted the current color scheme away from yellow and white to a more dynamic and energetic sunburst orange and golden yellow color scheme while incorporating the dragon boat-inspired origins of the brand name.

First Logo Re-design

However when presented the client with the initial redesign of the re-brand, they feared that it wouldn’t resonate with the customer base and wouldn't represent their target demographic. It was around this time that the business pivoted from a broader detailing service to focus on a specialty ceramic coating service. I conducted a further in-depth stakeholder interview to really get down to the impression that the stakeholders wanted the brand to convey. Starting over again, I created a persona that represented the target demographic for the business making it easier to explore and establish a brand identity.

Persona for the business' target demographicJames Tran, a young professional and car enthusiast

Using this persona, I implemented a moodboard to generate the aesthetic that would best match the customer base and the inspirations that the business owner had when creating their brand. From the moodboard, I was able to generate a style guide that could be used throughout the business website.


Dragon Auto Mood Board
Drago Auto Style Guide

Combining my findings through the mood board with a logo that a dear friend of the client made I created the brand’s official set of logos to be used for a variety of assets such as posters, business cards, decals, merchandise, etc.

New and Updated Branding

With the initial rebrand, I implemented the logos and slight tweaks to the owner’s website under the constraints of the current website’s platform.

Old website (desktop view)

Although passable for the time being I was left unsatisfied as the site did not represent the dynamic energy that the business wanted to project nor did the site have the proper layout capabilities that would make the information regarding the technology of the service accessible. Determined to create a more dynamic and intuitive experience I went back to the drawing board with a goal to move the entire website to a new platform. I chose the visual coding platform Webflow to be able to build a website from the ground up with more control and input. I ideated further by creating possible layouts for the mobile side of the website and expanding from there.


Brainstorming sketches for possible layout ideas

Implementation

With these ideas generated in mind, I created higher fidelity prototypes

Initial high fidelity prototypes for the mobile view of the new website

After testing the prototype with users from the target demographic and conducting user interviews after the test I was able to locate some pain points with the flow of the website. I further refined this prototype with a stronger narrative and created a funnel through which customers can go through to learn more about the technology and how the service would benefit them and their vehicles in the long run.

[resize output image]
Refined high fidelity prototype

The result is a more cohesive brand image across different mediums, and a more refined and dynamic website with a clear narrative and user flow with proper touches that represent the owner and brand. With Stakeholder Input I incorporated more illustrations and decorative touches that match the brand identity and the car culture that surrounds it.

Preview of mobile version of the new and updated website.

Reflection

The challenge of designing the user experience of a website and refining the brand identity of the business has been a rewarding challenge that pushed my abilities as a designer and as a professional. The biggest takeaway from this experience has been the growth in my ability to adapt to changing goals and objectives and overcome hurdles in the application of my design. The greatest obstacle I faced was the implementation of my ideas into the final website. It meant successfully learning new tools and methods to achieve the look and behavior of the website on my own. Conducting stakeholder interviews and user testing sessions, I effectively took constructive feedback and effectively refined the prototype to deliver an intuitive and informative experience that is conducive to improved sales conversion. In the 3 months since the launch of the newly redesigned website, there's been a 124% increase in sales when comparing the numbers against the 3 months prior to the launch. I believe that the cohesive branding and improved user experience of the website have helped greatly as it allowed their marketing team to focus on their campaigns with a unified brand identity. This allowed for the expansion of the business into accessories, merchandise, and apparel as well. For further improvements, I can focus on the optimization of these animations as well as incorporate an eCommerce section with the expansion of the business into becoming a lifestyle brand. 

Final Website

dragonauto.net


Other projects: 

Let's work together.

CONTACT
or find me on: