Driving a firm’s web 3.0 relaunch
Industry
Consulting Services
Founded
2011
Focus
Human Factors Ergonomics, Industrial Design, Design Research, Digital Experience Design, Brand Marketing
Focused Brands
Overview
As an ISO certified, strategic design firm, THRIVE needs a new iteration of its portfolio and showcased service offerings since the current website experience is stagnant and does not align with the user’s mental model and navigational pathways.
My Role: Brand Design Application, Rapid Prototyping, Conceptual Design, Digital Wireframing, Information Architecture
Timeline: Nov '23 - Jan ‘24
Solution
The last updated version of the site was completed before the pandemic era (pre-2020) and required at minimum, a refresher for all current pages and a basis for new areas of focus at a high-level view.
The value of the high-level pages delivered a future roadmap for the project: developer specifications, a simplified desktop and mobile prototype for hand-off, a web design system (component library), and sitemap.
7+
New page and feature introduction
70%
Estimated conversion rate from customer base
21%
Estimated decrease of bounce rate
Main Feature Areas & Outcome
We identified, under the guidance of our project director, new areas of focus and impact required for expanding the firm’s capabilities to bring into the site’s information architecture and content map. This met our goal of completing the first iteration in the visual design development phase as a basis along with developer specifications and prototype expectations.
DESIGN PROCESS
Problem Statement
As a strategic design firm, THRIVE needs a new iteration of its portfolio and showcased service offerings since the current website experience is stagnant and does not align with the user’s mental model and navigational pathways.
Project Focus
The team consisted of one brand designer and one UX/UI designer (my role) under the oversight of our project director. I led the visual design development phase and restructured the architecture of our website through multiple workshops.
Constraints
-
The project had a low budget, so input was minimal at a starting point.
-
We were under a short timeline and direct oversight was limited. We could not schedule weekly check-ins and gaining feedback was difficult, so the file was structured for easy preview.
-
No content strategist for low-level page details, so we focused on high-level pages with templated solutions for component modules.
Updating the Information Architecture (simplified)
Building on the web sitemap let us see and understand what the system looked like in a big-picture view. Under our project leader’s direction, we emphasized the buckets of groups for page categorization and created a new site layout after multiple discussions.
With this, we could look at how far the navigation extends, such as how many points of access exist and how much drill down happens to access the job to be done. This pointed us in the right direction for page orientation and the necessary information that would live on these pages.
before // after sitemap redesign
Tagging Content Sections & Accounting for Latent Components
Once we received a better look of where certain pages lived in categorical groupings, we pinned down blocks of content to frame narrative and cohesive structure in each page.
With every individual page, layout was made for new pages as part of the identification from the IA sitemap.
Accommodating Accessibility in Design Tokens
Testing the secondary color palette confirmed the direction for early UI drafts and color application. To ensure output matched with both the brand and the ideal design elements, we adhered to usability principles with pre-existing components and aimed to provide an inclusive experience. The design decisions incorporated enhanced the user experience with improved treatments to the filter system, interactive cards, and article interface.
Iterative Frame Drafts and Prototypes for Interactive Behaviors
To maintain a priority list, we created a roadmap of the main pages to cover and nailed down, with an updated brand guide from years past, the sections that would act as placeholders that would serve well in other content blocks. With framing thematic elements through multiple iterations and working with our project director, we proposed a system of popularized pieces for an ongoing design library.
Web Showcase
Befores and afters are prevalent in the layout for both mobile and desktop.
✏️ My top 2 learnings from THRIVE Web 3.0
Balancing technical feasibility and UI construction according to developer capabilities. Even if there is an attempt to quickly prototype a working idea, the possibility of execution is dependent on either platform ability or back-end specification/coverage.
Version control; in order to set the design system up for success, it’s best to create portions of the pages and break down components to a granular level in order to templatize solutions. Content layout and responsive design can be explored further down the road.
THRIVE WEB 3.0 RELAUNCH
Lifting THRIVE’s next-generation website into an industry-standard design system ahead of development and aligning with customer mental models.
My Role
Brand Design Application, Rapid Prototyping, Conceptual Design, Digital Wireframing, Information Architecture
Timeline
NOV '23 - JAN '24
Deliverables
Digital Prototype Walkthroughs (desktop + mobile), Web Sitemap, Web Design System