Simple Code

Simple Code Brand Transformation
We gave our agency a complete digital makeover – refreshed branding, an engaging new website, and a stronger social media presence to showcase our creativity and expertise in tech.

Based in Croatia, Simple Code is a digital agency that creates modern web and mobile solutions. Over the years, we’ve worked hard to deliver quality in every project, but our brand needed to show how much we’ve grown. This project was all about updating our look to match who we are today and making it easier to connect with clients and our community.

Location: Croatia

Industry: Digital services

Duration of the project: 9 months

Services: Graphic design, Branding and identity, Wireframing, UX/UI Design, Web development, Backend development, Quality assurance, Project management

Technologies: Next.js, TypeScript, SCSS, Laravel, Vercel

Objective

Our goal was to refresh the Simple Code brand to better represent who we are today. This included creating a new logo, choosing bold new colors, redesigning the website, improving our social media presence, and introducing branded items. The website needed to show off our portfolio and services while being fast, easy to use, and visually appealing.

The biggest challenge was creating a brand and website that showed who we are – creative, professional, and innovative. We needed to combine design and functionality into a smooth experience. The website required two modes: one for clients and one for general visitors, each with its own style. It had to load quickly, work across all devices, and be easy to update in the future. Social media posts and branded items also needed to follow the new style for consistency.

1. Branding and Identity

• Color Palette: We chose three main colors to represent our creativity and precision: a warm yellow, a bold red, and a deep blue. These colors are used consistently across the website, social media, and promotional items.
• Logo Design: Our new logo combines the letters "S" and "C" in a clean, modern way. It’s versatile enough to work alone or with text, making it easy to use on all platforms.

2. Graphic Design

• Promotional Merchandise: We created branded merchandise like mugs and hoodies. These items help strengthen our identity and connect with clients and the wider community.
• Social Media Assets: We redesigned our social media presence to match the new brand. Posts were grouped into themes like blog posts, team stories, and client insights. The updated logo and color scheme gave our Facebook, LinkedIn, and Instagram a consistent and professional look.
• Showreel Video: We added a dynamic video to the website to highlight our projects and show our creative capabilities.

3. Web Design and Development

• Website Research and Analytics: We studied how people used our old website to plan a better structure for the new one. The focus was on making the content easy to find and engaging.
• Wireframing and Prototyping: We started with hand-drawn sketches to map out every page’s layout. These sketches were turned into detailed wireframes to refine the design before development.
• UX/UI Design: The new site is simple, modern, and content-driven. There’s no unnecessary clutter, and the text is kept short and clear. We added images, animations, and smooth transitions to make the experience more engaging. The site has two modes:

1. Client Mode: This mode uses blue as a background color and red as an accent. The design is light, clean, and professional, with shades of grey to keep it subtle.
2. Explorer Mode: This mode is for general visitors and uses yellow accents. The design is bolder and more vibrant but still easy to navigate.

Development
We built the site using Next.js for fast performance and reliability. Static site generation ensures quick load times, and a custom CMS built with Laravel makes updates easy. The website is fully responsive, working seamlessly on all devices, including ultra-high-resolution screens.
 

Result
After nine months, Simple Code has a fresh new look that reflects our growth and creativity. Our updated logo, bold colors, and modern website show who we are today.

The website is fast, easy to use, and works perfectly on all devices. It has two tailored modes for business clients and general visitors. Our redesigned social media posts and branded items help us connect with our audience and clients.

This transformation shows how we combine creativity and technology to create meaningful experiences, helping us build stronger connections and make a positive impact in the digital world.

Utily: Transforming the Electrician Job Market
Transforming how electricians connect with job opportunities, Utily revolutionizes the on-demand services industry, making it simpler and faster for professionals to find work and for businesses to find skilled electricians.

Utily is a mobile app designed to change how electricians and businesses work together. It helps businesses find reliable electricians quickly and gives electricians more ways to find jobs. We worked on everything from planning and design to development and launch, using tools like Tailwind CSS, Ionic, Capacitor, and Laravel. The app is built to be user-friendly, fast, and efficient, meeting the needs of both electricians and businesses.

Location: Chicago, USA

Industry: On-demand services

Project Duration: 3 months

Services: Project management, Wireframing, Product design, Mobile development, Backend development, Custom web applications, Quality assurance

Technologies: Capacitor, Ionic, Laravel, Stripe, Tailwind CSS, Pusher, OneSignal

Objectives
The goal was to create an app that made it simple for electricians to find jobs and businesses to hire them. The app needed to connect both groups quickly and reliably while offering features like job matching, payment processing, and notifications. It also had to support an admin panel for managing users, jobs, subscriptions, and payments, making the process smooth and efficient for everyone.

