Background & Approach

I'm Ella. Over my life I’ve lived in Switzerland, Sweden, and several Finnish cities, which has shaped how I see culture, people, and communication.I love going to the gym, knitting and crocheting, playing video games, reading and listening to music. These interests reflect my patience, attention to detail, and love for interactive and visual experiences. My passion for movies and series led me into the VFX industry, where I spent four years working with visuals in a production-driven environment. Over time, I became increasingly interested in how visual decisions affect clarity, usability, and user experience, which ultimately led me to pursue UX/UI design studies.My career, studies and hobbies have given me a fantastic set of skills which are useful for many different projects: an eye for color, composition, and visual hierarchy, a strong problem-solving mindset, and a passion for designing experiences that balance clarity, usability, and visual polish.

What’s in my headphones right now

TerraBuild Dashboard UI

• UI
• Desktop

A role-based dashboard concept designed to translate complex industrial data into clear, connected views across organizational levels.

• View project

Alt Zone - Website UI

• UI
• Website
• Mobile

An educational mobile game concept that uses gameplay and symbolic characters to teach psychological concepts to students and educators.

• View project

My visual effects journey

From 2017 till 2019 I studied visual effects (VFX) in Jönköping University in Sweden. I chose to specialize in compositing. Right after graduation I got a job at Troll VFX - a visual effects studio located in Tampere, Finland. There I worked as a compositor till 2023. My job included removing elements and integrating 3D elements into footage and removing green screens.Projects I worked on include: Shadow Lines, Supermarsu, Sisu, Steeltown Murders and Havoc.

My Role & approach

Visual UI design grounded in user insights

I was primarily responsible for the visual UI design of the application and for creating and maintaining the design system. I defined the visual direction of the interface and translated ideas into clear, intuitive and consistent UI solutions, with a strong focus on structure and usability.I designed wireframes and interactive prototypes in Figma, applying component-based thinking to ensure consistency and efficient iteration. Alongside visual design, I actively participated in user interviews and usability testing, using insights from these sessions to refine UI decisions.Throughout the project, I iterated designs based on feedback from users and collaborators, balancing visual quality with usability. This approach helped me strengthen my ability to combine visual UI design with user-centered thinking.

Design system components and UI patterns used in the project

Design system variables

Concept Exploration & Design

Clear hierarchy and categories help with navigation on the home page

The home page was designed together. We wanted clear and easy to understand categories and a big hero section to welcome the user to the page.From the get go it was clear to us that we would choose a tab bar. It showcases the most important features whilst the hamburger menu hides the less used features.

Small changes made a big impact

The cards on the front page were all changed to long rectangles. This way the user won't get confused by the different card shapes and hierarchy.See all -buttons were added for a clear indication that there is more to see.The project carousel got dots at the bottom to show the user how many items there were and arrows to show which way they can move.

My first concept of the home page

An improved version of the home page

Final version of the home page

The removal of "New Features" and the redesign of the tab bar

The "New Features" (fin. "Uudet Toiminnot") section was removed from the front page; the first testers did not find it necessary, and the section took too much attention away from other content. Instead, we added "Favorites" so that them user can access the quickly and easily. It was later on changed to "My favorites" ("Omat suosikit") to make it more clear.

We redesigned the navigation bar to lighten, soften and make it more interesting. The “Other” heading on the nav bar was replaced with “Menu” due to feedback from a teacher.

Easy and clear search with pleasant colors

In the general search, users can see which articles, projects, video tutorials, and tree species are related to the word they searched for.

Spitballing different looks

When I started designing the search result cards, I tried different iterations. In the end we decided to stick with the light colored cards with the exception of the Wood species -cards. Those results were a little different from the articles and projects and so it felt important to put emphasis on them. The wood library was a big part of this project after all.

Categories and clear statements help the user follow along

