Arctop

Designing an End-to-End Cognitive Decoding App

Product Design UI/UX Data Visualization 2024
Arctop App Dashboard
Arctop App Calibration
Arctop App Recording

Overview

Arctop is a cognition decoding company that transforms brain signals into actionable insights. I was contracted to completely redesign their mobile app from end to end, covering everything from the homepage and calibration screens to QA, instructional content, and interactive calibration games.

The project aimed to streamline the user experience, enhance usability, and ensure visual cohesion throughout the app while maintaining the company's sleek, human-centered brand identity.

Arctop Dashboard

Home Dashboard

Arctop Calibration

Calibration Screen

Arctop Game

Recording Session Screen

Background & Context

Arctop's original app presented users with a lengthy, single calibration process to unlock cognitive metrics. However, the goal was to move towards individual, targeted calibrations for each metric. The challenge was to enhance usability by creating an intuitive dashboard-style interface that maintained consistency with Arctop's sleek, human-centered brand identity.

Arctop Brain Interface Diagram

Arctop's brain signal technology translates neural data into actionable insights (provided by Arctop)

Original calibration flow from Arctop's app prior to the redesign (provided by Arctop)

Problem Statement

Fragmented Experience

Users struggled to navigate the app's various screens, making the overall experience feel disjointed and unclear.

Complex User Flow

The lack of clarity around calibration processes and metric unlocking made it difficult for users to engage effectively.

Brand Alignment

Ensuring every element of the design adhered to Arctop's brand guidelines while maintaining usability and consistency across the entire app.

Research & Strategy

I began by diving into Arctop's brand guidelines to understand the visual identity and tone. I conducted user research through interviews and usability tests to identify pain points and desired features.

A competitive analysis of similar apps in the cognitive tech and health-tech space provided insights on best practices for this specialized field.

User journey mapping was crucial to ensure coherence across all interactions, from onboarding to calibration games. I created comprehensive flow diagrams to visualize the entire user experience.

User Journey Map

User journey mapping highlighted key touchpoints and opportunities

Design Process

01

Wireframing

Created original wireframes to establish layout, flow, and hierarchy across all app screens.

Wireframes
02

Prototyping

Developed high-fidelity prototypes in Figma, focusing on a clean dashboard and dynamic calibration screens.

Dashboard and Navigation

Dashboard and Navigation

Tutorial and Calibration

Tutorial and Calibration

Recording Session

Recording Session

03

Iterative Testing

Conducted multiple rounds of usability testing and refined the design based on feedback.

Testing

Solution

A key innovation in the redesign was transforming the calibration process into engaging, gamified experiences.

Tutorial & Calibration Process

Transforming the calibration process into an intuitive and engaging experience.

Dashboard & Navigation

Establishing multiple metrics on homepage for calibration and selection.

Recording Session

Streamlining the recording process for better usability and efficiency.

Onboarding Flow

Conducting multiple rounds of usability testing and refining the design based on feedback.

Reflection & Learnings

This project demonstrated the importance of user-centered design through iterative testing and feedback, which were critical to delivering a polished experience.

Maintaining visual cohesion across various interfaces strengthened the app's identity, while gamifying calibration activities made the user experience both enjoyable and effective.

All Projects→