Product Workshop
Design System
Mobile App
Kit Maintenance
Features enhancement
Testing
Pugpig
Overview
View Documentation
Pugpig is the publishing platform behind the world's top media brands, powering websites, digital editions, and mobile apps.
Before the 'Pugpig Design Kit,' customizing apps on our platform was a complex, slow process, relying heavily on our support engineers. Achieving a unique app design was a daunting task for many.
The introduction of the 'Pugpig Design Kit,' created in Figma by Pugpig, revolutionized this process. This toolkit made app customization straightforward and accessible for everyone, regardless of their technical know-how. Accompanied by user-friendly documentation, it guided users through the customization process in a familiar interface, making app design both fun and simple.
What sets this toolkit apart is its seamless integration with our platform. After users finalize their customizations in Figma, the designs are sent to us. We then take these designs and develop them into fully functional apps, ready to be delivered into the hands of readers. This streamlined process not only democratizes app development but also ensures a swift transition from design to deployment, making it possible for anyone to bring their vision to life and share it with the world.
Pugpig is the publishing platform behind the world's top media brands, powering websites, digital editions, and mobile apps.
Before the 'Pugpig Design Kit,' customizing apps on our platform was a complex, slow process, relying heavily on our support engineers. Achieving a unique app design was a daunting task for many.
The introduction of the 'Pugpig Design Kit,' created in Figma by Pugpig, revolutionized this process. This toolkit made app customization straightforward and accessible for everyone, regardless of their technical know-how. Accompanied by user-friendly documentation, it guided users through the customization process in a familiar interface, making app design both fun and simple.
What sets this toolkit apart is its seamless integration with our platform. After users finalize their customizations in Figma, the designs are sent to us. We then take these designs and develop them into fully functional apps, ready to be delivered into the hands of readers. This streamlined process not only democratizes app development but also ensures a swift transition from design to deployment, making it possible for anyone to bring their vision to life and share it with the world.
Pugpig is the publishing platform behind the world's top media brands, powering websites, digital editions, and mobile apps.
Before the 'Pugpig Design Kit,' customizing apps on our platform was a complex, slow process, relying heavily on our support engineers. Achieving a unique app design was a daunting task for many.
The introduction of the 'Pugpig Design Kit,' created in Figma by Pugpig, revolutionized this process. This toolkit made app customization straightforward and accessible for everyone, regardless of their technical know-how. Accompanied by user-friendly documentation, it guided users through the customization process in a familiar interface, making app design both fun and simple.
What sets this toolkit apart is its seamless integration with our platform. After users finalize their customizations in Figma, the designs are sent to us. We then take these designs and develop them into fully functional apps, ready to be delivered into the hands of readers. This streamlined process not only democratizes app development but also ensures a swift transition from design to deployment, making it possible for anyone to bring their vision to life and share it with the world.
MY ROLE
MY ROLE
Design Lead
Design Lead
User Researcher
User Researcher
UX Designer
UX Designer
UI Designer
UI Designer
DELIVERABLES
DELIVERABLES
Design Kit
High Fidelity Designs
User Research
TEAM
Product Manager
YEAR
2023 - Now
Developers (iOS and Android)
Web Developers
85%
85%
85%
Of customers expressed a desire for more extensive customization options, particularly in color schemes and typography and app layout.
60%
60%
Of users encountered difficulties with the current customisation process, citing it as overly complex.
70%
70%
70%
Of customers indicated a need for more comprehensive guides and tutorials
80%
80%
Of the insights were derived from audits and stakeholder discussions.
Of customers indicated a need for more comprehensive guides and tutorials
Of customers expressed a desire for more extensive customization options, particularly in color schemes and typography and app layout.
Of users encountered difficulties with the current customisation process, citing it as overly complex.
Of customers indicated a need for more comprehensive guides and tutorials
Of customers indicated a need for more comprehensive guides and tutorials
Of customers expressed a desire for more extensive customization options, particularly in color schemes and typography and app layout.
Of customers indicated a need for more comprehensive guides and tutorials
Of users encountered difficulties with the current customisation process, citing it as overly complex.
The Challenge
My mission was to develop a Figma design file that enabled customers to easily customize their apps. The challenge? Making this tool flexible for deep personalization—like tweaking colors, fonts, and layouts—yet simple enough for anyone to use.
We had to balance rich customization options with an intuitive design to ensure users could effortlessly align their app with their brand identity.
Another key hurdle was ensuring seamless integration of these custom designs into our platform, allowing for a smooth transition from design to fully functional app. Essentially, we aimed to democratize app design, making it accessible and manageable for users of all skill levels, while maintaining a straightforward path from design to deployment.
My mission was to develop a Figma design file that enabled customers to easily customize their apps. The challenge? Making this tool flexible for deep personalization—like tweaking colors, fonts, and layouts—yet simple enough for anyone to use.
We had to balance rich customization options with an intuitive design to ensure users could effortlessly align their app with their brand identity.
Another key hurdle was ensuring seamless integration of these custom designs into our platform, allowing for a smooth transition from design to fully functional app. Essentially, we aimed to democratize app design, making it accessible and manageable for users of all skill levels, while maintaining a straightforward path from design to deployment.
My Big Plan
Develop an intuitive and flexible Figma design file for easy app customization.
Make Everything Match
Make the app customization process accessible, streamlined, and user-friendly for all users, regardless of their skill level.
Document the customization process comprehensively on our Help Juice platform. This documentation should act as a reliable resource for users to refer to, ensuring they can achieve their design goals with minimal obstacles.
Develop an intuitive and flexible Figma design file for easy app customization.
Make Everything Match
Make the app customization process accessible, streamlined, and user-friendly for all users, regardless of their skill level.
Document the customization process comprehensively on our Help Juice platform. This documentation should act as a reliable resource for users to refer to, ensuring they can achieve their design goals with minimal obstacles.
Highlights
Highlights
Research and Discovery
Research and Discovery
I launched into a detailed research phase with a clear aim: to map out our platform's customization capabilities. This process entailed a thorough examination of every feature, discerning what elements were ripe for customization and which were fixed. A crucial part of this journey involved collaboration; I sat down with the product manager to ensure our exploration was comprehensive and aligned with both user needs and business goals.
Through audits, engaging discussions with stakeholders, and direct feedback from our users, we identified the strengths and limitations of our current offerings. Our focus sharpened on enhancing user experience by expanding customization options, directly addressing common challenges and desires expressed by our user base.
This diligent analysis laid a solid foundation for the development of the Figma design file, aimed at providing users with unprecedented control and flexibility over their app's design. This initial research and discovery phase was pivotal, steering the project towards creating a more intuitive and user-friendly customization tool.
The backbone of the project
The backbone of the project
Observations
Observations
Unveiling the Horizon
Unveiling the Horizon
Creating a system
Creating a system
Armed with insights from our research, I initiated the development of a Figma component library as the first major step towards enhancing app customization. This library includes a comprehensive array of design elements like card types, tabs, and navigation bars, catering to the 80% of users desiring more customization options.
By organizing these components into an easy-to-navigate library, we directly addressed the 60% of users who found the previous process complex and non-intuitive. This move also aimed to encourage the broader use of customization features, responding to the fact that only 50% were actively used.
Creating this component library in Figma, a platform familiar to many, was a strategic choice to lower the technical barriers faced by 65% of our users. This foundational effort marks a significant step towards a more user-friendly customization experience, making design more accessible and aligned with user needs.
Armed with insights from our research, I initiated the development of a Figma component library as the first major step towards enhancing app customization. This library includes a comprehensive array of design elements like card types, tabs, and navigation bars, catering to the 80% of users desiring more customization options.
By organizing these components into an easy-to-navigate library, we directly addressed the 60% of users who found the previous process complex and non-intuitive. This move also aimed to encourage the broader use of customization features, responding to the fact that only 50% were actively used.
Creating this component library in Figma, a platform familiar to many, was a strategic choice to lower the technical barriers faced by 65% of our users. This foundational effort marks a significant step towards a more user-friendly customization experience, making design more accessible and aligned with user needs.
Design and documentation
Design and documentation
After developing the component library in Figma, I moved on to design detailed screen layouts, including timelines, storefronts, and settings, to showcase customization options. This step was crucial for illustrating the adaptability of our designs, allowing users to envision customizing their own app screens.
Each layout was designed in Figma with a focus on flexibility and user experience, providing clear examples of how users could personalize their apps. Alongside the design work, I documented the customization process in Help Juice, our platform for knowledge sharing. This documentation offered step-by-step guides and tips for using the component library effectively, ensuring users could easily apply these customizations themselves.
This effort aimed to demystify the customization process, making it more accessible to all users and encouraging creativity in app design through practical examples and comprehensive documentation.
After developing the component library in Figma, I moved on to design detailed screen layouts, including timelines, storefronts, and settings, to showcase customization options. This step was crucial for illustrating the adaptability of our designs, allowing users to envision customizing their own app screens.
Each layout was designed in Figma with a focus on flexibility and user experience, providing clear examples of how users could personalize their apps. Alongside the design work, I documented the customization process in Help Juice, our platform for knowledge sharing. This documentation offered step-by-step guides and tips for using the component library effectively, ensuring users could easily apply these customizations themselves.
This effort aimed to demystify the customization process, making it more accessible to all users and encouraging creativity in app design through practical examples and comprehensive documentation.
Conclusion
Conclusion
The Pugpig Design Kit has been a resounding success, significantly enhancing both our business and customer experience. By offering an intuitive Figma component library and well-documented customization guides in Help Juice, we've made app customization accessible and empowering for all users.
This initiative has not only increased customer satisfaction and loyalty but also driven business growth by attracting and retaining users. The kit has effectively democratized app design, enabling users to easily translate their creative visions into reality, marking a notable achievement in user-centered design and innovation.
The Pugpig Design Kit has been a resounding success, significantly enhancing both our business and customer experience. By offering an intuitive Figma component library and well-documented customization guides in Help Juice, we've made app customization accessible and empowering for all users.
This initiative has not only increased customer satisfaction and loyalty but also driven business growth by attracting and retaining users. The kit has effectively democratized app design, enabling users to easily translate their creative visions into reality, marking a notable achievement in user-centered design and innovation.
25%
25%
25%
Increase in customer satisfaction due to enhanced customisation capabilities.
Increase in customer satisfaction due to enhanced customisation capabilities.
Increase in customer satisfaction due to enhanced customisation capabilities.
50%
50%
Increase in documentation visits in help juice, indicating higher interest in customisation.
35%
35%
35%
Increase in new customer acquisition attracted by the ease of app customisation.
Increase in new customer acquisition attracted by the ease of app customisation.
Increase in new customer acquisition attracted by the ease of app customisation.
Key Metrics
Key Metrics
Next Project
Next Project
Every elements made with love
Every elements made
with love
Sponge Fairhurst
Head of Engineering (Pugpig)
Jaykay's work always makes me happy! I love that I can provide an idea/task and Jaykay works his magic for me.
Elton Vecchietti
Director UX (Modus)
I want to congratulate Jaykay for his outstanding work on the Money Map Project. Jaykay, your design skills are phenomenal, and it’s evident that you’ve listened to our feedback and responded with creativity and precision.
Christian Nwamba
Senior Advocacy Amazon
Jaykay is a highly talented product designer, known for his remarkable creativity and ease of collaboration.
Harry Phillips
Head of Product (Pugpig)
Jaykay's dedication to design is evident and truly inspiring. The eagerness to tackle the steep learning curve at Pugpig and adapt to feedback stands out. Embracing the Pugpig Design Kit seamlessly showcases flexibility and a commitment to excellence.
Benji Weiser
Product Manager (Pugpig)
I have again enjoyed Jaykay's design skills over the last 6 months. PS don't ask me anywhere near as many questions as they used to, thank you and it's super helpful to get reliable opinions about what we should do to address problems in a way that's best for our users, rather than what's easiest, or best for us.
Charles Dairo
CEO CKDIGITAL
Jaykay seamlessly combines design talent with all-round professionalism. It was a pleasure working with him, and I highly recommend.
Dmytro Kovalenko
UX Designer (Modus)
To my design fellow Jaykay for making great designs on short notice to communicate our vision to the client and win our trust and credibility with them once again. It’s great to have control over design strategy and it’s great to impress stakeholders with our expertise again and again.
Kristina Munderovski
Project Manager (Modus)
Big kudos to our exceptional designer, for taking charge during today’s client call with finesse. His professionalism and meticulous note-taking ensured both teams’ seamless and productive interaction. JayKay, you’re truly a standout!
Clara Shushunov
UX Researcher (Modus)
Jaykay stands out for sure because of his passion and work ethic. I appreciate his contributions and the ‘I’ll get it done attitude.’
His unwavering confidence in his ability to complete tasks has been invaluable, even when faced with ambiguous client expectations and moments of uncertainty.
Testimonials From Peers & Coworkers
Here are a few kind words people have to say about collaborating and solving problems with me.
Some brands I've worked with…
Sponge Fairhurst
Head of Engineering (Pugpig)
Jaykay's work always makes me happy! I love that I can provide an idea/task and Jaykay works his magic for me.
Elton Vecchietti
Director UX (Modus)
I want to congratulate Jaykay for his outstanding work on the Money Map Project. Jaykay, your design skills are phenomenal, and it’s evident that you’ve listened to our feedback and responded with creativity and precision.
Christian Nwamba
Senior Advocacy Amazon
Jaykay is a highly talented product designer, known for his remarkable creativity and ease of collaboration.
Harry Phillips
Head of Product (Pugpig)
Jaykay's dedication to design is evident and truly inspiring. The eagerness to tackle the steep learning curve at Pugpig and adapt to feedback stands out. Embracing the Pugpig Design Kit seamlessly showcases flexibility and a commitment to excellence.
Benji Weiser
Product Manager (Pugpig)
I have again enjoyed Jaykay's design skills over the last 6 months. PS don't ask me anywhere near as many questions as they used to, thank you and it's super helpful to get reliable opinions about what we should do to address problems in a way that's best for our users, rather than what's easiest, or best for us.
Charles Dairo
CEO CKDIGITAL
Jaykay seamlessly combines design talent with all-round professionalism. It was a pleasure working with him, and I highly recommend.
Dmytro Kovalenko
UX Designer (Modus)
To my design fellow Jaykay for making great designs on short notice to communicate our vision to the client and win our trust and credibility with them once again. It’s great to have control over design strategy and it’s great to impress stakeholders with our expertise again and again.
Kristina Munderovski
Project Manager (Modus)
Big kudos to our exceptional designer, for taking charge during today’s client call with finesse. His professionalism and meticulous note-taking ensured both teams’ seamless and productive interaction. JayKay, you’re truly a standout!
Clara Shushunov
UX Researcher (Modus)
Jaykay stands out for sure because of his passion and work ethic. I appreciate his contributions and the ‘I’ll get it done attitude.’
His unwavering confidence in his ability to complete tasks has been invaluable, even when faced with ambiguous client expectations and moments of uncertainty.
Testimonials From Peers & Coworkers
Here are a few kind words people have to say about collaborating and solving
problems with me.
Some brands I've worked with…
Sponge Fairhurst
Head of Engineering (Pugpig)
Jaykay's work always makes me happy! I love that I can provide an idea/task and Jaykay works his magic for me.
Elton Vecchietti
Director UX (Modus)
I want to congratulate Jaykay for his outstanding work on the Money Map Project. Jaykay, your design skills are phenomenal, and it’s evident that you’ve listened to our feedback and responded with creativity and precision.
Christian Nwamba
Senior Advocacy Amazon
Jaykay is a highly talented product designer, known for his remarkable creativity and ease of collaboration.
Harry Phillips
Head of Product (Pugpig)
Jaykay's dedication to design is evident and truly inspiring. The eagerness to tackle the steep learning curve at Pugpig and adapt to feedback stands out. Embracing the Pugpig Design Kit seamlessly showcases flexibility and a commitment to excellence.
Benji Weiser
Product Manager (Pugpig)
I have again enjoyed Jaykay's design skills over the last 6 months. PS don't ask me anywhere near as many questions as they used to, thank you and it's super helpful to get reliable opinions about what we should do to address problems in a way that's best for our users, rather than what's easiest, or best for us.
Charles Dairo
CEO CKDIGITAL
Jaykay seamlessly combines design talent with all-round professionalism. It was a pleasure working with him, and I highly recommend.
Dmytro Kovalenko
UX Designer (Modus)
To my design fellow Jaykay for making great designs on short notice to communicate our vision to the client and win our trust and credibility with them once again. It’s great to have control over design strategy and it’s great to impress stakeholders with our expertise again and again.
Kristina Munderovski
Project Manager (Modus)
Big kudos to our exceptional designer, for taking charge during today’s client call with finesse. His professionalism and meticulous note-taking ensured both teams’ seamless and productive interaction. JayKay, you’re truly a standout!
Clara Shushunov
UX Researcher (Modus)
Jaykay stands out for sure because of his passion and work ethic. I appreciate his contributions and the ‘I’ll get it done attitude.’
His unwavering confidence in his ability to complete tasks has been invaluable, even when faced with ambiguous client expectations and moments of uncertainty.
Testimonials From Peers
& Coworkers
Here are a few kind words people have to
say about collaborating and solving
problems with me.
Some brands I've worked with…
Share with me
Share with me
Ready for a design adventure, or need product design advice? Ping me for fun collaboration
Ready for a design adventure, or need product design advice? Ping me for fun collaboration
Got an idea?
Got an idea?