WEBSITE REDESIGN & DEVELOPMENT
The Mercury Collective
The Mercury Collective needed a website that could better communicate a nuanced Salesforce service offering while modernizing the brand and improving lead-generation potential. The original site had a functional baseline, but its content structure, service hierarchy, and visual presentation made it harder than necessary for users to quickly understand what Mercury offered, and how those offerings mapped to real business needs.
I led the project across UX, UI, branding, and development, taking early visual ideas and turning them into a fully designed and developed WordPress website that clarified the company’s positioning and created a more scalable digital experience.
Visit Website —>
Tools
Figma
Adobe Creative Suite
Wordpress + Elementor
My Role
COLLABORATORS
Timeline
Approximately 3-5 Weeks
Business Impact
The redesign transformed Mercury's site from a static informational site into a scalable marketing platform designed around the goals of growth and client acquisition. Key improvements included:
01 - CLEARER SERVICE COMMUNICATION
The new service architecture organizes offerings into three distinct categories — Configuration & Customization, Automation & Optimization, and User Management & Support — making it significantly easier for potential clients to understand what Mercury offers.
02 - IMPROVED CONVERSION PATHWAYS
Strategically placed calls-to-action and improved page hierarchy guide visitors toward the most important actions, such as contacting the company or exploring pricing plans.
03 - STRONGER BRAND CREDIBILITY
The updated visual design and logo establish a more modern, professional brand presence, helping Mercury position itself as a trusted Salesforce partner.
04 - SCALABLE CONTENT STRUCTURE
The redesigned CMS structure allows the team to easily publish new resources, case studies, and articles, supporting ongoing marketing and SEO growth.
The Challenge
Mercury’s old website presented valuable information, but the experience felt fragmented.
KEY ISSUES:
The service model was visible, but not framed in the most strategic/intuitive way.
Users had to work too hard to understand how Mercury’s offerings related to their stage, problem, or platform needs.
The visual system lacked a strong, differentiated identity.
Key pages relied on dense layouts, repetitive structures, and generic presentation patterns that reduced scannability.
The redesign needed to do more than “look better.” It needed to make the business easier to understand.
My Process
01
Starting Point
Before I joined the project, another designer had already explored some space-oriented UI concepts. That early direction helped establish a visual mood, but the site still needed a stronger content structure, and a clearer translation of Mercury’s services into a user-friendly web experience.
My role was to take that early design direction and drive it to completion by:
refining the visual language
clarifying page hierarchy
developing a stronger service framework
building the final site in WordPress
02
Research & Strategy
To better inform the redesign, I reviewed competitor sites and adjacent B2B businesses to understand how they:
explain complex technical services
structure service pages for non-technical decision-makers
balance credibility with clarity
guide users toward contact and pricing decisions
One consistent takeaway was that many service firms talk in features, but not in frameworks. That insight shaped my approach: instead of simply listing capabilities, the new site needed to organize Mercury’s work into a structure that made sense from the client’s perspective.
03
UI Design
Visually, the redesign moved the brand toward a more confident, polished, and modern B2B presence.
The final interface used:
dark, high-contrast hero sections
bold type and stronger hierarchy
blue-to-purple gradients and abstract geometric forms
cleaner card systems
more structured section spacing
clearer CTA placement
The result felt more distinctive and intentional than the previous site, while still remaining professional and accessible.
A few UI Highlights:
04
Development
This project also stands out because I didn’t stop at design — I built the site as well. Owning both the design and development helped preserve the intent of the UX work and allowed for tighter alignment between concept and final product.
Using WordPress + Elementor, I translated the final designs into a responsive marketing site, creating the production experience myself.
That included:
page builds in Elementor
responsive adaptation across templates
reusable layout systems
implementation of the final service architecture
content styling and visual consistency across pages
Key Takeaways
01 - Designing Around the User’s Mental Model Matters More Than Internal Structure
One of the biggest shifts in this project was moving from internal service categories to a lifecycle-based framework (Platform Assessment → Implementation → Enhancement → Ongoing Support). This reinforced how important it is to structure experiences around how users think, not how a business organizes itself internally.
02 - Visual Design Is Only Effective When Paired with Strong Information Architecture
Early design concepts established a visual direction, but without clear structure, the experience lacked clarity. This project reinforced that UI alone doesn’t solve UX problems — strong hierarchy and content organization are what make a design truly effective.
03 - Owning Both Design and Development Improves Final Product Quality
Designing in Figma and then building in WordPress + Elementor allowed me to maintain tighter control over spacing, responsiveness, and interaction patterns. This end-to-end ownership ensured the final site stayed highly aligned with the original UX vision.