Electric Engineering Website

Overview

The department uses disruptive technologies and state of the art equipment. In order to promote themselves internally across the organization, an accessible and appealing website was requested.

Objective

Create a website that is easy to navigate and highlights the high-tech work that they use.

Users

Primary users are engineers, administratives and any person who can access the website and has interest in their job.

Pain points

In this case, there were no special needs from the user. The most challenging aspect was actually learning how to code!

Process

Understand & Research

Colors and font used in the brand "Vold"

The brand Vold is a company that manufactures automotive components. Its main area is electrification of vehicles. The brand uses a lightning as a logo and these brand components. I also used a moodboard to get inspiration in this new field.

Wireframe & Prototype

Wireframes of the web in digital tool

Digital Sketch

High fidelity prototype in Adobe Xd

Adobe Xd

Design Decisions

In this project, as the sole UI Designer, I had to decide where to place the navigation menu. I proposed two options: left and vertical or top and horizontal. In the end, based on company’s users Mental Models, they expected the website to look like and act like a traditional website. If the bar was on the left, it could make them think it is an application, which is not the case.

In addition, as I had to learn how to code it, the most optimal and easiest way to develop it was to leave it at the top.

Left Menu website proposal
Top bar website proposal

Results

Screenshots of the code

Screenshot of VSCode Launch

Visual Studio Code Launch

Screenshot of HTML code

HTML

CSS

Website in Google Chrome

Screenshot of the website in a browser
Screenshot of the website in a browser
Screenshot of the website in a browser

Personal Learning

HTML Logo
CSS Logo
Bootstrap Logo

At the same time of the design, I took a course in HTML & CSS. This course allowed me to reach an intermediate level of Front End. In addition, although it wasn’t included in the course, I learned how to use a popular framework called Bootstrap.

This project allowed me to get acquainted to the development process of User Interfaces and it has allowed me to develop a complete vision of them.

Are you interested?

Thanks for visiting my portfolio! If you want more information about me or any project, don’t doubt about contacting me. You can also check my social media and CV.