Optimizing Dropbox's Signup Experience: A Desktop-First Accessibility-Driven Redesign

This project focuses on the Dropbox Web Signup Experience, targeting and correcting accessibility issues to result in an interface with improved usability, accessibility and visual consistency.

It's important to preface this project by stating that in the development of the final Figma design, I used the opportunity to focus on implementing Figma variables anywhere possible, ultimately resulting in a prototype where all interactions and animations occur within one single frame. (I'm really proud of this.😀)

Dropbox's current design

On first and subsequent analyses, the following major issues were identified (top to bottom):

❌ No Light/Dark theme toggle: Users with light sensitivity or those working in different lighting conditions benefit from theme options.

❌ Redundant and inconsistent Localization button

❌ Unnecessary back button (Desktop)

❌ Insufficient visual contrast for heading text

❌ Poor contrast for input field labels: This can make text unreadable for users with low vision or color blindness, violating WCAG contrast standards.

❌ Unnecessary First and Last name field: both fields can be implemented with progressive disclosure after signup process if deemed necessary.

❌ Inconsistent spacing between password requirements

❌ Explicit consent needed for terms agreement.

My Redesign

Several changes were made, view the prototype to see them all in action.

Here's a breakdown of some of the major changes:

✅ Minimized Friction: Eliminated unnecessary input fields to create a faster, more efficient signup process.

✅ Enhanced Readability: Improved contrast to meet WCAG accessibility standards and ensure clarity for all users.

✅ Clear Visual Hierarchy: Adjusted typography with varied font weights to guide users’ attention and improve scannability.

✅ User-Friendly Password Validation: Added real-time feedback and clearer instructions for password requirements to reduce errors and frustration.

✅ User Efficiency: Moved the "Sign in redirect" option to the top to reduce friction for returning users.

✅ Simplified Localization: Removed redundant localization options to declutter the interface and improve usability, also included a search bar in the localization overlay for ease.

✅ Personalized Experience: Introduced a theme toggle (light/dark mode) to cater to user preferences and enhance accessibility.

✅ Consistent Aesthetic: Applied rounded corners across the interface for a modern, cohesive look and feel.

✅ Interactive Feedback: Improved interaction and state changes within the localization modal to provide clear, responsive feedback.

✅ Ethical Transparency: Replaced the passive terms agreement with an explicit consent checkbox to ensure users actively agree to Dropbox’s Terms, Conditions, and Privacy Policy.

I didn't forget Mobile

I optimized the desktop layout for mobile ensuring visual consistency and balance.

Variables

As I mentioned earlier, there is an extensive use of variables all through this project.

Variables enabled me to do the following:

◼ Make changes project wide without hassle

◼ Implement theme changes with ease

◼ Implement logic: logic such as the CTA only becoming enabled on validation success were possible using variables.

◼ Restrict prototyping to one frame: Instead of mapping frame to frame, some animations were triggered by conditional statements, using dependent and independent variables, and delays.

Variant States

All elements relevant to this project that are expected to be, are interactive, and as such have variant states. Each state is optimized for both light and dark themes where necessary. Feel free to explore all interactions in the prototype

Conclusion:

This project highlights the importance of accessibility-driven design in enhancing user experience. By addressing key usability issues in Dropbox’s signup flow, I created a more inclusive, efficient, and visually cohesive interface that meets WCAG accessibility standards.

Through strategic improvements—such as reducing friction, enhancing readability, optimizing contrast, and introducing interactive feedback—I ensured that users of all abilities can navigate the signup process with ease.

Additionally, leveraging Figma variables allowed me to build a seamless, fully interactive prototype within a single frame, demonstrating an efficient and scalable approach to design iteration.

P.S: Figma project file will be available soon. I'm...naming layers🙂