UI Design Case Study:
TRACKR Website

This project is a design proposal for TRACKR Company’s website and is inspired by the content and structure of Mainteny Company’s website.

 

Role: UI Designer

Duration: June 2024

Mentorship: This project was developed during my internship at Ideatolife Company, under the guidance of my supervisor, Mr. Bassel Hajj Hassan, who provided valuable insights and feedback throughout the execution of my ideas.

Project Overview

Product:

TRACKR Company provides elevator maintenance service software which optimizes business operations by reducing paperwork, boosting profit, minimizing human errors, and facilitating job creation.

Goals and Objectives:

The primary objective was to design a website with a user-friendly interface that stands out in the elevator maintenance industry. The design needed to be efficient and deeply connected with users through simple navigation and creating a satisfying experience.

Encouraging customers and employees to use TRACKR’s software and embrace this new method of communication for task assignments, employee and costumer management, etc., instead of the previous outdated paperwork systems.

Interface Design

Design Concept:

I aimed to incorporate the familiar experience of riding an elevator into the website’s interactions. The goal was to bridge the gap between the real-world experience and the virtual interface, creating a sense of familiarity for users while introducing the new software.

Design System:

Developed a consistent and cohesive design system, harmonious to the brand’s image, that integrates the elevator theme subtly and effectively.

design system

Animations:

Implemented engaging background animations featuring tall buildings with illuminated blocks moving up and down, mimicking elevator rides.

Interactive Elements:

Incorporated the illusion of elevator doors opening when navigating between tabs, providing an engaging transition to different screens.

UI Screens:

Created intuitive UI screens that enhance the user experience with smooth navigation and clear visual hierarchy.

Desktop Screens:

desktop ui

You can check out the prototype by clicking here.

Mobile Screens:

mobile screens

You can check out the prototype by clicking here.

Takeaways

This project taught me that consistency in design extends beyond the tangible elements defined in a design system. It can also include the intangible presence of feelings and experiences derived from users’ memories.

Back to the Top