Challenge
Creating an easy-to-use app that worked perfectly on all devices was a key challenge. The app needed a clean design, a reliable payment system, and push notifications to keep users updated. Building a powerful admin panel to manage users and job data required careful planning and advanced development. Ensuring the app was fast, secure, and scalable added to the complexity.

Approach

1. Research and Planning
We started with in-depth market research to understand how electricians and businesses connect. We created a fictional character, Joe, a small electrical contractor, to help us design the app’s features. This research shaped our plans to make the app intuitive and effective for users.

2. Low-Fidelity Wireframes
We created simple wireframes to outline the app’s basic structure. This step helped us visualize the user flow and make improvements early. These low-fidelity wireframes guided our team in building a smooth and easy-to-use interface.
3. UX/UI Design

After finalizing the wireframes, we moved on to detailed designs. We created a brand guide with clear typography, colors, and spacing to give the app a consistent look. The focus was on designing key pages first, followed by secondary screens, ensuring everything looked clean and worked well.

4. Mobile App Development
In this phase, we turned the high-fidelity designs into a fully functional cross-platform app. Using the Ionic framework and Capacitor, we added native functionality to ensure the app worked seamlessly on different devices and operating systems. The focus was on clean coding practices, optimizing performance, and using a modular architecture. This approach made it easier to add new features and improve the app in the future.

5. Backend Development
We built a strong and scalable backend system using Laravel. This included creating APIs, setting up secure logins, and managing data through an integrated database. We also developed a full admin panel within the same Laravel setup. This admin panel gave the client tools to manage users, jobs, subscriptions, and payments. It was designed with separate screens, actions, and routes to make it easy to use and manage the app effectively.

6. Stripe Integration
For payments, we integrated Stripe to make transactions secure, smooth, and easy to use. This allowed businesses to pay electricians directly through the app. Every aspect of the payment process was tested thoroughly to ensure it worked reliably.

7. Push Notifications
We used OneSignal to set up push notifications, keeping users informed about new job postings, updates, and payments. These notifications helped keep users engaged and made sure they didn’t miss important information.

8. Quality Assurance
Our QA team conducted extensive testing to ensure the app worked perfectly on all devices and platforms. We checked for bugs, optimized performance, and ensured the app provided a smooth user experience. This step helped us catch and fix any issues before the launch.

9. Client Feedback
We kept the client involved throughout the project, gathering feedback and making changes to improve the app. This helped us align the final product with the client’s vision and ensure it met the needs of its users.

9. Launch and Ongoing Improvements
After testing, we launched the app and monitored its performance. We kept improving the app based on feedback from users and the client, ensuring it stayed relevant and effective over time.

A Tailored Web Solution for ZATAP’s Growing Needs
We developed a custom WordPress platform to help ZATAP manage their content easily, enhance user experience, and support their product authentication goals.

ZATAP, a product authentication platform, needed a custom web solution to improve their online presence and support their content needs. We brought their vision to life by creating a responsive and dynamic website based on Figma designs for desktop, tablet, and mobile devices. We focused on building a tailored admin area that would allow ZATAP to easily manage content, create new pages, and support their growth.

Location: Zurich, Switzerland

Industry: Business/productivity software

Project Duration: 6 weeks

Services: Web development

Technologies: WordPress Development, Timber & Bedrock, GSAP, JavaScript, HTML, SCSS, PHP

Challenges & Objective
ZATAP wanted a flexible and custom website that matched their brand and was easy to update. The designs contained different components with slight variations. The challenge was to build reusable and customizable content blocks that kept the admin area simple and easy to use. Our goal was to create a tailored web experience that looked great and was efficient to manage.

Our Approach

1. Understanding the Vision
We started by diving deep into ZATAP’s vision. We reviewed the designs for desktop, tablet, and mobile, taking time to understand every detail. Our goal was to create a tailored web solution that felt right for ZATAP and their users.

2. Planning for Flexibility
Next, we explored which default Gutenberg blocks could be reused and which custom blocks were needed. The idea was to build something simple yet flexible. We planned 20 custom content blocks that ZATAP could use in different ways without making the admin area complicated. This way, they could easily update content and create new pages.

3. Creating a Consistent Look
With a clear plan in place, we moved on to design. We created a style guide—covering colors, fonts, buttons, and image sizes—to make sure the site had a consistent look. We then used the Zimber framework and Roots Bedrock to build the theme, giving ZATAP a smooth and custom web experience.

4. Building Custom Blocks and Animations
This was where the fun began. We developed custom blocks that could be used across the website, making it easy to manage content. For a unique touch, we built a reveal slider using GSAP animations. As users scroll down, new slides appear smoothly, creating an interactive experience. We also added scroll-triggered fly-in sections, making the site feel dynamic as elements slide up into view while scrolling.

5. Reviewing and Launching the Site
Once the blocks and animations were in place, our QA team reviewed every detail. We made sure the site worked seamlessly on all devices and that it matched ZATAP’s design and needs. After gathering feedback from ZATAP and making final tweaks, we launched a custom web solution that enhanced their online presence.

