UX Case Study
Freelance (B2B Client)
Solo
UI & Prototype Designer
Adobe XD, Illustrator
2024
ConnectiviTree had portal ideas in documents but no shared picture of how it worked. I created a clickable prototype so the team could align and investors could understand the direction.
UX Case Study
Freelance (B2B Client)
Solo
UI & Prototype Designer
Adobe XD, Illustrator
2024
ConnectiviTree had portal ideas in documents but no shared picture of how it worked. I created a clickable prototype so the team could align and investors could understand the direction.
UX Case Study
Freelance (B2B Client)
Solo
UI & Prototype Designer
Adobe XD, Illustrator
2024
ConnectiviTree had portal ideas in documents but no shared picture of how it worked. I created a clickable prototype so the team could align and investors could understand the direction.
UX Case Study
Freelance (B2B Client)
Solo
UI & Prototype Designer
Adobe XD, Illustrator
2024
ConnectiviTree had portal ideas in documents but no shared picture of how it worked. I created a clickable prototype so the team could align and investors could understand the direction.
UX Case Study
Freelance (B2B Client)
Solo
UI & Prototype Designer
Adobe XD, Illustrator
2024
ConnectiviTree had portal ideas in documents but no shared picture of how it worked. I created a clickable prototype so the team could align and investors could understand the direction.
The Problem
Bookings happened in Instagram DMs, so students couldn’t see schedules, class types, or prices upfront. This looked unprofessional, created friction for new students, and led to avoidable back-and-forth.
The Problem
Bookings happened in Instagram DMs, so students couldn’t see schedules, class types, or prices upfront. This looked unprofessional, created friction for new students, and led to avoidable back-and-forth.
The Problem
Bookings happened in Instagram DMs, so students couldn’t see schedules, class types, or prices upfront. This looked unprofessional, created friction for new students, and led to avoidable back-and-forth.
The Problem
Bookings happened in Instagram DMs, so students couldn’t see schedules, class types, or prices upfront. This looked unprofessional, created friction for new students, and led to avoidable back-and-forth.
The Problem
Bookings happened in Instagram DMs, so students couldn’t see schedules, class types, or prices upfront. This looked unprofessional, created friction for new students, and led to avoidable back-and-forth.
Project Scope
Over two months I designed a clickable prototype in Adobe XD. The aim was to make navigation and workflows clearer for the development team and to turn abstract ideas into something visual they could plan against.
Project Scope
Over two months I designed a clickable prototype in Adobe XD. The aim was to make navigation and workflows clearer for the development team and to turn abstract ideas into something visual they could plan against.
Project Scope
Over two months I designed a clickable prototype in Adobe XD. The aim was to make navigation and workflows clearer for the development team and to turn abstract ideas into something visual they could plan against.
Project Scope
Over two months I designed a clickable prototype in Adobe XD. The aim was to make navigation and workflows clearer for the development team and to turn abstract ideas into something visual they could plan against.
Project Scope
Over two months I designed a clickable prototype in Adobe XD. The aim was to make navigation and workflows clearer for the development team and to turn abstract ideas into something visual they could plan against.
Goals & Success Metrics
Goals & Success Metrics
Goals & Success Metrics
Goals & Success
Goals & Success Metrics
Goals
◆
Give the dev team a shared visual reference before coding
◆
Reduce confusion in planning caused by abstract docs
◆
Provide investors with a clear walkthrough of the vision
Goals
◆
Give the dev team a shared visual reference before coding
◆
Reduce confusion in planning caused by abstract docs
◆
Provide investors with a clear walkthrough of the vision
Goals
◆
Give the dev team a shared visual reference before coding
◆
Reduce confusion in planning caused by abstract docs
◆
Provide investors with a clear walkthrough of the vision
Goals
◆
Give the dev team a shared visual reference before coding
◆
Reduce confusion in planning caused by abstract docs
◆
Provide investors with a clear walkthrough of the vision
Goals
◆
Give the dev team a shared visual reference before coding
◆
Reduce confusion in planning caused by abstract docs
◆
Provide investors with a clear walkthrough of the vision
Success Metrics
◆
Planning sessions run more smoothly and end faster
◆
Developers use the prototype as a reference point
◆
Investors follow the demo without extra explanation
Success Metrics
◆
Planning sessions run more smoothly and end faster
◆
Developers use the prototype as a reference point
◆
Investors follow the demo without extra explanation
Success Metrics
◆
Planning sessions run more smoothly and end faster
◆
Developers use the prototype as a reference point
◆
Investors follow the demo without extra explanation
Success Metrics
◆
Planning sessions run more smoothly and end faster
◆
Developers use the prototype as a reference point
◆
Investors follow the demo without extra explanation
Success Metrics
◆
Planning sessions run more smoothly and end faster
◆
Developers use the prototype as a reference point
◆
Investors follow the demo without extra explanation
Impact & Results
Impact & Results
Impact & Results
Impact & Results
Impact & Results
◆
Prototype became a shared reference point for the development team
◆
Developers used it during sprint planning to discuss and prioritise features
◆
Planning discussions became easier to resolve with fewer misunderstandings
◆
Prototype became a shared reference point for the development team
◆
Developers used it during sprint planning to discuss and prioritise features
◆
Planning discussions became easier to resolve with fewer misunderstandings
◆
Prototype became a shared reference point for the development team
◆
Developers used it during sprint planning to discuss and prioritise features
◆
Planning discussions became easier to resolve with fewer misunderstandings
◆
Prototype became a shared reference point for the development team
◆
Developers used it during sprint planning to discuss and prioritise features
◆
Planning discussions became easier to resolve with fewer misunderstandings
◆
Prototype became a shared reference point for the development team
◆
Developers used it during sprint planning to discuss and prioritise features
◆
Planning discussions became easier to resolve with fewer misunderstandings
Mark Gilmour
ConnectiviTree (CTO)
"Jimmi and RavenPixel developed a prototype GUI tool that helped our software team scope, troubleshoot, and iterate on design and customer journeys. He was highly responsive, ensured a clear understanding of the brief, and delivered on time and on budget with excellent communication. Jimmi asked the right questions, provided valuable feedback, and the final product enabled us to move confidently into the next phase of development"
Client Review
Mark Gilmour
ConnectiviTree (CTO)
"Jimmi and RavenPixel developed a prototype GUI tool that helped our software team scope, troubleshoot, and iterate on design and customer journeys. He was highly responsive, ensured a clear understanding of the brief, and delivered on time and on budget with excellent communication. Jimmi asked the right questions, provided valuable feedback, and the final product enabled us to move confidently into the next phase of development"
Client Review
Mark Gilmour
ConnectiviTree (CTO)
"Jimmi and RavenPixel developed a prototype GUI tool that helped our software team scope, troubleshoot, and iterate on design and customer journeys. He was highly responsive, ensured a clear understanding of the brief, and delivered on time and on budget with excellent communication. Jimmi asked the right questions, provided valuable feedback, and the final product enabled us to move confidently into the next phase of development"
Client Review
Mark Gilmour
ConnectiviTree (CTO)
"Jimmi and RavenPixel developed a prototype GUI tool that helped our software team scope, troubleshoot, and iterate on design and customer journeys. He was highly responsive, ensured a clear understanding of the brief, and delivered on time and on budget with excellent communication. Jimmi asked the right questions, provided valuable feedback, and the final product enabled us to move confidently into the next phase of development"
Client Review
Mark Gilmour
ConnectiviTree (CTO)
"Jimmi and RavenPixel developed a prototype GUI tool that helped our software team scope, troubleshoot, and iterate on design and customer journeys. He was highly responsive, ensured a clear understanding of the brief, and delivered on time and on budget with excellent communication. Jimmi asked the right questions, provided valuable feedback, and the final product enabled us to move confidently into the next phase of development"
Client Review
Research
Research
Research
Research
Research
Goals
◆
Understand key requirements for the portal
◆
Identify what developers and investors needed to see
◆
Fill gaps in existing documentation
Goals
◆
Understand key requirements for the portal
◆
Identify what developers and investors needed to see
◆
Fill gaps in existing documentation
Goals
◆
Understand key requirements for the portal
◆
Identify what developers and investors needed to see
◆
Fill gaps in existing documentation
Goals
◆
Understand key requirements for the portal
◆
Identify what developers and investors needed to see
◆
Fill gaps in existing documentation
Goals
◆
Understand key requirements for the portal
◆
Identify what developers and investors needed to see
◆
Fill gaps in existing documentation
Methods
◆
Regular sessions with CTO and developers
◆
Project document research
Methods
◆
Regular sessions with CTO and developers
◆
Project document research
Methods
◆
Regular sessions with CTO and developers
◆
Project document research
Methods
◆
Regular sessions with CTO and developers
◆
Project document research
Methods
◆
Regular sessions with CTO and developers
◆
Project document research
Insights
◆
Prototype reduced confusion for developers
◆
Helped prioritise which features to build first
◆
Visual demos worked better for investors than written docs
Insights
◆
Prototype reduced confusion for developers
◆
Helped prioritise which features to build first
◆
Visual demos worked better for investors than written docs
Insights
◆
Prototype reduced confusion for developers
◆
Helped prioritise which features to build first
◆
Visual demos worked better for investors than written docs
Insights
◆
Prototype reduced confusion for developers
◆
Helped prioritise which features to build first
◆
Visual demos worked better for investors than written docs
Insights
◆
Prototype reduced confusion for developers
◆
Helped prioritise which features to build first
◆
Visual demos worked better for investors than written docs
Users & Pain Points
Users & Pain Points
Users & Pain Points
Users & Pain Points
Users & Pain Points
Developers
◆
Documentation too abstract
◆
Hard to prioritise features
Developers
◆
Documentation too abstract
◆
Hard to prioritise features
Developers
◆
Documentation too abstract
◆
Hard to prioritise features
Developers
◆
Documentation too abstract
◆
Hard to prioritise features
Developers
◆
Documentation too abstract
◆
Hard to prioritise features
Investors
◆
Struggled to picture the product
◆
Wanted confidence in progress
◆
Overwhelmed by technical docs
Investors
◆
Struggled to picture the product
◆
Wanted confidence in progress
◆
Overwhelmed by technical docs
Investors
◆
Struggled to picture the product
◆
Wanted confidence in progress
◆
Overwhelmed by technical docs
Investors
◆
Struggled to picture the product
◆
Wanted confidence in progress
◆
Overwhelmed by technical docs
Investors
◆
Struggled to picture the product
◆
Wanted confidence in progress
◆
Overwhelmed by technical docs
Process
Process
Process
Process
Process
1.
Started with low-fidelity wireframes to map the main sections and navigation.
2.
Built a simple clickable prototype for the CTO and developers to walk through; this helped surface confusing loops and odd entry points.
3.
Iterated on the flows by simplifying menus and reordering dashboards based on their feedback.
4.
Created higher-fidelity layouts so the team could see the intended hierarchy and structure without overloading the design.
5.
Refined the prototype with backend developers, clarifying workflows and highlighting the data relationships they needed for planning the build.
1.
Started with low-fidelity wireframes to map the main sections and navigation.
2.
Built a simple clickable prototype for the CTO and developers to walk through; this helped surface confusing loops and odd entry points.
3.
Iterated on the flows by simplifying menus and reordering dashboards based on their feedback.
4.
Created higher-fidelity layouts so the team could see the intended hierarchy and structure without overloading the design.
5.
Refined the prototype with backend developers, clarifying workflows and highlighting the data relationships they needed for planning the build.
1.
Started with low-fidelity wireframes to map the main sections and navigation.
2.
Built a simple clickable prototype for the CTO and developers to walk through; this helped surface confusing loops and odd entry points.
3.
Iterated on the flows by simplifying menus and reordering dashboards based on their feedback.
4.
Created higher-fidelity layouts so the team could see the intended hierarchy and structure without overloading the design.
5.
Refined the prototype with backend developers, clarifying workflows and highlighting the data relationships they needed for planning the build.
1.
Started with low-fidelity wireframes to map the main sections and navigation.
2.
Built a simple clickable prototype for the CTO and developers to walk through; this helped surface confusing loops and odd entry points.
3.
Iterated on the flows by simplifying menus and reordering dashboards based on their feedback.
4.
Created higher-fidelity layouts so the team could see the intended hierarchy and structure without overloading the design.
5.
Refined the prototype with backend developers, clarifying workflows and highlighting the data relationships they needed for planning the build.
1.
Started with low-fidelity wireframes to map the main sections and navigation.
2.
Built a simple clickable prototype for the CTO and developers to walk through; this helped surface confusing loops and odd entry points.
3.
Iterated on the flows by simplifying menus and reordering dashboards based on their feedback.
4.
Created higher-fidelity layouts so the team could see the intended hierarchy and structure without overloading the design.
5.
Refined the prototype with backend developers, clarifying workflows and highlighting the data relationships they needed for planning the build.
Company Document Sketch
Initial Wireframe
Company Document Sketch
Initial Wireframe
Company Document Sketch
Initial Wireframe
Company Document Sketch
Initial Wireframe
Company Document Sketch
Initial Wireframe
Final Solution
◆
Clickable prototype of navigation, dashboards, and workflows
◆
Prototype also used in investor presentations to demonstrate the product vision
◆
Tool that helped backend developers plan more effectively
Final Solution
◆
Clickable prototype of navigation, dashboards, and workflows
◆
Prototype also used in investor presentations to demonstrate the product vision
◆
Tool that helped backend developers plan more effectively
Final Solution
◆
Clickable prototype of navigation, dashboards, and workflows
◆
Prototype also used in investor presentations to demonstrate the product vision
◆
Tool that helped backend developers plan more effectively
Final Solution
◆
Clickable prototype of navigation, dashboards, and workflows
◆
Prototype also used in investor presentations to demonstrate the product vision
◆
Tool that helped backend developers plan more effectively
Final Solution
◆
Clickable prototype of navigation, dashboards, and workflows
◆
Prototype also used in investor presentations to demonstrate the product vision
◆
Tool that helped backend developers plan more effectively
Reflection
I worked mainly with the CTO and investors, which gave me strong business input but not much from the end users who’d eventually use the portal. This limited perspective, but it still showed me how prototyping can quickly align teams and cut down on miscommunication. I also saw how simplifying screens for non-technical audiences can make investor presentations much more effective. If I did this again, I’d involve internal staff earlier and run quick usability checks to spot issues before handoff.
Reflection
I worked mainly with the CTO and investors, which gave me strong business input but not much from the end users who’d eventually use the portal. This limited perspective, but it still showed me how prototyping can quickly align teams and cut down on miscommunication. I also saw how simplifying screens for non-technical audiences can make investor presentations much more effective. If I did this again, I’d involve internal staff earlier and run quick usability checks to spot issues before handoff.
Reflection
I worked mainly with the CTO and investors, which gave me strong business input but not much from the end users who’d eventually use the portal. This limited perspective, but it still showed me how prototyping can quickly align teams and cut down on miscommunication. I also saw how simplifying screens for non-technical audiences can make investor presentations much more effective. If I did this again, I’d involve internal staff earlier and run quick usability checks to spot issues before handoff.
Reflection
I worked mainly with the CTO and investors, which gave me strong business input but not much from the end users who’d eventually use the portal. This limited perspective, but it still showed me how prototyping can quickly align teams and cut down on miscommunication. I also saw how simplifying screens for non-technical audiences can make investor presentations much more effective. If I did this again, I’d involve internal staff earlier and run quick usability checks to spot issues before handoff.
Reflection
I worked mainly with the CTO and investors, which gave me strong business input but not much from the end users who’d eventually use the portal. This limited perspective, but it still showed me how prototyping can quickly align teams and cut down on miscommunication. I also saw how simplifying screens for non-technical audiences can make investor presentations much more effective. If I did this again, I’d involve internal staff earlier and run quick usability checks to spot issues before handoff.
Like What You See?
Enjoyed this case study? If you’d like to talk about your product, let’s chat.
Like What You See?
Enjoyed this case study? If you’d like to talk about your product, let’s chat.
Like What You See?
Enjoyed this case study? If you’d like to talk about your product, let’s chat.
Like What You See?
Enjoyed this case study? If you’d like to talk about your product, let’s chat.
Like What You See?
Enjoyed this case study? If you’d like to talk about your product, let’s chat.