<p>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.</p>

hero-logo-big-gray-(1)

<p><span style="color: #D43334;">Utily App</span>: Transforming <br>the Electrician Job Market</p>

<p>Utily is a mobile application designed to revolutionize the way electricians find work and connect businesses with reliable electrical contractors. This case study details the design, development, and implementation of the Utily app, encompassing UX/UI design using Tailwind CSS, cross-platform mobile app development using Ionic and Capacitor, and backend development using Laravel.</p>

<h2>Objectives</h2><p>The development of Utily was driven by a distinct mission: to simplify and enhance the way businesses and electrical contractors connect for service needs and job opportunities. Our initiative focused on two primary groups in the electricians industry: businesses in need of quick, reliable electrical services, and electricians seeking more job sources. The objective was to streamline this connection process, addressing the common challenges of reliability, speed, and convenience faced by both parties, ultimately facilitating a smoother resolution of electrical issues.</p>

utily-multiple-screens

<h2>Challenges</h2><p>Our journey was filled with challenges, including creating an intuitive interface to match electricians with jobs and ensuring the app works well on all devices. Building a detailed admin panel for managing users, jobs, subscriptions, and payments was a big task that needed advanced development work. Also, adding a reliable payment system and setting up push notifications to keep users updated were significant technical tasks.</p>

Initial stages involved extensive market research and persona development to understand the target users' needs and preferences. Joe, a fictional character representing a small electrical contractor business owner, served as a guiding beacon throughout the development process.

Research and Planning

After establishing a clear direction based on our research, we moved on to sketch low-fidelity wireframes. This step allowed us to lay out the user interface's basic structure and flow, facilitating early discussions and refinements before advancing to more detailed designs.

Low-Fidelity Wireframes

utily-wireframes

Transitioning from low-fidelity wireframes to high-fidelity designs, we established a minimal brand book and standards, carefully selecting typography, colors, and spacing to shape the app's overall look and feel. This design phase prioritized designing key pages first, then expanding to secondary pages, ensuring a consistent and engaging user experience while incorporating client feedback throughout the process.

UX/UI Design

The mobile development phase saw the translation of our high-fidelity designs into a fully functional cross-platform application. By leveraging the Ionic framework and Capacitor for native functionality, we created a seamless experience across different devices and operating systems. This phase emphasized clean coding practices, performance optimization, and a modular architecture to facilitate future enhancements.

Mobile Development

Using Laravel, we built a strong and scalable backend system. This included creating APIs, integrating databases, and setting up secure logins. We also developed a full admin panel within the same Laravel instance as the API. This panel lets the client manage everything about the mobile app: users, jobs, subscriptions, payments, and more. It has its screens, actions, and routes, making it a complete tool for app management.

Backend Development

We integrated Stripe to provide a secure and seamless payment experience. This addition involved meticulous testing to ensure transactions were smooth, reliable, and user-friendly, enhancing trust and convenience for both electricians and businesses.

Stripe Payment Integration

An extensive phase of quality assurance followed, where we meticulously tested the app across multiple devices and platforms to ensure flawless functionality, user experience, and security. This process helped identify and rectify any potential issues before the public release.

Quality Assurance

Incorporating client feedback was an integral part of our iterative development process. We engaged in continuous dialogue with our client, making necessary adjustments and improvements based on their insights and suggestions. This collaboration ensured that the final product truly resonated with the client's vision and user expectations.

Client Feedback

We launched Utily carefully, checking everything to make sure it worked smoothly for users, from signing up to finding jobs. After launch, we kept improving it based on what users needed.

Launch

<h2>Outcome</h2><p>Utily is now a sleek, efficient mobile application that epitomizes the ease of connecting electricians with job opportunities. The app&#039;s design prioritizes user engagement, with features tailored to simplify the job posting and application process. Feedback-driven enhancements continue to elevate the platform, promising a future of ongoing improvement and expansion.</p>

utily-iphone-mockup

