Meshio - Platform for Tech Hobbyists
Meshio - Platform for Tech Hobbyists
A community and skill-sharing platform designed to connect makers, tinkerers and developers in a supportive environment.
Project Type
Final exam
Duration
5 weeks
Collaborator
Sarah Kellner
My Role
UX Researcher & Designer
Main Tools
Figma, Miro, Excalidraw, Useberry, Canva
Project Type
Final exam
Duration
5 weeks
Collaborator
Sarah Kellner
My Role
UX Researcher & Designer
Main Tools
Figma, Miro, Excalidraw, Useberry, Canva
The challenge
The challenge
Tech hobbyists are creative and curious but often lack a dedicated online space that balances structure and community. Existing platforms are either too professional (like Stack Overflow) or too chaotic (like Reddit or Discord).
Our goal was to design a platform that feels organized yet approachable, where hobbyists can share their projects, connect with peers and find motivation to keep learning.
Image source: Canva
Understanding the user
Understanding the user
Understanding the user
To represent different types of tech hobbyists, we created two user personas:
Hannah - 32, Developer, Oslo - experienced hobbyist
Andreas - 25, Student, Bergen - beginner hobbyist
shared need: structured, supportive platform
Scenarios: Hannah looks for a structured platform to document and showcase her advanced projects and inspire others; Andreas wants an easy way to find beginner-friendly tech projects and get feedback to help him learn and stay motivated.
“I'd share more if I had a neat, easy-to-understand way to present my projects and get feedback from people who know what they're talking about.”
— Interview Participant A
Process Highlights
Process Highlights
The Design Thinking Process
Empathize & Research
Empathize & Research
To begin with, we conducted a competitor analysis of five platforms - Reddit, Discord, Hackaday, Stack Overflow and Daily.dev.
Strengths: active communities, vast content
Weaknesses: lack of structure, poor discoverability, overwhelming interfaces
We continued the research with:
3 in-depth interviews with hobbyists (makers, coders and electronics tinkerers)
online survey - 8 responses (participants recruited on IT conference and through a tech hobbyist Facebook group)
Key insights: Hobbyists want a structured, friendly and visually clear platform, not another chaotic forum.
Synthesis & Insights
Synthesis & Insights
Synthesis & Insights
We organized data using affinity mapping and found out key themes:
Motivation comes from feedback, visibility and learning
Community support is more important than competition
Project organization and discovery are major gaps
These insights led to forming questions such as:
“How might we help hobbyists share projects clearly while feeling supported and recognized?”
Ideation & Sketching
Next step was running brainstorming sessions and using the $100 Test technique to prioritize features.
The strongest ideas focused on:
Structured project documentation
Gamified engagement (badges, levels, community challenges)
Curated tutorial exchange for peer learning
Then, we created early sketches and low-fidelity wireframes to visualize navigation and key interactions. We tested it with 2 tech hobbyists to get some more ideas.
Brand Identity Guidelines
Brand Identity Guidelines
Brand Identity Guidelines
Before moving forward, we defined our project's visual direction. We chose a name inspired by verb mesh (to fit or work together successfully).
When deciding on logo, color palettes and typography, we were guided by our brand's core qualities - being supportive, structured, fun and engaging.
Our typography choice, Manrope, is a modern sans-serif font. We chose it because it's very readable and sleek.
This helped us create an experience that feels both professional and friendly. Also, it served as a good foundation for our design system.
Structure & Flow
Next up was mapping out the Information Architecture, User and Task Flows for both desktop and mobile views to ensure consistency and logical navigation.
Key paths included:
Signing up and customizing a profile
Creating and publishing a project
Browsing, giving feedback and saving others’ work
This structure was important for creating wireframes and prototypes.
Prototyping & Testing
Prototyping & Testing
We developed an interactive prototype and conducted 12 usability tests (moderated + Useberry).
4/5 overall satisfaction rate
Strong satisfaction with quick actions, gamification elements, mobile flow
Most common issue: inconsistent layout between desktop and phone
After adjustments, we improved:
Clarity and layout consistency
Accessibility (contrast, spacing, focus states)
Visual hierarchy and feedback flow
Task success rate (mobile)
Task success rate (mobile)
Task success rate (mobile)
Errors/confusion rate (mobile)
Errors/confusion rate (mobile)
Errors/confusion rate (mobile)
Task success rate (desktop)
Task success rate (desktop)
Task success rate (desktop)
Errors/confusion rate (desktop)
Errors/confusion rate (desktop)
Errors/confusion rate (desktop)
The solution
The solution
The mobile version of Meshio focuses on quick interactions and on-the-go engagement.
Users can easily add new projects, browse community posts and check notifications through simple, thumb-friendly quick actions.
This version is ideal for spontaneous moments like sharing project updates, catching up with new posts or activity within the community. Besides, it's easy to access anytime, anywhere.
When designing the navigation bar, I experimented with new Apple liquid glass style. I think it turned out pretty nice!
The desktop version, designed by my teammate Sarah, is meant to provide a broader workspace for deeper engagement.
Users can create detailed project pages and explore discussions with an expanded layout that highlights visuals and feedback threads.
The dashboard view offers clear project organization, notifications and analytics, giving hobbyists a complete overview of their activity within community.
Reflection
This project was one of my most comprehensive ones yet. I learned how to conduct end-to-end UX work, translate qualitative and quantitative data into actionable design decisions and how to iterate based on real user behavior.
What I learned:
Planning and managing a full end-to-end UX project
Building inclusive, community-oriented platforms
Effectively combining both qualitative and quantitative data
The value of iterative design and measurable testing
This project was one of my most comprehensive ones yet. I learned how to conduct end-to-end UX work, translate qualitative and quantitative data into actionable design decisions and how to iterate based on real user behavior.
What I learned:
Planning and managing a full end-to-end UX project
Building inclusive, community-oriented platforms
Effectively combining both qualitative and quantitative data
The value of iterative design and measurable testing
Areas for improvement
Areas for improvement
Areas for improvement
If I continued working on this project, I would:
Continue iterating and do more testing
Change carousel sections on mobile with vertical scroll
Design more parts of the app (like settings menu)
Make form fields interactive
Fix alignment & spacing on desktop
Explore extra features like AI-driven recommendations and advanced moderation features
Explore how to make users more motivated and engaged
Visual Design
User Research
Design System
Ideation
Wireframing
Accessibility
Ready to Start a Project? Let’s Collaborate!
Multi-Device Design
User research
Interaction
Collaboration
Prototyping
Testing
Visual Design
Design System
Ideation
Wireframing
Accessibility
Ready to Start a Project? Let’s Collaborate!
Multi-Device Design
User research
Interaction
Prototyping
Testing
Ready to Start a Project? Let’s Collaborate!
User research
Design System
Collaboration
Prototyping
Testing
Multi-Device Design