RAVENPIXEL

Home

Projects

About

Contact Me

RAVENPIXEL

CTree Plaza Interactive Web Mockup

UI and Prototype Designer

Solo Designer

Freelance (B2B client)

Dec 2023 - Feb 2024

Adobe XD, Illustrator, Notion

Remote

View Live Mockup

A clickable prototype for ConnectiviTree’s internal portal. The aim was to provide the product and software teams with a clear, interactive vision of the portal before development began, helping to align discussions and guide backend planning.

Developed a desktop-only interactive mock-up of an internal portal to help ConnectiviTree’s product and software teams visualise functionality and structure before development. The prototype became a key tool for decision-making, iteration, and investor engagement.

Preview Live Mockup

The Problem

Static wireframes and presentation slides were not effectively communicating the intended portal layout and interactions. This slowed backend planning and caused misalignment between stakeholders, the product team, and developers. A clickable prototype was needed to bring the concept to life and create a shared reference.

users & Pain Points

Users

Internal staff, including product managers, developers, and operations teams.

Goals

◆

Understand the intended portal structure and navigation before development

◆

Use a single, accurate visual reference during planning

Pain Points

◆

Static wireframes lacked interactivity, making user flows unclear

◆

Inconsistent references created confusion in backend discussions

◆

Missing visual hierarchy reduced ease of understanding

Client Quote

"We can’t get a sense of how the portal will work until we see it in action."

Project Scope

Design and deliver an interactive prototype of ConnectiviTree’s internal portal to help stakeholders and developers align on structure and navigation before development. The scope covered dashboard and page layouts, navigation flows, and visual refinements, using existing brand styles.

Process & Methods

Goal

Create a navigable mock-up that could be used in planning discussions.

Approach

Gathered requirements from the CTO/VP via business docs

Reviewed existing sketches to identify unclear or incomplete areas

Used the existing dashboard style as a foundation for consistency

Developed layouts and navigation flow, refining based on informal stakeholder feedback

Prototyping

Created initial wireframes in Adobe XD to establish structure and navigation. Focused on clarity over decoration to ensure the mock-up was easy to follow for backend planning. Built a clickable prototype linking key pages and simulating navigation flow.

Focus Areas

◆

Clear navigation structure for consistent wayfinding

◆

Minimal visual distractions to emphasise functionality

◆

Consistency with existing dashboard style

Iteration 1

Feedback

The sparse layout didn’t provide enough information at a glance, and navigation options were not obvious. The lack of visual grouping made the content feel disconnected.

Actions

◆

Added tile counts for quick content scanning

◆

Introduced gradients and shadows to create depth

◆

Developed sidebar for persistent navigation across pages

Iteration 2

Feedback from CTO/VP

The CTO/VP suggested several refinements to improve both usability and aesthetics. They recommended removing the welcome message to create more space, making dark mode the default, and introducing a collapsible sidebar for flexibility. Additional suggestions included moving settings, help, and logout options into the user dropdown, and making the dashboard layout more scannable overall.

Actions taken

◆

Refined dashboard layout for improved clarity and spacing

◆

Consolidated settings, help, and logout into the role dropdown

◆

Implemented collapsible sidebar for flexible screen space

◆

Set dark mode as the default display

◆

Streamlined navigation bar for faster access to key areas

Final Solution

◆

Fully interactive desktop mock-up

◆

Delivered as a secure link contained within an index.html file

◆

Used for internal reviews, planning, and stakeholder demos

View Live Mockup

Impact & Results

Results

◆

Replaced 10+ static documents with a single interactive prototype

◆

Enabled backend work to start 2 weeks earlier

◆

Cut developer clarification requests by ~40% during planning

◆

Gained full stakeholder approval after second iteration

◆

Gained full stakeholder approval after second iteration

Client Review

"I engaged Jimmi and RavenPixel to develop a prototype visualization tool of a Graphical User Interface Portal for a major software development project. The delivered visualization tool has been used to scope, troubleshoot, and iterate on the design and customer journey for the delivered software. The visualization tool that Jimmi created has enabled my software team to quickly work through concepts and ideas, iterating on design and functionality. Jimmi was very responsive through the requirements capture and scoping phase, ensuring he understood the brief and objective of the tool and delivering on time and to budget providing good communication and progress updates. He was unafraid to ask questions and alter course to ensure the end product met the objectives whilst also providing feedback from his knowledge base of what would work best. The end result was successful quality output delivered on time, to budget and enabling me and my team to engage in the next phase of our software development."

Mark Gilmour

ConnectiviTree (CTO)

lessons Learned

◆

Starting from one key screen made it easier to keep patterns consistent

◆

A simple clickable prototype communicated decisions better than static slides

◆

Next time I would use Figma for faster component reuse and comments

◆

Basic usability checks, even with a few people, would improve interaction choices

Seen Enough?

Elevate Your Brand

With

RavenPixel Design

Book a Call