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
Two months to design a clickable prototype that mapped navigation, dashboards, and flows. The prototype needed enough detail for developer planning while staying simple enough to guide investor presentations.
Project Scope
Two months to design a clickable prototype that mapped navigation, dashboards, and flows. The prototype needed enough detail for developer planning while staying simple enough to guide investor presentations.
Project Scope
Two months to design a clickable prototype that mapped navigation, dashboards, and flows. The prototype needed enough detail for developer planning while staying simple enough to guide investor presentations.
Project Scope
Two months to design a clickable prototype that mapped navigation, dashboards, and flows. The prototype needed enough detail for developer planning while staying simple enough to guide investor presentations.
Project Scope
Two months to design a clickable prototype that mapped navigation, dashboards, and flows. The prototype needed enough detail for developer planning while staying simple enough to guide investor presentations.
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
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.
Mapped main sections in XD wireframes.
2.
Linked into click-through prototype.
3.
Fixed navigation loops after feedback.
4.
Polished layouts for devs, simplified for investors.
5.
Delivered a streamlined demo version.
1.
Mapped main sections in XD wireframes.
2.
Linked into click-through prototype.
3.
Fixed navigation loops after feedback.
4.
Polished layouts for devs, simplified for investors.
5.
Delivered a streamlined demo version.
1.
Mapped main sections in XD wireframes.
2.
Linked into click-through prototype.
3.
Fixed navigation loops after feedback.
4.
Polished layouts for devs, simplified for investors.
5.
Delivered a streamlined demo version.
1.
Mapped main sections in XD wireframes.
2.
Linked into click-through prototype.
3.
Fixed navigation loops after feedback.
4.
Polished layouts for devs, simplified for investors.
5.
Delivered a streamlined demo version.
1.
Mapped main sections in XD wireframes.
2.
Linked into click-through prototype.
3.
Fixed navigation loops after feedback.
4.
Polished layouts for devs, simplified for investors.
5.
Delivered a streamlined demo version.
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 and workflows
◆
Clearer planning tool for developers
◆
Simple demo path for investor presentations
Final Solution
◆
Clickable prototype of navigation and workflows
◆
Clearer planning tool for developers
◆
Simple demo path for investor presentations
Final Solution
◆
Clickable prototype of navigation and workflows
◆
Clearer planning tool for developers
◆
Simple demo path for investor presentations
Final Solution
◆
Clickable prototype of navigation and workflows
◆
Clearer planning tool for developers
◆
Simple demo path for investor presentations
Final Solution
◆
Clickable prototype of navigation and workflows
◆
Clearer planning tool for developers
◆
Simple demo path for investor presentations
Impact & Results
Impact & Results
Impact & Results
Impact & Results
Impact & Results
◆
Planning meetings became shorter and more focused
◆
Devs adopted the prototype as their main reference
◆
Investors said the demo made the product easier to grasp
◆
Planning meetings became shorter and more focused
◆
Devs adopted the prototype as their main reference
◆
Investors said the demo made the product easier to grasp
◆
Planning meetings became shorter and more focused
◆
Devs adopted the prototype as their main reference
◆
Investors said the demo made the product easier to grasp
◆
Planning meetings became shorter and more focused
◆
Devs adopted the prototype as their main reference
◆
Investors said the demo made the product easier to grasp
◆
Planning meetings became shorter and more focused
◆
Devs adopted the prototype as their main reference
◆
Investors said the demo made the product easier to grasp
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
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.