Financial Product Suite Unification

A leading financial institution approached Selma Digital to help elevate their suite of internal software.

This organization wanted to have best-in-class research tools for the analysts at their organization, while also ensuring that these proprietary tools intuitive, consistent, and aesthetically on-brand. Their organizational goals included drawing in new talent, enabling more effective day-to-day operations, and providing more functionality to delve deeper into financial research.

Key Questions:

How did you create a custom UI based on the brand’s identity?

The UI team asked that we nod to the institution’s overarching brand while also providing a sleek and modern look. We examined the brand guidelines and other internal documents. In addition, we had conversations with key stakeholders in order to form our brand strategy and unearth the brand archetype. From there, we created three different styles for what the new interface could look like based on interpretations of the brand archetype. Referencing cultural elements, infographic styles, typography and color, we presented a number of directions building upon the client’s brand aesthetic and brand archetype. We translated the selected mood boards into detailed UI components. Once a final aesthetic direction was selected from the detailed design choices, we prioritized component creation. UI patterns, UX patterns, and motion patterns were documented in a Figma component library & style guide. This document guided the front-end team’s Storybook of components, available for the whole organization’s development team.

How did you unify the experience across different applications within the organization?

One application at a time, starting with the user experience of some of the more complex applications, we defined main patterns. Starting with the more complex systems helped set up the framework for how the overall software would work and be laid out. Thorough documentation for flows, interaction patterns, and component patterns were created. As the design process continued and we worked with other groups within the organization, we looked for opportunities to leverage existing system patterns in order to unify the product across different applications.

When working with Financial Institutions, what are some of the UX methods you practice?

There is obviously a lot of data and complexity when it comes to working with financial institutions. Also, there are a lot of domain-specific activities that we need to study in order to best design for that audience, and these activities may vary from institution to institution. Therefore, from a research perspective, we like to work directly with our end-users as much as possible, to observe their process and understand in their own words the goals they are trying to achieve. This is achieved through qualitative research, such as observation and conversation. When we don’t have access to our end-users as a design team, we will interview sales teams and key stakeholders. Competitive research, academic research, media scans, storytelling workshops, persona creation, and brand archetype study help us position the product framework, style, and how the tool should be used. User testing of design prototypes and concept testing different ideas also help ensure that designs resonate with the audience.

Deliverabes

▪ Custom UI Library in Figma
▪ Custom data visualization system
▪ Component Usage Guidelines
▪ Component Motion Guidelines
▪ Documented wireframes and flows

Outcome

The client organization overall was happy with the design system and integrated it fully into many of their applications. They are currently continuing to implement the design and interaction system across their suite of products.

Personal Financial Management & Education Application

As research shows, empowering people to access financial management tools can alleviate stress. With reduced stress, people are happier at work, leading to increased workplace productivity.

When one of the world’s most notable accounting firms needed to create a mobile app to accompany their financial education and personal financial management software, the team at Selma Digital supported the process from concept and strategy to design, testing, and handoff.

Selma Digital collaborated with the Product Team and Financial Planning team to design an application that would be provided as a benefit to workplace employees. The app was a mobile accompaniment to a more comprehensive web-based financial planning tool. The companion app allows users to manage their personal finances, track their budget and savings, and educates them about how to spend wiser and save smarter. Currently available in the iOS App store and Android Marketplace, the app is being used by millions of employees nationwide.

Hands on a laptop showing the product's homepage

How did the team define the strategy and scope of the product?

Our team worked with the client for a number of months on the responsive website, which enabled users to manage their finances, plan financial goals, and connect with a dedicated financial advisor. The client wanted a more “on the go” experience for the app. One that enabled users to manage their finances and learn how to be smarter with their money. Leveraging the personas of our key audience members, we defined jobs to be done that the application would support. These key jobs and the narratives helped define the scope of the app, which translated into a user experience framework. Additional user testing around UX framework and content testing helped define the product as we moved through the phases of design.

Mobile App Deliverables:

  • 100+ Screens to visualize mobile application details and flows
  • Prototypes of all flows and states
  • UI Kit

Outcome:

The app has been in market for 6+ years, and it continues to be used by countless individuals who receive access to the app as a benefit of their workplace. The client also continues to sell the product to Fortune 500 businesses nationwide.

Designing a Faster Search Experience

Over 17 million pets have found homes because of our client, the world’s number one pet adoption site.