The text above the search bar tells the user how many results they got with their search word for quick and easy usability.The static search bar shows what has been searched for clarity. The button bar underneath show the categories, with the chosen button having a fill color of dark green whilst the others are a light color. This makes it easy for the user to see which category they are on.

Search bar animation for motion

I wanted to animate the top navigation bar's search bar. However due to Figma's limited animation and prototyping, I animated the search bar in Jitter and then used that animation in Figma to create the motion I wanted.The search bar, as it opens, says "Search from Puupankki". A completely blank search bar could cause confusion and the fear of "blank space" within users. However in the future, it could be even more usable if the text instead gives examples of what could be searched.

Keeping the favorites simple and easy to use

I designed the favorite page with usability and simplicity in mind. The user can add favorites throughout the app and they can create new files through their own favorites page. The search bar at the top adds accessibility and makes navigation faster and easier.

Keeping up with the design system

The Favorite cards and files follow the same visual language as all the other cards in this app. The button has a plus icon for added accessibility.The favorites page can be accessed from both the front page and the tab bar's Menu for added usability. The Menu also shows the user which page they are on for accessibility's sake.

A Favorite card

The user's files for favorites

The Menu shows the user's location

There is definitely a need for an application/website like Puupankki. Currently the information on wood materials is too scarettered and reliable, up-to-date info is hard to find. However, it became clear that collaboration with wood industry professionals is crucial. They know what kind of information is needed and what kind of articles and projects are wanted.We also came to the conclusion that perhaps there should be a separate site for hobbyists. They will need different kind of information and more hands-on learning. This could be made through the user choosing a profile for themselves which will then guide them to the right site.

This was the first project where we were also a part of the user experience research. It was incredibly helpful to learn about how to conduct the tests as well as which kind of questions one should ask from the testers.This client project was also an excellent opportunity for me to learn more about creating a design system. While my strengths lie in visual design, creating and upholding a design system so that everyone in the team can easily use it, is no easy feat. Nonetheless, I enjoyed designing a visual look for this project like deciding on the colours and the layout.

My Role & approach

Visual UI design with a focus on accessibility and flexibility

I worked as part of a collaborative design process, with my main responsibility being the selection of the color themes used in the interface. My focus was on ensuring that the color choices supported clarity, consistency and the overall tone of the product.The project emphasized close collaboration and alignment with others rather than individual ownership of the visual design. Due to the short timeline, the work focused on practical execution and teamwork rather than a full UX process.

Light and dark themes for the UI

Competitors were overwhelming users with too much information

When we began our research, we explored existing smart-home applications to understand what worked and what didn’t. A clear pattern emerged: many interfaces were overloaded with settings, dense information, and a heavy number of UI elements competing for attention.However, there were strengths too. Some apps used simple bento-box layouts, room-specific controls, and darker themes that reduced visual strain. These insights gave us a starting point for shaping our own concept: keep things structured, calm, and intentional.

Focusing on what truly matters —
and honoring sensory needs

ESSI’s previous user testing helped us identify the core elements users needed most on the home view:
The weather app, reminders. light and temperature controls as well as the music player.From there, we added features that supported personal comfort and accessibility—such as customization settings, a dark/light mode toggle, and a Do Not Disturb button placed within easy reach on the bottom navigation bar.To deepen our understanding, we also studied how different sensory profiles respond to visual and informational input. This research led us to a guiding principle:Provide only the essential information to avoid overwhelming users—while giving them enough control to personalize the interface to their comfort level.

Home view v3

Home view v6

Final version in light theme

Final version in dark theme

Concept of the player

Interactive prototype of the music player

Music settings stayed with the music

I placed the music settings within the player to align with common practice and kept them simple to ensure ease of use. The toggle switches were brought closet to their titles to make it easier for the user to see which toggle switch is which.

Concept of music settings

Final design of music settings

Users can choose the speaker

I added the possibility for the user to choose which speakers the music comes from for a quick and easy user experience.

Settings allow customizing the experience

I designed the settings based on common practice in other devices. The settings allow for a lot of customization and better accessibility.

