Allel Electrical Consultancy Website
Project Vision
The electrical consultant firm Allel Elektrokonsult AB has hired me to deliver a website that would represent them in a suitable manner. The firm was grounded in 1968 and has its office in Stockholm. Since then, Allel has delivered quality services at an affordable price. Allel offers project planning for electrical and telecommunication installations (fire alarms, safety alarms, illumination systems, data networks, positioning systems) and provides electrical board authorized inspectors.
Through their website they want to retain their current customers as well as attract new customers. They want to offer price estimates to their clients, organize and update the information present on the website easily, all while presenting themselves as a reliable contractor.
Target Groups
Previous clients that Allel had include municipal housing companies such as Stockholmshem, Svenska Bostäder and Sollentuna kommun. They would like to attract more private electricians as customers and offer them project planning and sketching of electrical systems. In summary, the target group is people who work in the industry, as well as any establishment in need of professional electrical consulting services.
An intended user would also be the employees at Allel, who would like to easily update the projects on the website.
Basic Requirements & Unique Selling Points
- Uniform design: Allel would like a uniform website design that signals professionalism and represents their company values. They would like to be able to showcase their work to previous, current and future customers.
- Search engine optimization (SEO): They want to appear on the front page in search results for electrical consultants in the Stockholm area.
- Cost calculator: Potential customers should be able to calculate preliminary costs of services. This is a unique selling point (USP), as no other similar establishment currently offers this.
- Internal system: Allel would like an internal system attached to the website for updating and managing projects. This includes hosting high-resolution images and sketches without impacting performance.
JAMstack
The application uses the JAM architecture. JAM stands for JavaScript, APIs and Markup. It removes the web experience layer from data and business logic, where 3rd party services are consumed through APIs. To do this the application uses a headless CMS (content managing system) that is an API driven platform for structured content. All the technologies used in this project are modern at the time the project is expected to be deployed.
Next.js
Next.js was chosen because of the SEO it provides through server-side rendering (SSR). When the pages are rendered on the server, all content is included in the HTML code sent to the client, allowing search engines to index the content more efficiently. Next.js also supports dynamical rendering. With the help of Next.js data can be easily structured, which makes it easy for search engines to know the contents of the website.
Tailwind CSS
Tailwind CSS was used to build a responsive, visually appealing and consistent webpage. Tailwind CSS has both predesigned classes to style CSS, as well as the ability to change the default value of these classes. By using Tailwind CSS's colour contrast classes, the web pages are user friendly and accessible to users with disabilities.
Sanity
Sanity uses an editing environment called Sanity Studio, that uses a custom schema with JavaScript. JavaScript is also used to add field validations, organize documents and set initial values. Sanity Studio was chosen for its scalability, image upload/edit support, and real-time collaboration. It uses a cloud-based data storage called the Sanity Content Lake, accessed through the Sanity API.
DigitalOcean
DigitalOcean was used to host both the main website and the CMS. It provides developer-friendly features like firewalls, SSH keys, and 2FA, while offering scalable infrastructure and access to APIs.