<h2><strong>Conclusion</strong></h2><p>The development of the Utily app not only met but exceeded its objectives, seamlessly connecting electricians with job opportunities and simplifying how businesses find skilled contractors. Overcoming challenges like crafting an intuitive user experience and integrating a comprehensive admin panel showcased our team&#039;s problem-solving prowess and technical expertise. This project has taught us the critical importance of aligning technology with user needs, leading to significant operational improvements and client satisfaction. With positive initial feedback, Utily is poised for future enhancements to further refine its service offerings. We&#039;re excited about the continuous evolution of Utily and invite you to discover how our innovative solutions can transform your business.</p>

cta-1

<p>A new project on the way? <br><strong>We’ve got you covered.</strong></p>

utily-cover-2

utily-mockup-3

utily-matched-jobs

On-Demand Services

Business

Explorer

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 Mobile App Development:  Revolutionizing the Electrician Job Market

Project Management

Wireframing

Product design

Custom Web Applications

Capacitor

Ionic

Laravel

Stripe

Tailwind CSS

Pusher

OneSignal

Revolutionizing the Electrician Job Market

<p>Reimagining Simple Code with a full digital makeover, showcasing engaging web design, refreshed branding, and revitalized social media to highlight our tech expertise and creative flair.</p>

<p>Simple Code <span style="color: #D43334;">Brand Transformation</span></p>

<p>Based in Croatia, our digital agency is a hub of creativity and innovation. We&#039;ve established our presence in the digital landscape by <strong>providing a wide range of services, from graphic and product design to development</strong>. Our dedication to delivering excellence in every project sets us apart.&quot;</p><p>At the heart of our agency, passion fuels us, and a team of seasoned experts embraces the digital world&#039;s challenges. Our mission is straightforward: to <strong>develop impactful digital solutions</strong>. From creating memorable experiences and engaging user interfaces to designing visuals that narrate compelling stories, we possess the expertise and innovative spirit required to transform any vision into reality.</p>

<h2>Challenges</h2><p>The challenge was to redefine our online presence to reflect our evolution as a digital agency. We aimed to update our brand identity and website comprehensively. This involved <strong>designing a fresh, modern logo, selecting vibrant new colors, revitalizing our social media, and creating branded merchandise</strong> like mugs and hoodies. We needed a website that not only showcased our portfolio and services but also embodied our brand&#039;s creativity and innovation. The goal was to <strong>create a digital platform that was visually appealing, informative, user-friendly, and optimized for performance</strong>, enhancing our overall brand appeal and strengthening our connection with clients and the community.</p>

<h3>Color Palette</h3><p>In redefining our brand, we chose colors that embody creativity and precision: a warm inviting yellow, a bold striking red, and a deep professional blue. These colors represent our brand&#039;s personality and ensure versatility across various applications.</p>

sc-web-colors-2

<p>Combination of primary colors on black/white background:</p>

sc-web-logo-2

<h3>Logo Design</h3><p>The new logo is a creative blend of elements representing our agency&#039;s initials, &quot;S&quot; and &quot;C&quot;. <br>It&#039;s designed to be versatile, working independently or alongside our typographical elements, ensuring brand recognition across all platforms.</p>

sc-web-logo-3

<h3>Promotional Merchandise</h3><p>Our range of branded merchandise, including items like mugs and hoodies, reflects our agency&#039;s creative spirit and helps strengthen our brand&#039;s connection with clients and the wider community.</p>

sc-web-promo-2

<h3>Social Media Assets</h3><p>We transformed our social media presence to align with our new visual identity, creating a deeper connection with our audience. Our posts, now categorized by themes like blog posts, team insights, and client stories, feature our new logo and vibrant color schemes of yellow, red, blue, and white. This strategic approach has elevated our brand communication across Facebook, LinkedIn, and Instagram.</p>

sc-web-social

<h3>Showreel Video</h3><p>Created a dynamic showreel video on the website to showcase the agency&#039;s project highlights and creative capabilities.</p>

