Digital Marketing Agency Website Redesign
Overview
Problem
A Vancouver-based creative and marketing agency aims to revamp the website and enhance the user experience.
This case study documents the process of revamping the website as my first time engaging a project as the UI UX design lead.
Objective
The project involved revamping the agency's website to seamlessly integrate rebranding elements and elevate the overall user experience.
Validate design opportunities and user needs through research.
Restructure the Information Architecture (IA) of the website to cater to the specific requirements of primary user personas.
Ensure that the redesigned website aligns seamlessly with the brand's identity and adheres to its guidelines.
Project Type
UI UX design
Duration
8 weeks (September - October 2023)
Team
UI UX Design Lead (My Role)
Visual Designer
Developer
Content Designer
Design Process
Research:
Conducted a thorough analysis of the existing website, focusing on accessibility, interaction design, visual design, and content structure.
Identified pain points requiring improvement and design opportunities based on user feedback and industry best practices.
Defined the key user personas, mood, and tone for the website.
As a newcomer to the team, I lacked familiarity with the company business goals and understanding of the target customer needs. Consequently, our initial focus involved identifying crucial issues in the current website using a fresh perspective. We conducted a thorough UX audit to pinpoint the pain points and areas requiring improvement in the live user experience.
Having identified these pain points, the subsequent phase of our process involved determining the desired mood and expectations for the website.
Design Goals
Users should experience a sense of cheerfulness and excitement during their interactions with the website.
Users should be eager to discover what comes next, fostering a willingness to invest their time and engagement on the website.
2. Define:
During the initial brainstorming session, we explored a range of websites for inspiration, meticulously assessing the strengths and weaknesses of each. Our focus was on incorporating positive elements, such as effective calls to action buttons, clear and concise content, and proper visual hierarchy into our own website. Following an in-depth competitive analysis and online research, we have also created a style guide to maintain the consistency of the site's aesthetic.
After numerous rounds of discussions and refinement, our proposed Information Architecture (IA) took shape as illustrated in the diagram below.
Improvements in new IA:
Streamlined Content: Consolidated redundant content which led to user confusion and introduced clear content hierarchies for improved clarity.
Improve Logical Flow: We reordered the pages on the main navigation to ensure that the order is based on what the user prioritizes. (e.g. “Blog” is now placed after “Careers”)
Enhance Findability: Based on the user feedback, we make some content such as contact information easier to find by including them on the “Contact Us” page instead of just existing as part of the footer.
3. Wireframe & Design:
We began by outlining the envisioned look of each page and specifying the content to be featured, to generate the layouts and compositions, as well as how some of the textual information can be visualized.
This phase was instrumental in establishing a cohesive flow and user journey, forming a foundational structure for further development. Subsequently, I transitioned each page to Figma for the exploration of design alternatives, aiming to create a high-fidelity wireframe that defines the display hierarchy for the content.
Home Page:
The original website faces a significant challenge as it doesn't align with the brand's positioning and struggles to effectively convey the company's story and information. To make the experience more engaging and pleasurable, we opted for a concise yet impactful approach, using fewer words to create a more bigger impact.
Original:
Painpoints & Opportunities:
Lack of Storytelling: User needs to read through a lot of information to understand what the company does
Legibility: The old website's color scheme, featuring bright mint green resulted in poor accessibility. High contrast between body text and titles also affect readability.
Visual Hierarchy: For example, the case study cards are emphaszing on the name of the clients which does not concern the user or convey the brand’s values and impacts.
Redesign:
Key Improvements:
Visual Metaphor: Redesigned UI to answer the following questions: “What we are”, “who we are:, “what we do”, and “how we can help you” using a growing plant as a visual metaphor for a growing business.
Scannable: The copy and way of presenting is easy to be scanned.
User-Centric Messaging: Ensured all content (e.g. business impact) aligned with user expectations and conveyed the brand's unique value proposition effectively.
Motion Graphic: Adding motion graphic to the homepage to make the experience more engaging for the users.
Services Page:
Services page should communicate what the company does with clarity while still engage the users by understanding what is it that the user expects to find from the page.
Original:
Painpoints & Opportunities:
Findability: User finds it difficult to find information when there are similar information are scattered across multiples individual pages.
Text-heavy: Similar to the home page—the user needs to read through a lot of textual information to understand the information.
Redesign:
Key Improvements:
Tabs: Using tabs to visually nest related elements to facilitate understanding.
Reduce Friction: Instead of having to move to another page, the user can quickly alternate between different information that fall under the same category to encourage exploring of more different services.
Enhance Visual Hierarchy: The original website featured elements that are all prioritized and without hierarchy to guide users through the flow of the content. Therefore, we introduced visual hierarchy and appropriate breathing room to the layout.
About Us Page:
About us should add a human touch and showcase the personality of the company. We have also decided to visualize the journey of the company through a timeline to make it easier to understand.
Original:
Painpoints & Opportunities:
Underdeveloped Content: Some content areas lacked development, leading to an incomplete user experience.
Repeated Information: Redundant and confusing information architecture.
Inconsistent Grid System: Inconsistent grid structure creates visual confusion.
Redesign:
Key Improvements:
Content Enrichment: Worked on developing underdeveloped content areas to provide a more engaging user experience.
Content Visualization: Consolidated redundant content and introduced timeline to improve clarity.
Grid Standardization: Established a consistent grid system for a cohesive visual layout.
4. UI & Interaction Design:
The main strategy for creating the individual components of the website is to improve the of the visual affordances on the original website: for example, many of the elements look like buttons but are in fact just static graphics. Additionally, we focused on visual feedbacks such as hover effects to signify interactive elements.
Another main thing that we want to improve for the website is accessibility. The old website implemented a color scheme that featured a mint green color that is not suitable for accessibility. We Introduced a refreshed color palette with improved contrast ratios for better accessibility.
The design turned out to be both fun and exciting, mirroring the enthusiasm I felt throughout the task. None of this which have been achievable without the unwavering support of my team members, Kylie Chan and Didith Hapiz.