Amplifying a Local Brand into the Global Market
The Planners | CMS Website | 2020
The Planners | CMS Website | 2020
As one of the most premium wedding and event planners in the Vietnamese market, The Planners' online presence does not reflect its actual brand positioning. With the business plan to expand to more premium and international markets, I led the UX design to transform their website into a coherent, meaningful, practical and aesthetically pleasing presentation of the brand.
My Role:
Design Strategy, UX Design, Styleguide, UI Design
Team:
Minh Y Nguyen (Visual Strategy, UI Design)
Vinh Nguyen (Developer)
Already the leading wedding planner in Vietnam, The Planners aims to become the key destination wedding planner in South East Asia. With an outdated design and several user experience issues, their potential customers were put off by the first impression on their website. To prepare for its launch in Ho Chi Minh city and the repositioning of its brand, a comprehensive upgrade for their website was very much needed.
Before diving in, here's what things looked like after we were done with it. There's a lot of things to breakdown, and hey, it's much easier once you have a sampler of its new visuals.
To kick off the project, I and Minh sat The Planners' team down for a Brand Discovery session. It's a workshop that allows us to really dig deep into the roots of the company, with the overall aim of uncovering deep-seated brand issues.
Step 1 is to understand the brand inside out so that its essence can be brought out in the final design.
Through our research, we learned that 70% of the users lived outside of Vietnam, mainly coming from Australia, North America, United Kingdom, Singapore and Hong Kong. This number includes non-Vietnamese users and Vietnamese users born and/or living overseas.
Female users are the majority, as brides still seem to be taking the key role in wedding planning. Talking to The Planners' team, we also learned about their customer's characteristics. As the brand provides premium services at a higher price point, its customers are well-established, meticulous and resourceful; they often know what they want and are willing to spend on their big day. At the same time, they also have a high standard when it comes to the quality of work.
A decisive audience is never afraid to walk away if things aren't comprehensive -- and that's one of the major problems The Planners' faced. To reduce unnecessary noise on their site, a clear and concise brand story was needed. I set up a brand story workshop and guided them through with step-by-step questions. Beyond just helping us understand the brand, it actually helps clients to look introspectively into their brand too. Through the workshop, all of us were able to sync up on the official brand story.
To help the brand reach where it wants to be, we have to understand where the brand currently is. That's why we looked into both its direct and indirect competitors. As the brand wants to expand onto a more premium market, we worked with them to decide on the characteristics that would help with public perception.
The actual brand names are hidden due to our confidential agreement with the client
By evaluating the website with the users, I discovered several pain points they experience while using the site. I then worked with the visual designer to pin down the core issues we need to work on.
1) Although the number of users using mobile to access the website is significantly larger than on desktops and tablets, its original design was not mobile-friendly.
2) The dense copywriting dissuaded users from reading the info; plus the lack of hierarchy in typeface made it difficult to skim the content or decipher the order of importance.
3) Incoherence in the use of colours and fonts creates an amateur look.
4) Lack of hierarchy and personality in the overall design makes the website, as a user gave feedback, "look like an old blog page".
1) No clear call-to-action; the users have to find the button that leads them to the contact page.
2) Does not have a brand statement which prevents users from quickly understanding what the brand does and how it could benefit them.
3) Unclear info architecture with duplicate content which causes confusion for users and can be bad for SEO.
4) Lack of clear information on how services would be delivered and what customers could expect from the work process.
5) Lack of personal voice and storytelling combining on Work post, with too many unselective images reduces the value of viewing experience.
With the lack of content hierarchy existing in the current sitemap, I proposed a few options for a new one. As the client wanted a major overhaul, they were brimming with big ideas. For example, a Wedding Installation section where it could act as an inspiration board for the users. Though this might sound like a cool idea, I showed the client that this feature would interrupt the user journey, hindering progress towards the target interaction with the brand. That's when they understood that we should start with a strong foundation before adding extra (if any).
V2 - Our client wanted to include Wedding Installation as part of the Portfolio with several more sub-categories
FINAL - Wedding Installation would already been included among other Portfolio work posts and not necessary to have its own section
I created the information architecture for the website with the goal to make the information skimmable & readable; the call-to-action obvious and attractive while reducing the design and development time with reusable components. As the original website had lengthy paragraphs and unclear storytelling, I helped the brand to break the info into bite-sized chunks, which would then be perfect for adaptation and consumption.
Doubling up as the UI designer for this project and handling the mobile design, I chose to prioritise a low-fi desktop wireframe to be more time efficient. When I designed the Work post screen, I realised its flexibility could be a problem. Since the fixed layout on The Planners' original website was an issue we wanted to tackle, there were also technical constraints which limited its customisation capabilities. So I worked with the developer towards at layout that was consistent with designer quality but also easy to use. One huge consideration on my part was to make it difficult for the client themselves to mess up the layout if they were to edit posts on their own in the future.
When we began iterating several versions of the homepage UI mockup, four design challenges became apparent. We had to satisfy a few requirements:
1) to present the brand as premium, timeless yet also modern and creative
2) to make sure that the design user-friendly to their target audiences
3) to minimise the development time and effort; and last but not least
4) to make it easy to use and adapt by the client
I then created the styleguide for this project based on our agreed iteration to fasten the design and development process for me and my teammates.
V1 - The Works section does not immediately show 2 main types of work provided by the brand
V2 - This version of hero background would require too much curation time from the client
V3 - Provide flexibility for new content to be updated by the internal team
One of the goals for this project was to make the job of the editors easier while maintaining a great look for the users. Because of this, I created a separate info tag for each work post to make sure the key info stood out and easy for the users to read.
I also advised our client to break the info on each post into small paragraphs with clear titles so that the users can quickly skim through the content while focusing on the stunning visuals. The templates designed for text boxes and image uploads allow the editors to have a few different options to showcase their content while making sure the overall design would be kept organised and coherent.
With the new button designs, I placed the primary buttons where important action is called for while balancing it out with the secondary buttons when it's less recommended. Using a reusable design component for the contact box, I repeated the appearance on important pages pairing with relevant copywriting to remind users to reach out to the brand in their convenience.
With the majority of its users visiting the website on their mobile devices, it was important to improve its usability on mobile. I paired the use of common vertical scroll with horizontal scroll when space is limited while making sure the design principles are not neglected; eg. showing a visual hint of the next tab so users know there's more to view.
As much as images are important for this website, I wanted to make sure that the text is treated fairly. One of the early feedback from the client was that they wanted to reduce the font size on mobile to be smaller than 16px. Even though there is no written rule or how big or small a set of text needs to be, I convinced the clients that by today's standard, 16px for mobile body text is needed for readability, especially since their written content is so crucial.
Wanting to deliver personalised weddings for their customers, The Planners needed to show their attention to detail through the design of their website. By having a handwritten font to complement the elegant and contemporary look, the audiences could feel a sense of creativity and customisation in the brand's approach. It is also a great choice for our client to highlight their brand's keywords.
To bring a sense of personality and connection, we decided to show the team members and their stories in the About Us section. What I decided to do differently was to show only the key info and image of the team members while still allowing the users to view their stories in more details by clicking the View More button, without being overwhelmed by too much info at once.
Alongside with clear information architecture, the newly added Frequently Asked Questions section can support users in finding answers to their common requests. This would allow users to quickly do their research before sending in requirements and reduce the number of similar requests that our client has to handle.
With years of experience, The Planners have done many amazing projects. However, this fact did not seem to shine through on their previous website. That's why we brought out the best of their works by working with the team to curate the most visually stunning images and pair them with a beautiful layout to improve the user experience while visiting the site.
The website is currently still in beta version but the response from some of their users (who became our first-look audience) reported a much stronger connection with the brand, and commented that the new site layout was a stronger reflection of their services.
This project came to me while I was researching for my own wedding. As much as my current career plan was to focus on the digital product and helping tech start-ups, I felt like this was a beautiful coincidence so I said yes to the project. While primarily working as a UX designer, it's not everyday that you get the opportunity to do UI design. So being able to put my UI design skill to test was a fun challenge.
Here's my key takeaway from this project:
Rule No.1: Content first
Even though I knew that having the content before starting the design was very important, I do understand that in reality, things don't always go the way they should. Being the one who helps the client with their content strategy and advising them on the content structure, I thought I could manage the design without the full content when the client asked for flexibility. But as soon as we completed the UI design and the new content was brought in, I knew we made a mistake. The new content causes us to keep changing the design to fit it and that resulted in delay and more work for our designers.