sc-showreel-short

sc-showreel-new

<h3>Website Research and Analytics</h3><p>Our website analytics and user behavior analysis informed the new content structure, focusing on content as the primary driver. The design of the website was developed to complement and enhance the content&#039;s visual appeal.</p>

sc-web-mockup

<h3>Wireframing and Prototyping</h3><p>Hand-drawn low-fidelity design sketches are used to visualize the placement and content on each screen, starting from the initial user interface screen (the Welcome screen), extending through both homepages and encompassing every page throughout the application, all of which are wireframed.</p>

sc-web-wireframes

<h3>UX/UI Design</h3><p>Our approach to the new site was to keep it simple, modern, sleek, and content-driven. The site lacks unnecessary decorations or fluff, and we&#039;ve trimmed the text to a minimum to ensure users grasp our points without getting bored. We use images, animations, and transitions to make the content more engaging.<br><br>The Simple Code website is divided into two modes: one for clients and one for non-client visitors, often referred to as &quot;explorers.&quot;<br>Both pages employ the brand&#039;s blue color as the occasional background color. In client mode, red color serves as the accent color, and the overall color palette leans towards lighter shades of grey. In contrast, explorer mode features a yellow color and employs a bolder approach to color usage while maintaining a light overall page design.</p>

<h3>Development</h3><p>As a digital agency, we set out to create a website that raises the bar for modern design and functionality. We focused on a clean, inviting aesthetic and prioritized user-friendliness for seamless navigation and top-notch performance, boasting fast loading times and smooth page transitions. Technically, we harnessed static site generation for speed and reliability. Our Content Management System, built on Laravel, ensures easy content updates. </p><p>The site is fully responsive for all screen sizes, including large and ultra-high-resolution displays. To cater to our diverse audience, the website is divided into two sections: Business and Explorer, each with its brand color for easy navigation and tailored content. </p><p>In essence, our goal was to deliver an exceptional design, functionality, and user experience, adapting to the diverse needs of our visitors, and embodying our commitment to a well-rounded digital experience.</p>

sc-web-multiple-screens

<h2>Final Result</h2><p>After nine months of focused work, Simple Code has undergone a significant transformation. We&#039;ve refreshed our brand, enhanced our website, revitalized our social media presence, and introduced new promotional materials. This comprehensive project has improved how we engage with our audiences, catering to both business clients and curious explorers. Our website now combines speed and modernity, effectively showcasing our services and aligning with our updated brand identity.</p><p>We&#039;ve ensured that every element of our work, from design to development and social media interactions, reflects our capabilities and the essence of our brand.</p><p><strong>At Simple Code, our goal is to blend creativity with technology, deeply understand our clients&#039; needs, and go beyond mere digital product development.</strong> We&#039;re committed to making a meaningful impact in the digital space, helping our clients achieve visibility and connect with their audience effectively.</p>

cta-2-1691161335

<p>Thinking About a Rebrand?<br><strong>Let&#039;s Shape Your New Identity Together.</strong></p>

sc-web-1

sc-web-2

sc-web-5

sc-web-4

sc-web-3

Digital Services

Reimagining Simple Code with a full digital makeover, showcasing refreshed branding, engaging web design, and revitalized social media to highlight our tech expertise and creative flair.

Transforming Digital Agency Online Presence in 9 Months

Graphic design

Branding and Identity

Web development

Next.js

TypeScript

SCSS

Vercel

<p>From a basic site to a global community hub, we transformed the EAOO website into a central spot where industry professionals meet, learn, and lead together.</p>

<p>European Academy of <span style="color: #D43334;">Optometry and Optics</span></p>

<p>The European Academy of Optometry and Optics (EAOO) stands as a beacon of knowledge, innovation, and networking in the optometry and optics field across Europe. Established in 2009, it continues to support, educate, and provide resources for professionals through its membership-driven organization.</p>

