Project Overview
- Role: Project Manager and UI/UX Designer
- Team members: 2 UI/UX Designers & 2 Developers
- Duration: 1 month
- Client: HC Vietnam
- Domain: E-commerce
- Service Provided: Website Design, WordPress System, Domain & Hosting
- Tools used: Figma, WordPress, Elementor, Google Analytics
Project Objectives
The HC Vietnam website enhancement project aims to improve user experience, optimize performance, and strengthen brand identity. Since the website does not have an e-commerce function, the project focuses on:
- Revamping UI/UX design: Creating a modern, user-friendly interface that allows visitors to easily explore product information and brand details.
- Improving Information Architecture (IA): Organizing content logically to enhance navigation and product discovery.
- Developing a customized WordPress website: Ensuring a flexible, scalable, and easy-to-manage system.
- Supporting bilingual functionality (Vietnamese & English): Expanding accessibility to both domestic and international users.
- Optimizing performance and SEO: Ensuring fast loading speeds and better search engine rankings.
- Completion within one month: Delivering the project on schedule without disrupting business operations.
The Challenge
- Tight Deadline: Completing the entire design and development process within one month requires an efficient workflow, close coordination, and minimal errors.
- Restructuring the Existing Website
- The current website may have issues such as:
- An outdated design that does not offer a seamless user experience.
- Poorly structured content makes it difficult for users to find relevant information.
- Slow performance, affecting overall usability.
- Implementing Custom WordPress Features
- The project requires tailored functionalities, including:
- Product catalog management: Enabling quick and easy product information updates.
- News & blog system: Allowing the company to share updates and industry-related content.
- Bilingual integration: Ensuring accurate translations and seamless language switching.
- Ensuring Fast Performance and SEO Optimization
- The website must load quickly to provide a smooth user experience.
- SEO optimization is essential to increase visibility and reach more customers through search engines.
Discovery & Research
We analyzed competitors to understand user experience and branding strategies while tracking FMCG industry trends to apply relevant design and technology. Researching the target audience helped identify user needs and behaviors, and auditing the existing website revealed strengths, weaknesses, and opportunities for improvement, ensuring an effective enhancement strategy.
1. Timeline management
To ensure the project was completed within one month, I implemented a structured time and task management approach to maximize team efficiency. I divided the project into key phases—Research, UI/UX design, WordPress development, and testing—with clear deadlines for each milestone.
Using Google Sheets to plan and Notion App to track tasks. I tracked progress, assigned tasks strategically based on each team member’s strengths, and conducted daily stand-up meetings for updates. Whenever challenges arose, I quickly adjusted plans and reallocated resources to maintain the timeline.
2. Audit Website
- To ensure the website meets both usability and accessibility standards, I conducted a comprehensive audit of the current website using Jakob Nielsen’s 10 Usability Heuristics and the WCAG (Web Content Accessibility Guidelines). The audit focused on three key areas: Design & Interface, Content, and Performance.
- Some criteria that are not currently guaranteed include:
- Consistency and standard
- Aesthetic and Minimalist Design
- Color contrast & Legibility
3. Secondary Research
We utilized Similarweb to analyze the current website, focusing on traffic, user behavior, and page performance. Simultaneously, we studied competitor websites within the same industry by tracking key metrics such as bounce rate, average time on page, user flow, and device usage.
Output Insight
HC Vietnam’s website is currently facing multiple challenges in performance, user experience, accessibility, UI design, and SEO, resulting in low traffic and suboptimal user engagement.
- Slow loading times on both desktop and mobile hinder user experience and retention.
- Accessibility issues, especially low contrast ratios, make the content difficult to read.
- Inconsistent UI design, lacking professionalism and brand consistency.
- Non-optimized SEO makes it difficult to compete with rivals and leverage organic search traffic.
- There is no clear strategy to attract users, while competitors effectively use paid advertising and digital marketing tactics.
2. Wireframe & Prototype
- Wireframe: Designed basic wireframes for key pages (Home, About Us, Products, News, Contact) to define layout and user flow.
- Prototype: Created an interactive prototype using Figma/Adobe XD to demo the user experience and gather client feedback.
3. Prototyping
I conducted iterative testing, gathering feedback from both internal teams and potential users to refine the design. This approach helped identify usability issues early, reducing development rework and ensuring a seamless user experience. By validating key interactions through prototyping, we were able to accelerate decision-making and effectively align the final product with business and user needs.
4. Website Development
- Platform: WordPress with a custom theme and supporting plugins.
- Key Features: Detailed product pages with images, descriptions, and technical specifications.
- Contact forms and Google Maps integration.
- Optimized page load speed and on-page SEO.
- Testing: Tested the website on multiple devices and browsers to ensure no errors.
5. Handover and Support
- Handover of source code and CMS user guide.
- Post-launch support for 6 months to address any issues.
Take a look at some mockup
