Agency: Ready Set Rocket
Client: Deutsche Bank

Team:
Creative Director - Cole Sletten
UX/UI Designer - Keeley Laures

My Role: UX Wireframes Development, UI Design, Art Direction

The Ask: We created a responsive one page destination where users can select, through various categories and sub categories, different types of email subscriptions they wish to sign up for pertaining to their financial interests. 

 

UX Flow

  • User is able to select through a tabbed system with an underline indicator in orange
  • Within this tabbed system is the ability to search if the user finds that they know what they're looking for
  • Information populates below the tabbed menu system
  • User has the ability to select all if they wish to subscribe to all information included within the category through a Select All option
  • Through a drop down arrow, the user is able to dive deeper within each category through their asset classes
  • Within each asset class are 5 different type of subscriptions they can choose from. They can do this through clicking on the check box. 
  • After clicking on just one check box, a sticky appears requesting their email address allowing the user to ability to subscribe to their chosen subscriptions
  • One exception to design is the Insights page. Instead of having collapsed content, the content is within a list-like design view. The user can simply scroll to see all of their options and check them just as they would with any of the other content. 

    What we introduced
  • The ability to select all
  • The ability to search
  • A tabbed approach to each category
  • A persistent ability for the user to subscribe throughout their journey

Desktop Flow starting with Mutual Funds pre-expanded, Mutual Funds Expanded, Mutual Funds selected with sticky, and alt. layout for Insights.

Insights Layout

Pre-Expanded

Expanded 

Selected with Sticky

Mobile Flow starting with Mutual Funds pre-expanded, Mutual Funds Expanded, Mutual Funds selected with sticky, and alt. layout for Insights.

 

Insights Layout

Pre-Expanded 

Expanded

Selected with Sticky

 

InVision prototypes for both Desktop and Mobile

Example of the flow after applying the visual design 

A few states built out in Desktop

A few states built out in mobile