<h2>Objective</h2><p>Our main goal was to make EAOO&#039;s website better and more modern to improve how users experience it. We replaced the old site with a fresh one that is easy to use and offers a special area for members filled with learning resources like videos and documents. Making the process of becoming a member simpler was key, using online forms and different payment methods to save time. We also added &quot;Academy Hour,&quot; a series of educational presentations, and updated the content system for easy edits by the EAOO team.</p><p>The old website was hard to use and unorganized, causing problems like poor navigation and missing important features. Our comprehensive makeover focused on making the site easier to navigate, faster, and more informative, especially for students and professionals in optometry. We aimed to make it clear and easy for visitors to understand what EAOO is about, how to join, and the benefits of being a member, all while attracting more people to the site.</p>

eaoo-multiple-screens

<h2>Challenge</h2><p>Our challenge was to prioritize website sections effectively, ensuring easy navigation and compliance with industry standards without compromising client needs. We aimed to design a website that not only met these standards but also fully catered to the diverse content requirements of the EAOO. Developing a straightforward membership application process was crucial, enabling administrators to manage members efficiently, from registration to approval. Additionally, we needed to create a members-only area, providing exclusive access to a wide array of educational materials. Balancing functionality, aesthetics, and user-friendliness was paramount in delivering a website that would serve as a valuable resource for years to come.</p>

We initiated the project with a discovery meeting, focusing on understanding the client's expectations, reviewing provided materials, brainstorming solutions, and sharing our initial ideas.

Discovery Meeting

We crafted basic, low-fidelity wireframes for the majority of the pages, using them as a conversation starter to align with the client's vision and expectations, with the content serving as a guide for element placement and design.

Transitioning from low-fidelity wireframes to high-fidelity designs, we established a minimal brand book and standards, selecting typography, colors, and spacing to shape the overall look and feel. This phase involved designing key pages first, then moving to secondary pages, all while incorporating client feedback.

Design

Our development phase involved transforming the design into a functional custom WordPress theme. We developed a style guide, defined CSS variables for consistency, and created various blocks, layouts, and components.

Development

With the UI elements ready, we built the entire membership flow, including application, payment, approval processes, and a members-only area, ensuring a smooth and engaging user experience.

Feature Development

We added and optimized the provided content, ensuring images and videos were optimized for quick load times.

Content Management

Rigorous testing across various devices ensured that every feature matched the design specifications and performed flawlessly.

We incorporated the client's final feedback, making necessary adjustments and enhancements before the final launch.

The website went live after thorough checks, with all forms, payment systems, and members-only areas tested and fully functional.

eaoo-full-size-screenshot

<p>Launched a cutting-edge website for a comprehensive online learning experience.</p><p>Streamlined membership processes for ease and efficiency.</p><p>Implemented an intuitive content management system for seamless updates.</p><p>Boosted online visibility and reach through improved SEO strategies.</p>

eaoo-cover-2

eaoo-tablet-mockup

eaoo-wireframe

eaoo-mockup-2

eaoo-mockup

Health & Education

Explore the newly transformed EAOO website, now a leading platform connecting eye care professionals worldwide, fostering education and leadership.

From Dated to Leading: EAOO's 2-Month Optometry Platform Overhaul

WordPress Development

Roots Sage & Bedrock

HTML

JavaScript

MySQL

From Dated to Leading: EAOO's 2-Month Optometry Overhaul

<p>From a dated Silverlight foundation to a pinnacle of modern web tech: we reinvented an app to redefine responsiveness, amplify data capabilities, and revolutionize the user journey.</p>

<p>Evolution</p>

<p>In collaboration with Envious Digital, a UK-based digital agency, we accepted the significant challenge of transitioning away from the outdated Microsoft Silverlight platform. Our journey kicked off by creating a new, supportive environment to significantly improve the application&#039;s responsiveness on various devices. Delving into the project, we didn&#039;t just fine-tune existing features; we introduced new, impactful functionalities as well. A cornerstone of our transformation was enhancing the application&#039;s usability to ensure effortless navigation and interaction for users. To complete the revamp, we also elevated the app&#039;s visual elements, aligning its aesthetics with its newly enhanced performance.</p>