The Display & Theme settings allow the user to customize the UI, like theme, brightness and night state.

Sound & Notification settings include sound and notification settings for further customization.

With the Accessibility settings the user can change the font type and size as well as contrast. The user can also customize the navigation bar.

The biggest challenge in this project was the very short deadline. We only had a little less then two months to design the interface. The user testing that had been done before had only a few people in it and they tested a very bare-bones version of the UI. There was not much to go on. However, this was still a good lesson in designing and creating. And making sure that everything we do is accessible and suitable for sensory sensibilities.

The idea that in the future we could have tablets integrated to doors so that we can control everything in our house like lighting, music and temperature, is quite interesting. And then adding personal things like reminders and a calendar to that, it's like having a personal assistant at home. It required some imagination on our parts, since nothing like this has been done. But smart homes already a thing, so this is just s step up from there. Definitely a fun project.

My Role & approach

UI-led design within a shared design system

I worked as a UI / Lead UI designer on the ALT Zone game website, focusing on visual execution and consistency. I designed the interface using an existing design system as a foundation, ensuring alignment with the brand while further developing the visual look together with the team.As part of the project, I collaborated closely with developers and learned to use GitHub to support the design-to-development workflow. My role emphasized clear UI decisions, consistency and effective collaboration rather than a full UX process.

Early concept

Three card layout with vibrant colors

Final design with a two card grid-layout

Back button

Character stats

Character introduction

Final version

I ended up going for a very simple card layout with Youtube videos embedded into the cards. This allows the user to immediately watch the Youtube video linked to the song without the need to move to a different site.A back -button was added for ease of use and also the possibility to organize the songs. The side menu helps the user change collections quickly.

What I learned from this project was to prioritize clarity and usability over aesthetic density. And It's so important to think about usability every step of the way. Sometimes you have to compromise on cool animations or simplify your designs to keep them more usable and accessible - and easier for the devs to code.When I became the lead, it became clear to me quickly how important it is to have weekly meetings to keep up with the project. My input was often needed and wanted by my team and suddenly I had to make decisions for everyone else. By then however, I was so in tune with the design system that I could quickly see whether or not something would look good and in line with the brand. When it came to usability, I would draw from my studies as well listen to my team members, the developers and the project leaders. I have learned that multiple pairs of eyes are better than one.

However, due to this project being run by volunteers and students, the deadlines were long and there were no set ways of working or workflow guidelines. That meant that materials were often hard to find, communication was occasionally a little broken and things changed constantly. Seemed like most of the time, no one knew what was supposed to be on the website and when. This made navigating the project difficult but by asking enough questions I always managed to find answers.

My Role & approach

Visual UI design for a connected, role-based dashboard system

I was primarily responsible for the visual UI design of the TerraBuild dashboards, with a particular focus on the global leadership view.
In addition, I created and maintained the design system, ensuring consistency and scalability across all dashboard roles.I defined the overall visual direction of the interface, translating complex industrial data into clear, structured, and readable UI solutions.
The design emphasizes strong hierarchy, clarity, and consistency to support decision-making at different organizational levels.All dashboards were designed and prototyped in Figma, using a component-based approach to enable efficient iteration and alignment between views.

Design system used in the project

Level 5 — Cell-level operations

Factory worker dashboard

Level 3 — Factory-level management

Production manager dashboard

Level 1 — Global leadership

Executive dashboard

Level 5 — Cell-level operations

Factory worker dashboard

Level 3 — Factory-level management

Production manager dashboard

Level 1 — Global leadership

Executive dashboard

Early concept image

Design challenge

Complex industrial data without a shared structure or perspective

Industrial environments generate large amounts of data, but that data is often fragmented across systems, tools, and organizational roles.
Without a shared structure, information becomes difficult to interpret, compare, and act on - especially across different levels of the organization.For TerraBuild, the challenge was to imagine how the same data could serve very different users, from factory operations to global leadership, without creating disconnected or inconsistent interfaces.
The problem was not a lack of data, but a lack of clarity, alignment, and visual consistency in how that data is presented.

