SIM CHIA HUEYSIM CHIA HUEY
PéperTree is the official online shop for my illustrated sticker brand. I created this project to gather everything that makes up Péper’s world in one place: illustrations, products, brand updates, and the first sticker collections.
Beyond building an online shop, this project was also a personal challenge. After taking a three-year break from Angular, I wanted to sharpen my front-end development skills again through a real-world project while creating a meaningful platform for my brand.
The result is a functional Minimum Viable Product (MVP) that allows visitors to explore the PéperTree universe, browse products, and place their first orders while laying the groundwork for future improvements.
· Duration: 3–4 months (part-time)
· Role: Sole Designer & Front-End Developer
· Team: Solo project
· Tools: Figma, Angular, TypeScript, SCSS, Illustrator
· Website: pepertree.com
· Status: Live MVP
I independently designed and developed the entire project.
I also used AI as a development assistant to generate the initial structure for some components and help me better understand Angular concepts while getting back into the framework. The overall design decisions, implementation, and project adaptations were completed by me.
Péper loves inventing, drawing, crafting, taking photos, dreaming… and above all, sharing those moments with friends. She illustrates their everyday adventures, turns them into stickers, and creates little stories inspired by the people around her.
My goal was to build an official website that brings together the entire PéperTree universe:
The idea was to create a single destination where anyone could discover PéperTree, even without using social media.
This project was built around several objectives.
Create the official website, and build a central place that represents the entire PéperTree brand.
Launch the first sales, and allow visitors to purchase stickers without waiting for a complete e-commerce infrastructure.
Relearn Angular, after several years away from the framework, I wanted a practical project that would help me rebuild my confidence and refresh my development skills.
Build a scalable foundation, and create a website that could easily grow with new collections, illustrations, and future features.
One of the biggest challenges was creating an online shopping experience without building a back-end.
Developing a shopping cart, payment system, order management, and customer accounts would have required a significant investment of both time and budget.
Instead of delaying the launch, I chose an MVP approach: build a functional first version that introduces the brand and allows customers to start placing orders.
This decision allowed me to focus on user experience, visual identity, and front-end quality while keeping the project flexible for future development.
PéperTree is designed for people who enjoy stationery, illustration, cozy aesthetics, and the little joys of everyday life.
I wanted the visual identity to instantly make people smile.
The brand is built around a few core values:
Through her illustrations, Péper tells stories about hobbies, everyday mishaps, friendships, and simple moments, encouraging people to embrace imperfections with kindness.
Purple naturally became the main color of the brand.
Besides being my favorite color, I wanted to create a visual identity that stood out from many creative brands, where purple is still relatively uncommon as the primary color.
For me, purple represents:
It was also inspired by Grimace, McDonald’s iconic purple mascot, whose friendly, rounded silhouette perfectly matches the playful personality of PéperTree.
To reinforce the brand personality, I selected two Google Fonts.
Nunito is used for body text. Its rounded letterforms improve readability while maintaining a soft, welcoming appearance.
Cherry Bomb One is used for headings. Its bold, rounded shapes create an energetic and playful atmosphere reminiscent of stickers and hand-drawn illustrations.
The website was designed for both desktop and mobile from the very beginning.
I first created hand-drawn wireframes before designing high-fidelity mockups in Figma.
During development, I built the desktop version first before progressively adapting each page for tablets and smartphones.
This workflow helped maintain visual consistency across every device.
To keep browsing simple while reducing the number of pages, I decided to display product details inside modal windows instead of creating individual product pages.
This approach allows users to:
It also proved to be an efficient solution for this first MVP.
While talking about PéperTree, I realized that not everyone uses Instagram.
Instead of embedding Instagram directly into the website, I chose to republish the same illustrations and videos on the site itself.
This ensures everyone can enjoy the content regardless of whether they have a social media account.
The project was built with Angular.
It gave me the opportunity to progressively rebuild my confidence with the framework while strengthening my front-end development skills.
The application is organized around:
This structure makes it easier to add new products while keeping the codebase organized and maintainable.
Routing was the first major challenge.
Since I hadn’t worked with Angular for nearly three years, getting back into routing, project organization, and component architecture required time and persistence.
Because routing was one of the very first features I implemented, it felt especially challenging.
As development progressed, my confidence steadily returned. Each completed feature strengthened my understanding of the framework and improved my ability to troubleshoot independently.
I’m particularly proud of successfully rebuilding the routing system and implementing JSON-based content management, making it much easier to add new products and updates.
Without a shopping cart or online payment system, I needed a simple yet practical way for customers to place their first orders.
The ordering flow is intentionally straightforward.
Managing orders manually allows me to validate customer interest and start selling products immediately while preparing the future e-commerce version of the website.
PéperTree helped me grow both creatively and technically.
Throughout this project, I learned how to:
PéperTree is an evolving project.
Future improvements include:
The long-term goal is to progressively transform this MVP into a fully featured e-commerce platform while preserving the warm and welcoming personality that defines the brand.
PéperTree is much more than a development exercise.
It combines my passion for illustration, art direction, UX/UI design, and front-end development into a single project.
Building this first version allowed me to demonstrate my ability to learn independently, quickly regain technical skills after a long break, and transform an idea into a real product that is available online today.
As the brand grows, PéperTree will continue evolving alongside my skills, new sticker collections, and future features.