<h2>Objective</h2><p>In the rapidly evolving digital landscape, the primary goal was to transition Faros Engineering Ltd. from their limited and archaic Silverlight-based application to a state-of-the-art web application. This new platform needed not just to be cutting-edge but also versatile across various devices, browsers, and operating systems. Our aim was to provide an all-encompassing solution that would make energy management, monitoring, and reporting a seamless experience for Faros Engineering and their clients.</p>

projects---chart

<h2>Challenge</h2><p>The original application of Faros Engineering was a product of its time – built with Microsoft Silverlight and exclusively tailored for Internet Explorer. This outdated configuration was becoming a bottleneck. It wasn&#039;t merely the lack of responsiveness on newer devices like tablets that was concerning; the app struggled with handling vast datasets and delivering accurate, timely reports. Additionally, the restricted nature of the platform made it challenging to incorporate modern features and integrations. The task at hand was to navigate these technological constraints and transform the application into a beacon of modern design and functionality.</p>

Our initial step was to deeply understand the technical requirements, challenges, and vision of the project. By immersing ourselves in the client's objectives, we set a clear direction for the transformation journey.

Collaboration Insight

Laying out the visual roadmap, we crafted a custom-branded design and interactive prototype. This ensured alignment with the envisioned outcome, offering a tangible representation of the final product for early feedback.

Design Initiation

To guarantee a smooth development process, we implemented CI/CD methodologies. This approach fostered efficient iterations, robust testing, and streamlined delivery.

Foundation Building

Transitioning from the limitations of Silverlight, we integrated GraphQL and optimized database queries, establishing a foundation for quick, reliable, and scalable data operations.

Backend Revamp

Prioritizing end-users, we designed modern dashboards and intuitive interfaces. This focus ensured easy navigation, precise data visualization, and a consistent experience across various devices.

User Experience Enhancement

We ventured beyond standard functionalities, introducing advanced charting techniques, multi-tabs for organized data access, and session storage to enhance user interaction and convenience.

Feature Innovations

Iterative development was at the heart of our approach. Regular prototype deliveries and a feedback-driven process ensured the final product met expectations, remained optimized, and fulfilled its envisioned purpose.

Continuous Feedback Loop

evolution-app

<p>Delivered a multi-platform web application for improved accessibility.</p><p>Increased data handling efficiency and retrieval speed.</p><p>Introduced a user-friendly admin control panel for an enhanced user experience.</p><p>Elevated Faros Engineering&#039;s status as an industry leader by optimizing operational efficiency.</p>

energy-1

evolution-2

evolution-4

evolution-1

energy-2

Energy, Utilities & Waste

Learn how we upgraded an old Silverlight app into a modern, responsive platform with top-notch data handling and an improved user experience.

Evolution: Modern Web App Transformation in 9 Months

Angular

Node.js

Express

Redis

Modern Web App Transformation in 9 Months

<p>The Pitve Wine Museum received a digital makeover through nine custom-built web applications that deliver rich media content on touchscreens of all sizes.  </p>

<p><span style="color: #D43334;">Pitve</span>: Interactive Museum Apps</p>

<p>The Pitve Wine Museum on the Croatian island of Hvar highlights the region&#039;s centuries-old winemaking traditions as one of the island&#039;s most cherished cultural landmarks. To bring this history to life for modern audiences, Simple Code was selected to develop an immersive, interactive exhibit featuring 9 custom web applications. These apps showcase diverse media to draw visitors into the story of Hvar&#039;s winemaking legacy through dynamic new educational experiences.</p>

