Alecaframe

#3 Place

Alecaframe – Companion App Redesign

Redesigned a Warframe companion app during a hackathon, focusing on clearer navigation, improved accessibility, refreshed branding, and a more structured interface for complex player tools. The project covered logo design, UI/UX improvements, user research, core app screens, and design delivery guidelines for implementation.

Mar, 2023

Platform

Windows, Mac

Team

Deisgner, Developer

Duration

4 days

Intro

Alecaframe was a redesign project created during the Overwolf UI Design Matchups Hackathon, where selected designers were paired with existing Overwolf app developers to improve real gaming products.

I was assigned Alecaframe, a desktop companion app for Warframe players. My task was to analyze the existing product, solve usability and visual issues, and redesign the experience across UX, UI, branding, and handoff materials. The project placed 3rd in the final Overwolf Design Hackathon results.

Landing Page

Problems

Warframe tools are powerful, but difficult to scan and use quickly

Warframe is a complex game with many interconnected systems: inventory, relics, crafting, trading, missions, timers, and progression. Players often rely on companion apps to manage this complexity, but these tools can quickly become overloaded with data, actions, and secondary information.

The main challenge was to redesign Alecaframe without removing the depth that experienced players need. The product had to become clearer, faster, and more visually structured while still supporting advanced player behavior across planning, tracking, trading, and in-game decision-making.

Hard first impression

New users could struggle to understand what Alecaframe does, where to start, and which features are most valuable during their first sessions.

Dense information

Inventory, relics, rewards, crafting, and market data created heavy screens that required stronger hierarchy and easier scanning.

Fragmented navigation

Important tools felt separated across different areas, making it harder for players to move between planning, tracking, and trading tasks.

Outdated visual system

The interface needed a more modern, consistent, and accessible visual language to make the product feel more reliable and easier to use.

Old UI

The starting point before the redesign

Alecaframe already had a strong feature set for Warframe players, but the interface felt dense, inconsistent, and difficult to scan. The main goal of the redesign was to keep the product’s depth while improving clarity, navigation, hierarchy, and visual consistency – making the app feel easier to understand and more reliable during real gameplay sessions.

Research

Understanding the game before redesigning the tool

I was not familiar with Warframe at the beginning of the hackathon, so I started by playing the game myself to understand the core loop, progression, inventory, crafting, rewards, and the amount of information players need to manage.

After that, I conducted two in-depth interviews with active Warframe players to understand how they use companion tools in real scenarios and what creates friction in their workflow.

The research helped me define the main product issues: dense information, weak hierarchy, fragmented navigation, and the need for faster access to key actions during and between gameplay sessions.

Insights

What players needed most was not fewer features, but better access to them

After playing Warframe and interviewing two active players, I found that Alecaframe’s value was already clear: players relied on it for relic profitability, trading, crafting statistics, inventory management, and faster decision-making.

The problem was not the feature set. The problem was how difficult it was to access and scan the right information at the right moment.

Rebranding

A clearer visual identity for a complex gaming tool

Research showed that Alecaframe was already a useful companion app for Warframe players, but its old visual language made the product feel dense, outdated, and harder to scan. Since the app had to support inventory, relics, crafting stats, trading data, and in-game decision-making, the redesign needed a stronger identity that could make complex information feel clearer and more reliable.

I redesigned the logo, updated the typography, rebuilt the color palette, and introduced a cleaner dark visual direction. The new logo made the product feel sharper and more connected to the sci-fi gaming context, while the typography and color system improved readability, hierarchy, contrast, and fast scanning across data-heavy screens.

The goal was not just to make Alecaframe look more modern, but to create a visual foundation that could reduce noise, support advanced player workflows, and make the product feel like a serious, trustworthy gaming utility.

Wireframing

Restructuring the product before UI redesign

Before moving into high-fidelity UI, I used wireframes to rethink Alecaframe’s structure and improve how players access key information.

Research showed that the product had strong features, but important data was spread across tabs and hard to scan quickly. I focused on clearer navigation, better grouping of related tools, and faster access to relic profitability, trading, crafting stats, inventory, profile data, and game status information.

The goal was to reduce unnecessary switching, improve scanning speed, and create a more predictable structure for players during and between gameplay sessions.

Final UI & Systemization

Turning the redesign into a structured product system

The final UI made Alecaframe clearer, more modern, and easier to scan across complex player workflows like relics, trading, crafting, inventory, and game status tracking.

I also created a lightweight design system, documentation, and brand guide covering components, typography, colors, interface states, logo usage, and core UI principles.

The result was a more consistent and structured product foundation that could be easier to maintain and scale after the hackathon.

Inventory Manager