Key Features

1. Reveal Slider with GSAP Animations
A scroll-based slider that reveals new slides as users scroll through the page. Using GSAP, we created smooth animations that add a unique touch to the design and engage users effectively.

2. Scroll-Triggered Fly-In Sections
The homepage includes special sections where elements, like a phone mock-up, slide up into view as users scroll. These smooth animations, powered by GSAP, help connect text and images, making the content more lively and interactive.

3. SEO & LCP Optimization
We focused on improving the site’s performance, especially the LCP (Largest Contentful Paint), to make sure the site loads quickly on both desktop and mobile. These improvements helped with SEO and made the site experience smoother for visitors.

4. Custom Content Blocks
We created 20 adaptable content blocks based on the design, making sure they were flexible and easy to use. This made it simple for ZATAP to create pages and manage content without a cluttered admin area.

5. Careers Page
We built a dedicated page for job postings, allowing applicants to send their resumes directly through the site. Applications are automatically forwarded to the client’s email, making the hiring process simple and efficient.

Outcome

• Delivered a tailored web solution for a strong online presence.
• Made content management easy for quick updates.
• Enhanced Mobile Experience for users on all devices.
• Responsive Design that looks great on desktop, tablet, and mobile.
• User-Friendly Admin Area for quick and easy site management.
• Scalable Foundation to support future growth and content needs.

Visit: Zatap

Custom management panel for a Swiss news portal
We built a custom news management panel for a Swiss media company, modernizing their entire system with new features, AI integration, and a fast, optimized backend. The solution was designed based on journalist feedback to improve workflows, enhance usability, and ensure reliable performance for daily operations.

Delivering news quickly and easily depends on simple tools that help journalists get their job done. For a leading Swiss news portal, we developed bespoke business software in the form of a modern news management panel. From planning to launch, we created a solution tailored to the client’s needs, ensuring fast performance, intuitive usability, and helpful AI tools.

Location: Zurich, Switzerland

Industry: News & media

Project Duration: 4 Years

Services: Product design, Frontend development, Backend development, Custom web applications, Quality assurance, AI integration

Technologies: Angular, Tailwind CSS, Laravel, Symfony, Redis, OpenAI, TypeScript

Tailored e-commerce platform for YOONIT Bikes
We delivered a B2B/B2C shop, product configurator, and dealer locator for YOONIT Bikes, helping automate order tracking, stock, and user management through their ERP system.

30% Sales increase

90% Error reduction

To scale its business, YOONIT needed an online store that could serve both direct customers and dealers while ensuring smooth operations. By developing a tailored e-commerce solution, we helped automate key processes, improve order management, and create a seamless buying experience. The new platform allows YOONIT to sell directly while keeping dealer relationships strong through custom pricing, an interactive dealer locator, and ERP integration.

Location: Hamburg, Germany

Industry: Retail & E-Commerce

Project Duration: 6 Months

Services: Custom E-Commerce Development, ERP Integration, B2B & B2C E-Commerce Solutions, Multilingual E-Commerce Setup

Technologies: WooCommerce, Timber & Bedrock, TypeScript, WeClapp ERP, WordPress Development

Objective

YOONIT originally sold bikes and accessories through a dealer network. The goal was to introduce a direct-to-consumer shop while keeping the dealer sales model. The new website needed to allow customers to configure and buy bikes online while giving dealers an easy way to place orders at special pricing.

The project also involved integrating the shop with WeClapp, the company’s existing business management system, to sync products, stock, and pricing. YOONIT wanted a simple and reliable system that would work smoothly for dealers and direct customers. The website also needed a dealer map so customers could easily find local stores that sold YOONIT bikes.

Challenges

Switching from a basic WIX website to a fully functional online shop required solving several issues. The first challenge was making sure B2B and B2C customers saw the right prices and product details. The multilingual setup also needed to work correctly, as some product details were not syncing in English.

We also needed to ensure that the custom bike configurator showed accurate pricing and real-time previews based on customer selections. Managing content efficiently was another key concern since the site needed to support different case studies, landing pages, and structured product details.
 

Our approach

1. Research
2. Building the e-commerce platform
3. WeClapp integration for product, order and pricing sync
4. Custom product configurator
5. Interactive dealer map
6. Making content management easier
7. Testing, launch, and ongoing maintenance

Results
YOONIT now has a fully functional online shop that works for both direct customers and dealers. The WeClapp integration ensures product information is always accurate without manual updates. The bike configurator makes purchasing easier, and the dealer map helps customers find local stores.

With a structured content system in place, YOONIT can manage and update the website efficiently without breaking the design or needing extra development work. The entire setup is built for future growth, allowing new features to be added without disrupting the current system.