Design solution

A connected dashboard system built around shared data and role-specific views

The solution was to design TerraBuild’s dashboards as a connected system, rather than separate, role-specific tools.
All views are powered by the same underlying data, while the interface adapts to the needs and responsibilities of each role.A shared design system ensures visual consistency across dashboards, making it easier to move between perspectives and understand how information relates at different organizational levels.
This approach supports transparency, alignment, and clarity - without overwhelming users with unnecessary data.

Finished view of level 5

Finished view of level 3

Finished view of level 1

Research focused on building contextual understanding through benchmarking, secondary research, and targeted feedback.
Existing industrial dashboards, articles, and published interviews were used to identify common patterns, strengths, and limitations.

AI tools and secondary research supported ideation and structural exploration throughout the project, alongside iterative feedback from the client, Forge Digital.
Key ideas were also validated through discussions with a factory professional experienced in both operational and supervisory roles.

Benchmarking

Design exploration

Turning shared data into meaningful, role-based experiences

We approached the TerraBuild dashboards as a single connected system, built on shared data rather than isolated views.
Instead of designing separate tools for each role, we focused on how the same information could be interpreted differently depending on responsibility and context.I concentrated especially on the global leadership dashboard, where the challenge was to distill complex operational data into clear, high-level insights.
The goal was to support quick understanding, trend awareness, and confident decision-making without overwhelming the user.Throughout the design process, we emphasized recognizable structures and patterns across dashboards.
By keeping layouts, components, and visual logic consistent, each view feels connected—while still prioritizing the information that matters most for its intended audience.

Final view of Global dashboard

Menu opened and closed

Designing the global dashboard for focus and flexibility

When designing the global dashboard, we focused on giving decision-makers space to think.
The interface is intentionally restrained, allowing key information to take precedence without unnecessary visual noise.The side navigation is designed to support multiple financial and strategic categories that a CFO or executive team member might need.
At the same time, minimizing the navigation frees up valuable screen space, ensuring that the data itself remains the primary focus.

Familiar structures, different insights

To maintain continuity across roles, KPI cards follow the same structural logic as those used in the production manager’s dashboard.
While the visual pattern remains consistent, the content shifts to reflect leadership-level metrics such as financial performance, efficiency trends, and long-term indicators.This shared structure helps reinforce trust in the data, while reducing cognitive load when moving between dashboards.

Same structure, different decisions

We designed the dashboard system with a focus on clarity, hierarchy, and visual calm.
The overall look is intentionally light and spacious, allowing complex data to breathe and remain easy to interpret during prolonged use.The color palette is built primarily around calm blue tones, creating a stable and harmonious foundation for data-heavy views.
Blue tones form the visual backbone of the system, supporting clarity, hierarchy, and extended use.
Orange is introduced only where strong differentiation is required, ensuring that secondary actions remain clearly distinguishable from primary interactions.
Neutrals are used for text, borders and shadows for added contrast and depth.A core goal of the design system was flexibility.
While TerraBuild serves as a fictional example, the system was designed to be easily adapted to different company brands by adjusting colors, typography, and visual tokens—without changing the underlying structure.

Component library

Color palette

Typography, depth, and interaction

The heading typeface, Urbanista, was chosen for its modern, rounded character, which complements the soft corner radii and contemporary feel of the UI.
For body text, Open Sans was selected for its proven readability, ensuring that dense information remains accessible and easy to scan.The system includes three button types, each featuring subtle 3D depth through borders and shadows.
This approach aligns with the overall interface language, where gentle borders and elevation are used across components to create a sense of depth without visual heaviness.Icons are consistently paired with text to improve accessibility and clarity, supporting faster recognition and reducing cognitive load—especially in data-dense views.

Urbanist

Open Sans