CTree Plaza Interactive Mock-up
Interactive Mock-up
UI/UX Design
Adobe XD
Adobe Illustrator
This project was about building an interactive web portal prototype for ConnectiviTree to make communication and management straightforward. The challenge was turning complex user journeys into an interface anyone could pick up and test before development. In Adobe XD I sketched out wireframes and then moved to high-fidelity mock-ups with full interactivity. After each round of feedback I refined the flows and layout to keep everything clear and easy to use. This work shows how I create practical design solutions that link concept and build.
The Client
ConnectiviTree Corp provides data-transport networks as a service to B2B carriers. They’re building CTree RootNet, a pan-European high-speed network that links major cities with reliable, high-capacity data connections. Their CTree Plaza platform lets businesses manage services through an easy self-service, on-demand interface. And via the ConnectiviTree Global Alliance they team up with network providers around the world to deliver seamless connectivity solutions.
Core Values
Innovation
Reliability
Transparency
Brand Personality
Professional
Forward-thinking
Trustworthy
Target Audience
B2B carriers
Network investors
Mark at ConnectiviTree Corp asked me to build an interactive mock up for a new dashboard web portal. The aim was to bring their ideas to life, test usability and give the back end team a clear reference. I worked from their brand kit, UI and UX guidelines and rough framework diagrams to shape the design. The prototype was hosted on their internal network so that during the presentation no one could copy the link or gain unauthorised access.
Project
Interactive dashboard prototype
Design Focus
Clarity
Usability
Simplicity
Modern
Deliverables
Interactive Mock-up
Hosted on Local Network
The Design
Tool Selection
I chose Adobe XD for its smooth flow from wireframes to interactive prototypes. Its click-through previews and built-in feedback tools made it easy to test ideas and share updates with the team.
Wireframing
Using sketches, PowerPoint decks and reference docs, I mapped out the portal’s layout and navigation. These wireframes made sure key features were in the right place and the user journey felt instinctive before adding any visual style.
Design Iteration
Over several review sessions, I refined the designs based on feedback. I moved from basic wireframes to fully interactive prototypes, tackling usability issues, tweaking the hierarchy and adding clickable buttons and transitions to mimic the real experience.
Final Delivery
I bundled everything into an index.html file and hosted it on the client’s internal network. This setup gave the team secure access for hands-on testing and demos, uncovered last-minute UX hiccups and kept development running smoothly.
The Result
The final mock-up is more than just a visual guide—it’s the blueprint the developers use to build the portal’s features and user journeys. As a living prototype, it lets the team explore and test new ideas without expensive code rewrites. Hosting it on the client’s secure network keeps the designs confidential and limits access to authorised staff. That controlled access makes internal demos smoother, speeds up decision-making and cuts the risk of miscommunication, so development moves faster and with greater confidence.
Seen Enough?
RavenPixel
Design