Project: Customer Portal
Year: 2025
Description: The goal of this case study was to proof my design skills as a part of an application. I created a design of the dashboard of a mobility for young .
Responsibilities: Research, Interaction Design, Visual Design, Description of the design process, Presentation of the case study

Situation

In 2025 I applied for a job at a clean energy company in Berlin. To prove my design skills I needed to fulfill this design task with 1-2 days, which I did.

Task

The task was to design a responsive, one-page customer portal for solar system clients that clearly visualizes the entire journey from contract signing to system activation, provides access to relevant documents, and displays the assigned contact person.

Action

Research

One of my first steps on was to get familiar with the website of the company. I reviewed the structure of the website and the way information is presented on each page. Additionally Enpal provided me some UI elements, the logo and colors I could use for the design of the portal. I then researched other websites to get an idea of ​​how they provide information to users in their customer portals.

Ideation

During the ideation phase, I used pen and paper to visualize initial ideas. I find sketching to be one of the most efficient methods for developing ideas, especially at the beginning of the design process.

Result

Since the goal was to design a responsive customer portal, I decided to design for desktop and mobile to ensure that the design works on both device types. Due to different ideas I had I created two designs.

Version 01

Desktop	Mobile
The design is based on existing components and the color scheme of the Enpal website with focus on functionality and clarity The header contains the Enpal logo, a profile icon, the profile picture, a personal greeting “Hello Mr. Tyler” and horizontal tabs for main sections Below there is a Back-Button for navigation within a section, the product name, a combined “Order Status”/”Next Step” panel, a “Contact details” panel, a “Documents” panel and a floating contact button, which opens an overlay with the project manager’s contact information „Order status“ contains a status badge to indicated project health with additional information provided in a tooltip and a vertical progress tracker with different statuses (completed, current, upcoming) „Next step“ contains the “Installation address” and reminder button which can trigger different events (Email, Push notification (with App), WhatsApp message, Calendar reminder)	On mobile the main sections are visualized by tabs since it only contains 3 items The structure of the page follows desktop version, so information areas are arranged one below the other The “Remind me on this date” button got renamed to „Add to calendar” since this makes more sense on mobile Tooltips are also provided on mobile The floating contact button overlay contains buttons for “Send an email” and “Call” to provide easy access to project manager

Version 02

Desktop	Mobile
In this design there is a combined panel for “Order Status”/”Next Step”, “Schedule, „Installation address” and „Contact person“ The accordions below are used for secondary information and contain „Contract details“, „Documents“ and „Product details“ its order is defined by priority	Main sections are visualized by a dropdown component with yellow underline to ensure visual consistency with the tabs used on the desktop The Structure of the page follows desktop version, so information areas are arranged one below the other Due to the available space on mobile the description of the next step is located below the progress tracker