Atrilyx Account Settings

Giving Users the Power to Manage Their Own Data
INTRODUCTION
As Atrilyx expanded, users needed more control over their accounts managing credentials, data sources, and settings independently. I led the ideation, design, and usability testing for a new Account Settings feature that empowered users to take ownership of their data with confidence.

My role

Lead Product Designer responsible for ideation, UX/UI design, and usability testing. I was involved from concept to final design, iterating based on real user feedback.

Team

Sr Software Developer

Back-End Developer
Designer (me)

Database Engineer
Systems Admin
Product Managers
Stakeholders

Tools

Adobe XD
Whimsical
Adobe Cloud
Google Analytics
Jira

Platform

Responsive Web-App

Timeline

2023 - 2024
View Atrilyx Project

The Problem

Users lacked a centralized way to manage their account details, security preferences, and data sources. This created friction and reliance on support teams for tasks users expected to handle independently.

🧠

The Challenge

Design a scalable and intuitive account settings experience that works for both novice and advanced users balancing flexibility, usability, and data privacy while fitting into the existing Atrilyx design system.

🎯

Product Goals

  • Allow users to update personal or organization details
  • Enable secure password updates and future authentication options
  • Give users visibility and control over connected platforms and data feeds
DEFINE

Problem Statement

Users struggle to manage their account settings, such as personal info, credentials, and connected data, due to a complex and unclear process. This leads to frustration and a higher volume of support requests. A more straightforward and intuitive solution is needed to improve the user experience.
🧪
Hypothesis Statement
We believe that by simplifying and reorganizing the account settings page, users will be able to more easily manage their account information, update credentials, and connect or manage their data. This will reduce user frustration and decrease the number of support tickets related to account management.
🎯
Goal Statement
Our goal is to enhance the user experience of the account settings page by providing a clean, intuitive interface that allows users to update their account info, manage credentials, and control connected data seamlessly. This will improve usability and empower users to self-manage their accounts effectively.
DEFINE

Structuring the Foundation

Before jumping into flows or layouts, I started by organizing the core features of the Account Settings section. This helped establish a clear structure for where each feature belonged from managing personal information to handling data integrations. The goal was to create a simple, scalable, and user-friendly foundation that could support current needs while remaining flexible for future functionality.
💡 Key Insights
IDEATE

How Users Move Through Settings

We designed user flows for the main sections of the account settings account information, credentials, and data connections—while accounting for the different levels of user access across the platform. From admins with full control to standard users with limited permissions, each flow helped us visualize how different roles would interact with specific features.
Note: These are select user flows representing key interactions within the account settings. Additional flows were created to cover other roles and edge cases not shown here.
IDEATE

Rapid Sketching

Sketching quickly allowed me to think freely without constraints, experiment with different page structures, and evaluate multiple approaches before committing to wireframes.

🖊️ Key Layout Ideas Explored:
  • Flexible layouts for account overview with quick access to edit actions
  • Scalable interaction patterns for managing multiple data integrations
  • Early concepts for navigation within the account settings (tabs vs. sidebar)
  • Sidebar vs. top-nav configurations for improved scannability
🧩 Takeaways
  • Quick iteration revealed which ideas had potential and which needed refinement
  • The process clarified user priorities, guiding a smoother transition into wireframes
DESIGN

Turning Ideas Into Structure

After validating initial layout directions through rapid sketches, I translated the strongest ideas into low- and mid-fidelity wireframes. This stage allowed me to define the structure, hierarchy, and flow of each account settings page while remaining flexible enough for quick adjustments. I focused on the main settings areas Account Info, Credentials, and Connected Data with tailored flows based on different access levels.
An overview of the prototype, showcasing user flows and screen connections across the account settings experience.
USABILITY

Testing Wireframes to Validate and Improve

The goal was to uncover pain points, validate user flows, and refine interactions before advancing to the high-fidelity design. This iterative process allowed us to address key usability challenges early on and ensure that the final product would meet user needs effectively.

🎯
Goals
Validate the user flows and interactions within the Account Settings feature.
Identify usability pain points, particularly around account info, credentials, and data management.
Ensure the wireframe designs meet user needs and expectations before advancing to high-fidelity designs.
🧪
Method
  • Format: In-person unmoderated
  • Tool used: Adobe XD prototype
  • Participants: 12 internal
  • Session length: 20–30 mins each
Tasks:
  • Navigate through the account settings
  • Fill out all input and selectors
  • Connect data sources
💬  
Key Findings
There were suggestions to streamline input processes for updating account credentials to reduce unnecessary steps.
Users felt more confident when receiving immediate feedback after saving or updating their information.
Some users were unsure about which features or actions they could access based on their user roles.
DESIGN

Bringing the Vision to Life

With insights from usability testing, we transformed wireframes into polished, high-fidelity designs ensuring every interaction was intuitive, accessible, and aligned with user expectations.
Designed with clarity and security in mind, these screens empowers users to confidently manage their personal and credential information.
A glance at the core UI components crafted to support key account settings functions across multiple pages.
Dashboard image settings
An overview of the prototype, showcasing user flows and screen connections across the account settings experience.
Account Information – View and update your personal and organizational details with ease.
Account Security – Password – Securely change and manage your account password.
Account Security – Password – Securely change and manage your account password.
Manage Users – See and manage all users tied to your organization’s account.
Invite Users – Quickly invite new team members with custom permissions.
Edit Users – Edit roles and access levels for individual users.
Master Data – Manage key data inputs that power your platform experience.
Goals – Set and monitor performance targets for your organization.
Network – Connect and manage your partner and data network integrations.
PROTOTYPE 

From Flow to Function

Here’s a quick look at a few key screens in action, showcasing core interactions from the prototype.

Turning Ideas Into Outcomes

🎯
Impact
  • The redesigned account settings experience empowered users to confidently manage personal information, credentials, and connected data. Our new design resolved major usability challenges and streamlined key workflows, leading to more intuitive navigation and improved user confidence. Post-testing revisions increased task completion by 67%, particularly in managing connected data and editing credentials.
🧠
What I Learned
  • Working within a focused scope allowed me to dive deeper into the importance of clear, modular design for user autonomy. I learned that small, detail-driven components like editable credentials or connect-data toggles require just as much thought as larger features.

    Usability testing reinforced how even subtle changes like icon clarity or layout spacing can drastically improve the user’s sense of control.
🚀 
Next Steps
  • Continue usability testing across additional permission levels and user types.
  • Design animations and transitions for success states and errors.
  • Ensure the new settings interface complies with WCAG standards.
  • Collaborate with dev teams to document component specs for handoff and future iterations.
Emoji

Got Big Ideas,
Let’s Make Them Happen!

Let's
Talk