With a large audience of adopters and shelters, there is a strong need to match the right pets with the right people. Most of their visitors wanted to find the perfect pet for them, and our client challenged us to create a better search experience from the homepage. During our partnership, we collaborated with the design team and marketing team to explore updated opportunities to incorporate the parent company’s brand identity. Selma Digital facilitated conversations between different stakeholders within the organization, and led a team of internal designers to reconsider the brand and its possibilities.

Dropdown menu on the website showing different categories of animals

How are customers currently searching for pets, and what’s unique about each audience segment?

As there are many types of pet adopters and many types of pets, we created a matrix of adopter types to ensure we understood the spectrum of user pain points, goals, and needs. The client had extensive data around their target audiences, and we were able to curate this information into different persona types. A journey map was created to visualize the phases of pet adoption, the participants, and how the data systems worked currently on the website. This helped us find gaps in the experience, pain points, and opportunities.

We told the user story in sequence for cat adopters and dog adopters, associating any related insights or additional user tasks with each step in the flow. We presented all of these findings and journeys in a workshop with key stakeholders to create alignment and also to gather additional insights.

Brand iconography

How can we provide a solution for diverse user needs and browsing styles?

Competitive research in tangential industries with strong search experiences helped us find patterns and create a number of concepts for preference testing. We explored different kinds of search interactions to get feedback on first impressions and on the search experience itself.
Concept tests and facilitated conversations were conducted with real users, which helped drive the final concept.

How can we refresh a known brand identity, reinvigorating it with reference to the parent company?

A web product’s visual design, copy, and interactions are all expressions of the brand. Through a series of workshops and work sessions, Selma Digital helped guide the client’s internal marketing team through a process that helped update the client’s visual identity to include a reference to the parent brand’s mark.

Deliverables

▪ Responsive website design for homepage
▪ Search results page
▪ Filtering system
▪ Custom icon design
▪ Photo selection

Outcome

Our design solution converts more visitors from browsers to pet owners than the previous experience, and an inclusive photography choice creates a stronger emotional connection that elevates the brand.

Financial Research & Presentation Platform

YCharts is a comprehensive research and proposal creation platform for finance professionals.

In 2017, YCharts and Selma Digital began working together to update the look and feel of the suite of YCharts apps while also creating a responsive framework. What started as a rebranding and UI project extended into a 7+ year partnership between Selma Digital and YCharts, with Selma Digital serving as their Agency of Record for digital product design.

Team collaboration diagram
Screenshot of a section of the website

Navigation bar graphic detail

What was the process to update the look and feel of YCharts?

Initially, we met with key stakeholders to understand the brand essence, while also delving deep into the competitive landscape. Through a series of exercises and workshops, we defined the brand pillars and values. The key words in the brand pillars and values created a framework to translate into visual design. After some exploration and experimentation, we decided on a modern aesthetic with an updated color palette and simple design. The font Roboto condensed was used to best accommodate tabular data and data density. Charts and graphs were updated to be legible and minimalist, letting the data take center stage.

Eight bars colored according to the palette and a pie chart with the colors applied
Abstract representation of colored indicators on a graph

 

They constantly put our needs and wants first and offered helpful guidance when needed.”

Director, YCharts

Brand iconography in grayscale

How have you evolved the product suite as YCharts has grown its product suite?

We collaborate with the team across all phases of the product life cycle, from concept development through design iteration, user testing, and collaboration with engineering and QA. We strive to develop innovative approaches to the UX while maintaining a consistent experience throughout the entire application, broadening our user base while maintaining our core audience and services.

We ensure we stay aligned with the product strategy by studying the industry and fully understanding customer needs, expectations, and world views. We ensure we incorporate similar UX patterns throughout the site, even as applications evolve. Additionally, we always look for opportunities to connect the different research applications and tools to make the overall experience more valuable and intuitive.

Compilation of website screens

How do you tie together separate workflows to create a cohesive product experience?

Being consistent with affordances, interactions, and placement helps unify the experience overall. Documentation of UX, UI, and IA patterns is extremely important, while also documenting the rationale behind decisions in order to provide context to the larger team.

Creating interaction patterns and ensuring different applications follow similar patterns helps users onboard to different applications easily. Looking for opportunities to unify the apps is important. By making it simple and easy to switch modes or visualize data from different tools – the experience transforms into a holistic system of easy-to-use workflows.

Flexible, Custom Marketing Website

YCharts is well-known in the financial industry for their easy-to-use charting and research software.