<h2>Objective</h2><p>The goal was to build 9 web apps, each dedicated to immersing visitors in unique multimedia content. From videos to slideshows to textual exhibits, the apps were designed to bring the museum&#039;s artifacts and winemaking history to life through dynamic storytelling. To reach broad audiences, Simple Code engineered the apps for seamless integration across touchscreens ranging from 24 to 43 inches. The exhibits were presented in both Croatian and English, ensuring accessibility for tourists and locals alike.</p>

pitve

<h2>Challenge</h2><p>The project posed several unique challenges that needed to be addressed seamlessly. Ensuring the applications ran effectively on multiple touchscreen sizes without internet access was a key technical constraint. Additionally, each app had to autostart with the computer and feature exit restrictions to secure the user environment. On top of these operational necessities, providing content in both Croatian and English was essential to cater to a diverse audience.</p>

Before diving into development, we engaged in thorough analysis of project requirements, hardware specifications, and design elements, raising any clarifying questions to ensure full alignment.

Preliminary Analysis

We laid the groundwork for creating 9 distinct applications from a unified codebase. Content files and a shared repository for all reusable blocks and components were established at this stage.

Project Setup

The sliced design assets were optimized for specific screen resolutions, with the addition of touch actions to enhance interactivity.

Design Slicing and Optimization

At this phase, we developed the code necessary for the apps' specialized features, such as autostart, exit restrictions, and other operational necessities, ensuring a secure and user-focused environment.

Specialized Coding

With the user in mind, the apps were designed to offer intuitive interfaces, easy navigation, and valuable content to provide both utility and engagement.

Through multiple rounds of testing, we ensured that the apps functioned flawlessly across varying touchscreen sizes and languages, adhering to all specified requirements.

Iterative Testing

The project culminated in the deployment of all 9 applications on the museum's hardware, confirming their optimal functionality from autostart features to exit restrictions.

pitve-screenshot

<h2>Outcome</h2><p>The project culminated in a suite of 9 interactive web applications that effectively engage and educate visitors at the Pitve Wine Museum. Each app is optimized for various touchscreen dimensions, includes autostart features, exit restrictions, and is accessible in both Croatian and English. The successful implementation of these applications has raised the bar for interactive experiences in cultural heritage institutions.</p>

<p>Interested in Transforming Your <strong>Visitor Experience?</strong></p>

pitve-featured

pitve-thumb-3

pitve-thumb-1-1693311996

pitve-thumb-4

pitve-thumb-2-1693312004

pitve-thumb-5

Tourism

Explore how we enhanced the Pitve Wine Museum with 9 interactive apps, optimized for multiple touchscreens and languages, to boost visitor engagement.

Pitve: 9 Interactive Museum Apps for Enhanced Learning

9 Interactive Museum Apps for Enhanced Learning

<p>Transforming fitness through StrengthEQ: A gamified fitness app aiding users in tracking progress, analyzing strengths, and competing globally.</p>

<p>Strength<span style="color: #D43334;">EQ</span></p>

<p>StrengthEQ motivates users to exercise by providing in-depth tracking, uncovered strengths and weaknesses through detailed analytics, and facilitating healthy competition through comprehensive leaderboards. This multi-faceted fitness platform empowers individuals to thoroughly evaluate performance, set customized goals, and actively engage with the global community.</p>

<h2>Objective</h2><p>The primary aim was to develop a comprehensive and engaging fitness app, StrengthEQ, tailored for both novices and seasoned fitness enthusiasts. This platform was envisioned to not only track a user&#039;s progress but also provide competitive and gamification elements to bolster user commitment. By integrating detailed analytical tools with interactive features, the app aspired to offer a holistic overview of one&#039;s fitness progress and areas for improvement.</p>

strength-2

A gamified fitness app, aiding users in tracking progress, analyzing strengths, and competing globally.

Employee Spotlight

Choose Your Story

How do you describe your role at Simple Code?

What is your favorite part about working in Simple Code?

What are the typical challenges at your job? How do you overcome them?

What do you enjoy doing in your free time?

Join our Team

Let's Start a Conversation.