Priority

THE PROBLEM

Priority had a total of 9 separate websites targeting various users, either product-driven or solutions-driven. This caused a significant disconnect within the brand and company, often leaving users confused while navigating through the Priority maze.

THE APPROACH

The project goal was to consolidate the 9 separate websites into one cohesive platform, structuring it to effectively guide their diverse target audiences to relevant sections. To ensure the final website would be well-organized and conversion-oriented, our focus was on refining wireframes, copy, content, layout, mega menu structure, before addressing visual elements.

User flow
Consolidating nine separate websites into one required careful planning to ensure well-defined user journeys. One strategy we employed, in addition to logical grouping of content, was to assign distinct colors to product categories (including their subpages). This visual cue allowed users to quickly identify relevant sections based on both the text and the associated color.

For consistency and reinforcement, these same colors were prominently displayed throughout the user experience, starting from the homepage and extending to the mega menu.

Competitor analysis
Throughout the project, we analyzed how competitors laid out content-heavy websites, guided users through their sites, and managed multiple target audiences. We identified what worked and what didn't, integrating this information into the wireframing stage.

Wireframes
With a total of 33 pages, the major task of mapping out various products for each target audience was accomplished by focusing on the wireframe, allowing us to prioritize strategy before visuals. This approach was particularly useful due to multiple sets of stakeholders who needs to approve before passing on to the next group of stakeholders.

This project consolidated a user-targeted website into a comprehensive, mobile-friendly, 34-page site. Deliverables included the final website design and a well-organized handover file with clear annotations for developers.

As we entered the project's second phase, it became clear that a well organized design file was essential. To achieve this, I introduced page dividers to separate each phase and used color emojis (🟢🔵🟠) to easily associate pages with their respective main sections. These colors were being used to identify the main products being offered in the project.This approach enhanced clarity, navigation, collaboration, and communication among team members throughout the design process.