They approached Selma Digital with a need to redefine their marketing website in a way that more closely aligns with their product, that’s easy to modify and change, all within a flexible CMS Framework.

We collaborated with their Marketing team to tell YCharts’ brand story in a fresh way, delivered via a fully custom, modular WordPress responsive website. With subtle animation and parallax scrolling, the experience is immersive and helps direct users to the most relevant information for them.

Woman's hands on a laptop showing the website's homepage

How did we elevate and create an updated brand identity on top of the existing product?

To help YCharts marketing identity soar to new heights, we leveraged the product’s full color system and a font that was bold and attention-grabbing. Thinking about metaphors for research and the complexity of the financial world, we created a graphic system to use throughout the site. This included background styles, secondary elements, and icons. To ensure the updated visuals were cohesive across channels, we provided style recommendations for social media graphics and blog post imagery.

Two people pointing at a laptop screen and mobile device displaying website's homepage

How did we create a modular website that’s easy to customize, and bring it to life?

While we explored YCharts visual identity we also helped restructure the information architecture for how the site would be organized based on different audiences and communication needs. In this process, we identified “key pages” and designed those pages with modules that could be reused and restyled across different pages of the site. The Key Pages helped create recommendations for how modules should work together and which modules best support different types of communications. This enabled the client to have more customization as there were no set-page templates. Additional customizations within the CMS were added at the module-level so there was flexibility for how information could be displayed. Module guidelines aided the marketing team for creating custom web art that fit each module. Ultimately, the system was extremely flexible in order to provide as much freedom to YCharts’ web team as possible.

Twelve rectangles colored according to the palette and an abstract blue shape used as a graphic element
Text listing the primary and secondary typefaces and a black "A" graphic for illustration
Selection of two types of iconography used for the brand

Deliverables

▪ Custom WordPress site with 23 modules to build custom page templates
▪ Migrated blog posts
▪ Integrated the site with HubSpot
▪ Site hosting

Selection of graphic components used on the website
Conceptual image demonstrating the customizable design of the site
Conceptual map showing the website's information architecture and page connections

Outcome

Thanks to Selma Digital’s efforts, the client’s “Request a Demo” page became one of the five most visited on their site. The new site’s functionality saved the client time and received positive feedback. The team successfully managed several vendors and communicated well.

Illustrated conceptual image evoking the brand's voice and tone
Illustrated conceptual image evoking the brand's voice and tone

Digital Ecological Journey

Museum of Earth is an up-and-coming Los Angeles museum that allows visitors to experience the awe of nature while learning about how to help our changing climate.

Museum of Earth collaborated with Selma Digital to develop a 360* digital journey to increase museum awareness, attendance, and engagement.

Conceptual photographic selection of the brand's voice & tone

What was the process like for developing the digital experience?

Starting with key proto personas for different visitor demographics and psychographics, we focused on targeting the visitors who were most likely to share and evangelize the Museum of Earth experience. We designed the full museum-visitor journey, from awareness and engagement, to ticket purchase, through in-person visit, and post-visit engagement; all while ensuring that the brand identity resonated through the different digital experiences within the scenario journeys.

Diagram showing a portion of the application flow
Two business cards on a beige surface and a laptop displaying website design on a log in the forest

How did these digital experiences support the Museum of Earth brand?

The language, imagery, content, and context all are aligned around the Museum of Earth brand. The journey we designed focused on finding moments of opportunity between brand values and meeting our visitors where they are at. That means looking to grass-roots community engagement as well as social media opportunities to bring like minds together and help encourage a transformative and educational experience. Multi-pronged marketing campaigns and Museum events lead to increased website traffic, and a frictionless ticket checkout experience keeps their ticket in their mobile wallet.

Post-visit, the Museum of Earth app allows visitors to further engage with the content at the museum, connect with like-minded people, and connect with organizations all intending to help our planet.

Mobile screens of the application arranged on a green background
Mobile device displaying augmented reality functionality design

Specialty Retail Branding

Flute Center approached Selma Digital to evolve their brand identity, specifically their logo. The Flute Center of New York was changing their name to Flute Center, as they were expanding into cities outside of NYC.

We leaned into the unique spirit of the Flute Center to create a monogram and wordmark pair that felt modern and provided a heritage feel The polished typography, a vibrant color system, and a set of custom graphics all position the Flute Center as a fresh-faced leader in the classical music community.
We’re proud to have been awarded a Bronze Indigo Design Award for our work for the Flute Center.

