Franklin Templeton - Digital Briefcase

Role Overview

This collaboration with Geniant, CI&T and Franklin Templeton was a short term project that required dynamic design support for a global product launch. Geniant, the company that hired me, was responsible for the experience design, CI&T managed code development and Franklin Templeton managed overall product direction. My role supported the design lead in producing production ready assets for experience updates, supporting new feature experiences through user flows, design reviews and prototypes to demonstrate alignment with user needs.

Project Details

Timeline: November 2023 - January 2024

Role: Staff Designer

Team: 1 Design lead, 1 Staff designer

Tools: Figma, Xcode, Notion

Deliverables: Client focus feature, Responsive UI updates, Design system ops, Page templates, Component checklist.

Execution Summary

Feature support

The more cogent contributions to the project was the addition of the Client Focus feature and the updating of the Settings feature to accommodate new experience capabilities.

The Client Focus feature was designed to help manage information overload. While the Briefcase app can store and manage a large number of documents, during a client meeting, an associate only needs to access documents related to that specific client. This feature ensures they have quick and easy access to the relevant content, making meetings more efficient and engaging.

Additionally, the Settings feature was updated to support the new Client Focus capability. This involved adding new options for associates to select and edit which firms they want to access in their folder queue. This update allows associates to customize their view, ensuring they only see the firms and documents they need for their meetings.

Client Focus

More streamlined workflow and efficiency

Associates no longer have to search and parse through all the content on their tool. They can now go into their settings, select the name of the firm or firms they want in their folder view, and switch on the Client Focus toggle of the side bar. 

Better and more engaging client experiences 

Associates can now have more dynamic and personal engagements with the client with the ability to share their screen without fear of revealing unrelated client info. 

Reduced information overload 

Associate now have the ability to control what content they view in their folder specific to their immediate needs. We found that this feature wasn’t just useful in client meetings, but associates also found improved efficiency in prepping for client meetings and engagements. 

Interface update

Client focus is a feature that uses the page sheet component to facilitate the flow. Adding a client focus variant to the page templates greatly expedited this process to where I could select a template that resembled the structure required and nuanced the page content to align with a specific point in the client focus flow.

Design System Support

UI updates - design system

New assets were added to support experience updates for the digital briefcase and a related but separate stream of product work with Franklin Templeton. These additions directly supported my individual efforts in delivering client focus and settings features. Updated UI icons to include supporting assets for new features.

Updates:

  • Sidebars 

  • Page menus 

  • Product pages 

  • Document previews

  • Header tabs

  • Folder summary

  • Icons

  • Tool bars

  • Resource list

  • Materials folders 

Responsive updates

Originally the experience was built strictly for the iPad pro 11’. As I arrived on the project, FT decided to include the pro 13’ of available devices for their associates so most of elements had to be tweaked to be responsive and comfortably fit a bigger screen size.

Page Templates

With the screen size expanding to include the 13’ iPad pro, the majority of assets underwent sizing & spacing adjustments. The most crucial being the page sheet templates containing rows that span the width of the screen.

At the foundational level of rows, I adjusted the spacing from the border containers and its relation to the inner content using auto layout to comfortably support the both 11’ & 13’ experiences.

By updating the page sheet file with the latest row specs, I was able to update all 41 components without touching a single template.

Decoupling from iOS

Legacy asset dependencies from the iOS design library began to cause confusion and inconsistencies in the FT design system. As the product matured some of the iOS assets changed to fit the experience needs of the app while others unchanged. 

Using the component tracker plugin I was able to quickly identify and locate the iOS assets, copy them, recreate local instances and replace iOS components from element. With all of the iOS components swapped with new local instances, I could safely and fully detach from the iOS dependency

This severely halted deviations in design elements with unifying standards and more efficient updates with all design foundations local to our file. 

Artifacts - component checklist

Created an operational guideline for updating UI assets to the FT library. This list simply details the steps needed to consistently create and cohesively update assets to the FT library and serves as a guide for new designers working in the file.

Wrap up

I feel like this project was a unique and fun test that required a mixed skillset to support the development of the digital briefcase. Overall my contributions in feature support aided in reducing information overload, improved workflow efficiency and dynamic client engagement. 

While the updates to the design system assure a responsive experience across devices with improved flexibilty breaking away from the iOS library. Centralizing every reusable element to one library streamlines the design process promoting consistency and effortlessly maintaining brand alignment across the experience.