The About and Contact pages faced usability challenges due to their non-intuitive design, resulting in low user engagement. Additionally, the pages did not comply with accessibility guidelines, leading to poor legibility. The website’s overall appearance was outdated, further contributing to these issues.
Secondary research
Let's look at the numbers
To start off my secondary research I began by reviewing the metrics of how frequently users are visiting the About and Contact pages, their bounce and exit rates.
About Page:
~55% bounce rate
~30% exit rate
Contact Page:
~ 70% bounce rate
~50% exit rate
According to data from HubSpot, the average bounce rate for a B2B website stands at 56%. Analyzing the metrics provided, it is evident that the About page is performing just about the average bounce rate, while the Contact page has exceeded this threshold.
Competitive analysis
Information Architecture
While keeping the statistic above in mind, I also wanted to take a look at our direct competitors to see how they had structured their About and Contact pages in comparison to how we have at Cprime.
How Might We.. design welcoming and informative pages that can improve the user experience and increase engagement on the web pages?
Color & spacing
Accessibility vs. Current design
Displayed below is the current About and Contact Page:
By looking at these screens, it is clear to notice that the heavy usage of black (#00000) hinders legibility and contrast.
Black text on a white or light background generally offers better legibility and contrast, making it easier for users to read and comprehend the content.
Here are some key points to consider:
When black is used extensively in the design, it can reduce contrast and make it more difficult for users to distinguish between the text and background.
This, in turn, results in reduced readability, eye fatigue, and potential loss of information.
White space or negative space is crucial on a website for several reasons. It provides:
Enhanced visual clarity and organization by offering breathing room between elements.
Improved readability and legibility by preventing content from appearing cramped.
Guidance for directing users' focus and attention to important elements or call-to-action buttons.
Contribution to balanced and aesthetically pleasing design, ensuring responsiveness across different devices.
Early visualizations
Wireframes
I began to imagine how I wanted the pages to be laid out:
Iterations
Content Strategy - Banner
After analyzing the wireframes, I developed an initial draft for the new pages, taking an agile approach. Throughout the process, I engaged in ongoing communication with stakeholders at various levels, actively seeking their feedback on desired additions, removals, and revisions of components. This iterative feedback loop ensured collaborative decision-making and allowed for a responsive and adaptable design process.
In order to step from Cprime's existing dark interface it was important for me to design a banner photo that could introduce some color and negative space to make the experience feel inviting from the start.
Black and white banner:
Pros ✅
Aligned with existing banner photos
Introduced a gradient of colors for a fresh design element
Cons ❌
Viewed as a last resort, suggesting a preference for more innovative alternatives
Icon banner:
Pros ✅
Drew inspiration from the recent cover art for alignment with the internal program
Incorporated abstract geometric shapes and icons to represent company values
Infused a modern aesthetic for a visually appealing and contemporary impression
Cons ❌
May be perceived as derivative due to inspiration from cover art
Selected Banner:
Pros ✅
Embodies the essence of Cprime by magnifying icons and incorporating brand colors.
Showcases photos of team members, creating a personal connection.
Strikes a balance between playfulness and professionalism, capturing the company's spirit.
Aligns with the About page's message by highlighting people and values.
Iterations
Content Strategy - Leadership Display
Standard leadership
Pros ✅
Simple approach showing top leadership
intuitive design
Cons ❌
Not an impactful design
Does not show the dynamic nature of our leadership
Introducing Motion
Pros ✅
Showing movement and removing titles to show a more flat hierarchy
Integrated company colors and a more playful design
Cons ❌
Similar to competitor designs
Approved Design
Pros ✅
Drawing inspiration from the company meetup event called Connet adds a unique and personal touch.
The use of a connected circuit as a design concept symbolizes the cohesive collaboration of leaders.
Highlighting selected leader pictures within the circuit reinforces the value of teamwork and unity.
The use of primary colors, black and coral, strengthens the visual identity and brand essence of Cprime.
Submission form
Contact form
Original
Improved
Final
Improved and Final, the Contact Page offered various options for presenting the main form component. We explored incorporating a banner photo with bubble fields, as well as right or left-aligned forms. However, to maintain focus on form completion, we opted for a clean, right-aligned design with accompanying text and a Cprime icon taking up the full screen. Additional contacts are placed below upon scrolling. This layout leverages the natural left-to-right eye movement, ensuring optimal user engagement and comprehension.
Final designs
The outcome
The contact page ( currently in development) can be viewed here:
The about page ( currently in development) can be viewed here:
Reflections + lessons learned
Conclusion
Working on the redesign of the contact and about pages has been an incredible experience, enriched by the collaboration with numerous stakeholders within the company. The opportunity to contribute to the transformation of these critical pages has allowed for:
Exploration of innovative design solutions
Integration of valuable insights from various perspectives
The collective effort and input from stakeholders have not only enhanced the final outcome but also fostered:
Sense of ownership and pride in the project
It has been truly rewarding to witness the positive impact of our collective efforts in creating engaging, user-centric experiences that align with the goals and values of the company.