Zini is a mobile application designed to support the creation and sharing of zines within a digital creative community.
What are zines?
Zines are self-published works that are typically handmade and produced in small batches. They often take the form of small booklets or pamphlets and can explore a wide range of topics, including art, music, politics, and personal storytelling. Because there are no strict rules around format or content, zines have long been used as an accessible and low-pressure creative outlet. Zini translates this traditionally physical medium into a digital platform where users can create, upload, share, and discover zines. The goal of the app is to provide an inclusive space where people can express creativity without needing advanced artistic skills.
Unlike existing zine repositories, Zini focuses on community and inspiration, encouraging users to explore new ideas and experiment with creative expression.
Zini allows users to:
Upload and share their own zines
Save work from other creators
Browse zines by genre and weekly themes
Learn how to create their own zines by completing tutorials
My role
Role: UX Designer & Developer
Duration: 8 Months
Tools: Figma, Firebase, React / Ionic
Focus: Community platform, creative tools, content sharing
As the UX designer and creative lead for Zini, I was responsible for the early-stage ideation, visual direction, interaction design, and front-end development of the app. Coming from a background in graphic and visual design rather than traditional programming, I used a vibe-coding approach to bring the project to life, combining design intuition, iterative problem-solving, and AI-assisted development to build a functional prototype.
This project was developed over eight months and involved user research, zine-making workshops, interface design, and full application development.
Key Pain Points
Through early research, we identified several issues within the current zine ecosystem:
Many online zines require payment, limiting accessibility.
Zines often have small circulation, making them difficult to discover.
New creators may feel intimidated by the creative process, particularly when generating ideas.
Existing zine platforms rarely allow interaction between readers and creators.
Design Opportunity
Most existing platforms function as static archives of zines. Zini was designed instead as a community-driven platform, allowing users to share, discover, and learn about zine creation in a more interactive environment.
Product Goals
Based on our research, Zini was designed to:
Help users discover zines based on their interests
Encourage sharing and uploading original work
Provide guidance for creating zines through tutorials and prompts
Make zine culture more accessible and community-driven
These insights informed the design decisions for the platform’s core features and user flows.
Competitor Research & Benchmarking
We analysed platforms such as Behance, Issuu, Pinterest, and Instagram to understand how creative content is published and discovered online.
Key insights
Most platforms act as archives rather than communities
Many zine platforms require payment or subscriptions
Discovery tools are often not tailored to niche creative formats
Visual platforms like Instagram and Pinterest show how swipeable content and inspiration feeds drive engagement
Design decisions
Zini focuses on community interaction, not just publishing
Zines are displayed in swipeable carousel formats
Users can save and browse zines by genre and weekly themes
User Research
To support user research and testing, we ran two zine-making workshops in May and September 2025. Participants created physical zines using collage materials, following a short introduction and folding tutorial that later informed the in-app tutorial experience.
The workshops helped us observe how different users approached zine-making, from art students already familiar with the medium to casual participants with no prior experience. In the September session, we also tested an early version of Zini on a device, gathering feedback on navigation, tutorials, and the upload flow.
Key insights from the workshops shaped the app’s direction. Users wanted zines to be easier to access, less expensive, more beginner-friendly, and more social. These findings informed Zini’s focus on free digital access, guided tutorials, zine discovery, and community features such as liking, commenting, and sharing.
We were also able to use the zines created in the workshops to help populate the app.
Design Approach
To design Zini, we followed a user-centred design process that moved from early ideation to high-fidelity prototypes and final implementation. We began the design process with sketches, then added the sketches to Figma to create a low fidelity mock up of the basic user flows and interactions.
Ideation
We began with brainstorming sessions to translate our research insights and user needs into potential features and interactions. This stage helped define the core structure of the app and ensured each feature supported the goal of making zines easier to discover, create, and share.
Navigation Structure
Based on our user research, we designed a simple navigation system with five main sections:
Home / Feed – a scrollable feed where users can browse zines and discover new content.
Tutorials – step-by-step guides for creating zines, including ideation, materials, layout, and folding techniques.
Upload – a space for users to share their own zines with the community.
Search – a discovery page where users can browse zines by genre or search for specific topics.
Profile – a personal hub displaying uploaded zines, saved zines, and user information.
This structure ensured users could easily discover, learn, create, and share within the app.
The visual style of Zini was designed to reflect the handmade nature of zines while maintaining a clean and accessible interface. We developed a brand identity including:
logo and colour palette
typography
consistent illustration style
During the design process we simplified the initial “paper-cutout” aesthetic to improve clarity and usability.
Visual Design & Branding
Final Implementation
The final application closely matched the high-fidelity designs, with only minor adjustments made during development. One key improvement was the use of animated visual guides in tutorials, which testing showed were easier for users to follow than static images.
High-Fidelity Prototypes
Using Figma, we created detailed prototypes that incorporated the visual design and full user flows. Familiar iconography (such as home, search, and profile icons) was used to ensure intuitive navigation.
Key interactions included:
swipeable multi-page zine reading
a scrolling feed for discovery
step-by-step tutorials with animated GIFs for folding instructions
Zini High Fidelity Prototype Figma
User Testing
Zini was tested through paper prototypes, zine-making workshops, surveys, and two TestFlight rounds. Early paper prototype testing helped identify issues with icon recognition and upload flow clarity, leading to clearer navigation labels and a more intuitive upload process. The workshops allowed us to observe how users approached zine-making in a hands-on setting, while surveys captured feedback on their interest in creating, reading, and sharing zines. On-device testing through TestFlight revealed further issues around dark mode accessibility, loading states, like/save behaviour, and tutorial completion. These findings informed key improvements to the app’s navigation, tutorial experience, upload journey, accessibility, and community interaction features.
Development
The Zini prototype was developed as a functional mobile web application. The interface was built using Ionic React, allowing the app to replicate native mobile navigation patterns while remaining responsive across devices.
User authentication and data storage were implemented using Firebase Authentication, Firebase Firestore, and Firebase Storage, enabling users to securely create accounts, upload zines, and store metadata.
Key features implemented during development included:
user registration and login
zine uploads with image and PDF support
a scrollable feed displaying uploaded content
profile pages showing saved and uploaded zines
The final implementation closely followed the high-fidelity prototypes created in Figma, ensuring consistency between the design and the working product.
Zini successfully demonstrates how a digital platform can a creative community around zines. By combining interactive browsing, easy uploading, and educational tutorials, the app encourages self-expression and engagement without requiring advanced artistic skills. The project provided hands-on experience in UX design, front-end development, and user-centered interaction design, highlighting the importance of interactivity, feedback, and mobile-first thinking in digital creative platforms.