Consulting Website
Website redesign of Improving, Inc. The site design incorporated a content management system (CMS) that marketing could use to implement frequent site updates.
CUSTOMER PROFILE
Improving wanted to update its website, giving its online presence a fresh look. Their website development team wanted to create a modern and engaging website as part of their rebranding efforts. However, the existing site made it difficult for the marketing team to make simple changes quickly without help from developers.
Homepage design is shown on a laptop.
Market Opportunities
The goal was to empower the marketing team by implementing a content management system (CMS) that would allow them to edit and update the site on their own with ease. By simplifying the editing process and reducing reliance on developers for small changes, the project aimed to improve efficiency and keep the website up to date.
CMS design patterns are simplified into a range of options for users.
The Solution
Improving embarked on a website update and successfully transformed their online presence into a captivating and contemporary platform. With its rebranding efforts fully realized, the new website reflects its refreshed brand identity. The marketing team, once burdened by time-consuming processes, now enjoys the freedom to swiftly make edits and updates without relying on developers.
High-fidelity prototype of the final concept homepage
Discovery Phase
A competitive analysis of similar web properties was done to gain insight into visual language, sales, and marketing tactics.
One of the key inspirations for shaping the look and feel of the new brand was Bentobox, whose use of soft pastel colors, gently rounded corners, generous white space, and playful graphic illustrations creates a web experience that feels modern, approachable, and visually engaging.
The bentobox.com website.
Another key source of inspiration for defining the new brand’s visual direction was the website for Envoy, where gradient color palettes, softly rounded corners, generous use of negative space, and bold iconography combine to create a modern, engaging, and confident web experience.
The Envoy.com website
Discovery Personas
A few different persona types were crafted to encompass various individuals, including students, executives, IT professionals, and potential job prospects. Below is a sample of one of the prospective candidate personas created.
Personal developed to share interests and goals about the user.
“I want to be part of a community where every member is appreciated and recognized for fostering a real feeling of open collaboration.”
Steve, Full time Dev and community manager
Further Research
This journey map highlights her progression from initial curiosity and exploration to a committed decision to enroll in an in-person Scrum training course, capturing the emotional and cognitive journey she undergoes as she becomes more aware of the value of Scrum and takes steps to enhance her skills and knowledge.
This journey map highlights the user from initial curiosity and exploration to a committed decision.
Discovery
A card sort study was implemented to gather insights regarding our website’s top-level navigation while simplifying the user experience. During this process, I asked participants to organize navigation components into relevant groupings, which helped understand their mental models and preferences when navigating the site.
A similarity matrix of the card study results.
The results allowed the team to find patterns and identify potential improvements for our top navigation, ensuring that it matches more effectively with users’ expectations and streamlines their interactions, ultimately leading to a more intuitive and user-friendly website.
A dendrogram visualization compiled of the actual agreement of participants within the card study results.
Wireframes & IA
The team used some low-fidelity wireframe drawings in order to provide a clear visual understanding of page structure, page types, information architecture, user flow, functionality, and intended behaviors.
Wireframe drawings created to plan content and page types for the CMS.
Design Phase
The new brand material for grammar, tone, logo usage, colors, visuals, word usage, point of view, and more was combined into a visual design system.
The Design System Style Guide that was included to give the devs examples.
Flair: noun; a uniquely attractive quality
Design Phase
Imaginative illustrations and vibrant photographs were integrated to create an immersive experience that fostered an atmosphere of curiosity and discovery. These visuals brought the content to life, sparking a sense of fun and learning into the website.
One special feature, given the moniker “Flair,” was implemented to add a custom feel to elements on the site. This feature allows for flexibility by placing Flair on any corner of the image using the Content Management System.
The team chose eight elements, providing various options to enhance and customize the visual experience. The number was limited to maintain consistency and familiarity across various components in the CMS.
Examples of the illustration elements named “Flair” that could be used.
The illustration shows the possible placement of the “Flair” if the user chose the element labeled “Rect Blue” in the CMS. This feature allows for flexibility in marketing by allowing the placement of “Flair” on any corner of the component.
The second example in the illustration displays the “Lines Blue” element placed in the bottom-left position of the component.
Examples “Flair” in place and the red markings above show the possible placement using the CMS.
Design Phase
Overall, animations in user experience design improve usability, create a more engaging and enjoyable experience, and assist users in navigating interfaces more effectively.
To add some special interest to the “hero” section of the home page, I created a customized CSS animation to create a slowly morphing blob shape. The shape is made to mask a selected image, chosen by marketing. In this case, a phone and world image were used. Other accents slide into place on load and then remain static.
I created CSS animations to control “The Flair” items, adding more visual interest.
The site was designed to be fully adaptable for mobile devices, with different considerations for mobile and desktop displays. During user testing, we discovered that users often overlooked content when scrolling quickly down the page. As a result, we strategically chose to hide many of the CSS animations for mobile to enhance readability.
The website is being here displayed on mobile
Design Phase
The new brand material for grammar, tone, logo usage, colors, visuals, word usage, point of view, and more was combined into a visual design system.
Imaginative illustrations and vibrant photographs were integrated to create an immersive experience that fostered an atmosphere of curiosity and discovery. These visuals brought the content to life, sparking a sense of fun and learning into the website.
High-fidelity visual concepts were created to represent numerous screen types.
High-fidelity visual concepts were created to represent numerous screen types.
Summary
The Improving website redesign focused on translating a refreshed brand into a modern, flexible digital experience while removing friction from everyday content updates. By introducing a CMS-driven, component-based site, the project empowered the marketing team to manage and evolve content independently—reducing reliance on developers, improving speed, and ensuring the website could scale alongside the brand.