Brand logo on a black background and arm holding a black tote bag with the brand identity
Brand advertisement poster on a subway wall displaying a photo of a flute and brand logo

How did you define the brand’s core values, mission, and vision?

In meeting with the Flute Center team to learn more about their organization, we were able to get at the brand’s essence: the best place in the world to purchase your flute. In studying the audience we learned about professionals and students from across the globe, of all different backgrounds and cultures, coming together in their passion for the flute. Ultimately, we wanted the Flute Center brand to reflect the audience – friendly, inclusive, and musical.

What design principles and visual elements informed the new brand identity (e.g., logo, color palette, typography)?

A hand-drawn calligraphic monogram is leveraged to identify with the heritage of the classical music industry and sophistication and practice that is needed to achieve something – like a beautiful musical performance. The monogram is paired with a sans serif wordmark that references the original logo, but set in Weave, the choice is contemporary and modern. Key color pairings with a broader color palette makes it easy for the marketing team to make their communications stand out while also remaining on brand and consistent with the new FC identity.

Brand logo on a red background

How did the visual identity connect to the brand strategy and target audience?

The updated brand and identity was reinvigorated and refreshed the FC brand. We wanted to honor the diversity in the flute community, and the different types of music that flutists can play. Leveraging color and a completely custom mark aligns with the target audience’s aspirations for uniqueness, creativity, and musical passion.

Two street billboards displaying photos of a flute and the brand logo, one in New York City and the other in Chicago

Selection of pictograms designed for brand identity

Deliverables

▪ Logo and Monogram for print and digital
▪ Stationary set
▪ Brand guidelines which include logo usage guidelines, typography system, color system, secondary graphics, and photography

Two photos of flutes on pink and green backgrounds
Typographic composition displaying words related to flutes and the brand

Outcome

Flute Center customers love the brand update. The feedback is highly positive from customers and industry associates. The brand guideline saves the team time. Since all members of the marketing team are aligned with the direction of the brand guidelines, content creators and team leads no longer churn over asset creation.

Green t-shirt with the brand logo
Nine screenshots of pages extracted from the brand guidelines
Laptop on an orange desk displaying website design and two business cards on a beige surface

Identity Design and MVP Product Design for HR Software

Translator came to us with a vision to develop meaningful diversity training for B2C businesses, Heads of HR, and Diversity and Inclusion Officers.

We helped bring that vision to life by creating a visual identity system that maintains gender neutrality and fluidity, while also capturing individuality through color and photography. We created a powerful and anonymous digital app experience accompanied by group sessions with experts to drive storytelling and conversation.‍

Two business cards on a yellow surface
Nine pages extracted from the brand guidelines

How did Selma Digital approach the brand identity?

Translator as a brand is forward-looking, authentic, and confident – it’s not just one identity, shape, size, or color. A key consideration in developing their branding was the use of color. We were very conscious of any biases around the use of traditional gendered hues. Color, and identity around it, became the cornerstone around which the final brand identity was conceived. The logo manifested as completely customizable, so every employee at Translator could create their own “T” mark with the colors that they felt represented them.

The architectural “T” design emphasizes its positive and negative space, along with being a flat, yet 3D shape. With one logo mark, we were able to visually communicate a multi-faceted brand that aims to represent a world where we can all be different, but exist harmoniously.

Tablet on a white surface displaying the website and woman wearing a black t-shirt with the brand logo
Person going down the stairs carrying a tote bag with the brand logo
Notebook on a wooden surface with the brand logo and multiple business cards scattered on a table

How did the digital experience increase empathy and connection for participants?

Translator aims to help companies increase employee engagement through interactive diversity education, virtual reality, and on-site facilitation. We collaborated with stakeholders at Translator to create an educational framework that coupled digital experiences with group learning sessions. Partnering with experts in diversity and inclusion who helped to tie in real life stories, we created a series of in-person guided sessions where the app allowed the audience to participate and respond to the group session in real time, but anonymously. When the group’s responses were projected to the room, the interactive experience added moments of honest reflection and authenticity for all participants.

How was virtual reality incorporated into Translator’s toolkit of resources for the DEI community?

The team explored incorporating different storytelling techniques for individuals to “walk in another’s shoes,” so-to-speak. The hypothesis was that allowing a viewer to act in the world but in a different body, and see if they were treated differently in this virtual environment, might create empathy or awareness for ideas that are taught very quickly through experience. We also explored mobile applications that facilitated DEI education through more traditional audio and testing techniques.