About the Project

The client:

FlexShares is a Northern Trust company that specializes in ETF (exchange-traded funds) offerings designed to respond to the dynamic behavior of financial markets and asset classes. ​ They leverage being an investment and research expert across 4 disciplines (equity, fixed income, passive and active) to offer insight-led solutions. The site is geared toward investment professionals rather than retail.

The ask:

This is a re-design and tech stack change of 4 FlexShares domains from Teamsite to Adobe Experience Manager as a content management solution. The FlexShares team wanted the same site structure and functionality as their current site with refreshed pages and minimal overhaul for the Phase 1/MVP rollout. There were 7 initial AEM templates to be created with additional individual components to be developed. Originally, the recommendation was a maximum of 2 breakpoints, but we ended up designing for 5 breakpoints to model FlexShares after the Northern Trust website. It needed to be fully internationalized in US English, European English, Dutch and German. Their target delivery of Phase 1/MVP was set for August 2022 but when I was brought on it had been extended to November 2022.

The approach:

Publicis Sapient had a multi-disciplinary team on this project including Product, Program, Tech and Experience. The design/discovery phase was conducted in 3 steps: Hunt, Shape, Build & Scale. I started on the FlexShares project during the Build & Scale phase when implementation was starting. The wireframes had been approved and translated into hi-fidelity designs for the 7 initial templates.

My role:

The discovery phase needed some cleaning up to stay consistent with the design system and then my focus was on bringing the designs up to pass accessibility standards since there wasn’t anyone assigned to accessibility for this project. After I took my pass, we worked with an external team (A360) for an accessibility audit to insure the FlexShares site was best in class for accessibility. The Publicis Sapient team I was worked with was a new team being built so as the team grew, I showed them how to implement the design and kept the project on track. From sprint 1-sprint 10 I troubleshot with the engineers and wrote stories with the product owners. I updated existing designs, created new components, new template pages and completed design acceptance testing. I also tweaked the design system as it grew with components as well as added instructional pieces to help the engineering and product teams aligned with our vision.

The Publicis Sapient team:

• Paul Daly - Associate Creative Director, Experience

• Scott Dean - Design Lead, Experience

• Alyssa Bundy - Senior Designer, Experience

• Pratyush Shukla - Senior Director Technology, Engineering

• Aseem Sharma - Senior Agile Program Manager, Product

• Aishwarya Ganti - Senior Engineer L1, Engineering

• Sonika Singhal - Product Manager, Product

• Somasundharam Prakash - Senior Associate Experience Technology, Engineering

• Srinivas Venuvanka - Senior Associate Technology L1 - Engineering

• Surender Kanaveni - Manager Technology, Engineering

• Pushkar Ranjan - Manager Agile Program Management, Product

• Govardhan Reddy - Senior Quality Engineer L2 - Engineering

• Praveen Kumar - Associate Engineer L2 - Engineering

• Tanya Agashe - Associate QA L2 - Engineering

• Kottai Pandeeswari Baskaran - Quality Engineer L2 - Engineering

• Ria Juneja - Senior Associate Technology L1 - Engineering

• Many others

UX Challenges

Team Flux - Changes within the team were happening throughout the project. When I started on FlexShares Scott Dean, the original designer was rolled off the project. He stayed in contact with me and helped answer any questions I had. Paul Daly, who was the Associate Creative Director, helped me onboard and as I got a few weeks under my belt Paul got called onto another project and felt comfortable leaving the implementation of the project in my hands. We had a few of the original team members leave and as the project went on but we also grew tenfold within engineering and product.

Phase 1 vs Phase 2 - A handful of components and page templates were deemed Phase 2 due to the complexity and timeframe restraints or that it was not a part of the original design. A few of those Phase 2 components are listed below and shown on this page:

• Overarching search component

• Search bar on the insights landing page (examples on the next page)

• Email subscribe bar allowing the user to directly enter their email address vs. going through HubSpot

• Breadcrumbs

• Topic based searching in the right rail of the insights detail pages

• The ability to save individual funds to a My Funds page

• A dropdown advisors tool function on the funds landing page

• Select a ticker dropdown as a search option for the individual funds pages

Viewports - The decision use and design for 5 viewports instead of 2 viewports came as multiple challenges. The decision to use 2 viewports was understood after the discovery phase and as we dove into the logistics of implementation myself and Somu, one of the engineers decided we’d need to build out designs for at least a third middle sized viewport. After that decision the client decided they wanted to use the viewports that Northern Trust uses on their website so we waited for their official viewport sizes and instead of building 2 or 3 viewports I ended up designing for 5 viewports. It was understood that the website was to be fully responsive, but the engineers needed to see all 5 viewport designs for each template page and every component.

AEM - Adobe Experience Manager (AEM) also proved to be a challenge for the engineers. We came across many parts of the site that had to be coded in a different way because of how AEM was responding. There were work arounds that were in place and we’d have to be cautious of the parts of the site that would be affected by new lines of code being written as the project continued. Even some of the more advanced stylizing of the site was not possible with certain components. The ‘loading now’ logo was supposed to be a rotating gif but was decided to be too difficult for Phase1/MVP. We even had to revamp the font weights later in the project because they were rendering way thicker than they should have been.

UX Solutions

Testing - A large part of my job throughout the FlexShares project was to support the team through design review and design acceptance. With the defects caused by AEM I spent a lot of time inspecting the site through my Chrome browser. I’ve taken classes in the past in HTML, CSS and Javascript and I spent a year at one of my previous jobs as an engineer coding custom websites so I was able to troubleshoot some of our defects with the engineers on my team and at the very least was able to explain where the issue could be coming from. I also added guidelines to our style guide to help with QA testing so they could easily refer to that versus having to go into Figma.

Search - As mentioned in the UX Challenges there were several components of the site that were not deemed MVP and moved to Phase 2 of the project. One of the solutions for not having an overall page search or a search on the insights page was providing a tab-based filtering solution. This gave simplified options to the user as to what funds were available to search for in each FlexShares ETF fund category. Their overarching categories are Asset Class and Investment Objectives. From there the tree splits into three subcategories Equity, Fixed Income and Real Assets. The user can also decide to view all funds. This solution was integrated into the insight landing page as well so that users could toggle through insights based on the tags that the authors assign to each insight.

RTE - As part of the finished FlexShares site there was an RTE component that we built out early in the project. We ended up revisiting that story when we came to the insight detail pages. These insight pages were split 70/30 so that the author could add their blog style content to the lefthand side and there was still room for key fund components on the right. Part of the authors content on these pages were images files and these images vary in all shapes and sizes (as usual). They mostly contained icons or images with text and while some looked good, some were getting stretched to their limits and were not easily legible on the extra large and large viewports. My solve for this issue was to create generic RTE components for the authors to use in leu of uploading these images. These components use icons that can be swapped out for images and respond with the site and it made our clients life easier because their design team doesn’t have to continue to make all of these graphics.

Charts - One part of the Build & Scale phase that was not flushed was all of the charts and graphs that would be imported onto the site from a third party. The client was not sure yet which third party they were going to use. Once they decided on Plotly I mapped out which charts the developers should use and made a reference in the style guide for the colors, fonts and font sizes. We also revamped what some of the table information would look like and how that would function on the smaller screens. Due to the large nature of some of these tables on most of the smaller screens they each got a scroll bar so you can navigate to all the information easily. I also added arrows at the bottom of each to help the user understand that there was more information to view.

FlexShares Re-Design Outcome

Client Feedback - I would say goals for the client were met throughout the sprints and after. Continuous positive feedback from the client during story grooming and sprint demo calls, compliments about how we are making their lives so much easier and how vastly improved the new design is really showed their enthusiasm for the project.

Deadlines - I worked through 10 sprints with the team and we made progress through each sprint. The goals for the project were met. Each of the 7 templates that were scoped out were completed, all components were designed for all 5 viewports, developed, tested and translated into all 4 languages required. I’ve since been rolled off this project, but I’ve checked back with our team and the project is on track for their November 2022 deadline.

Learning - Since I was the one responsible for the accessibility testing pre-audit, I spend a chunk of my time bulking up my knowledge on accessibility. I was grateful to have the Publicis Sapient accessibility training available. After the A360 audit was completed I reviewed their in-depth report which included both visual design and engineering requirements.

FlexShares was designed in Figma, which I had used on previous projects. Scott Dean (the original designer) had laid out a solid foundation, but when you take over a project that has been designed by another designer things can be laid out differently than you are used to. Thankfully the files were very organized, so I got to pick up some of his shortcuts and the different ways he was using the Figma. We got to collaborate in the beginning, even though he was rolled off FlexShares when I started. Having his knowledge of the project and the client was invaluable. This helped me as the project progressed while working with the Engineers and the QA teams within the program.

Reflecting - If I was to have done things differently it would be to nail down the number and dimensions of the viewports as early in the project as possible. The number of viewports in the discovery document was different than when I started on the project. We had a discussion when I started and agreed upon 2 viewports instead of 4 viewports and then down the line the client decided they weren’t sure. We kept on with the implementation due to the timeline as we were waiting on the clients to verify the viewport sizes that Northern Trust uses. Even though it was a responsive website, to satisfy the engineers I went through all pages and components to design them in all 5 viewports.

Our team works to provide up-to-date images for all of our brands on all of our retailers websites. When a brand has a new or updated VIS we work directly with their brand managers and marketing to execute their vision.

Retailers like Amazon allow us to use branded images on search optimized content, product detail pages and expand on the brands using enhanced content on their A+ Pages and Brand Store pages.

We work with retailers like 7 Eleven on their 7NOW app to improve mobile experiences. Adding pack layouts and information tabs to our images give customers the information quickly and easily.

I also got the opportunity to brand our internal Digital Integration Organization (DIO) with our own logo/wordmark and icons for each of the teams involved (tea, still, sparkling, juice and FSOP). This branding is used throughout our organization for presentations to email signatures.

Designing for clients dealing with global brands in agriculture, construction, transportation, and aviation industries. I designed and coded each of these responsive websites.

I did contract work at YETI in Austin, TX and primarily did one off digital and print projects. Two of the print projects I completed were a referral card and a workiversary card.

YETI REFERRAL CARD - When a YETI employee sees someone that has the potential to join the company they hand out these cards.

YETI WORKIVERSARY CARD - These cards are given to employees on their work anniversary.

This is a UX/UI project. I took on a website design for a friend whose business is to create a collaborative home for creatives to link up together to find work in a multitude of different industries.

As an eCommerce lingerie shop there are lots of occasions to highlight for sales. These are just a few of the landing pages I created. I also worked on emails, digital banners, website updates and investor deck revisions.

Project Objective: Create a modern and responsive website that has the flexibility for easily updating promotions on the homepage and throughout the site.

WIREFRAMES - We went through many wireframe options for the client before we settled on a final design.

DROPDOWN MENU - We landed on a design that showcases promotions in both the hero image and the nav dropdown.

RESULT - In the end the client decided to stick with their existing website, but this was one of my favorite projects to work on.

This was a branding project for a rowing/TRX/yoga studio in San Antonio, TX. I designed the logo, t-shirts, posters, flyers and gift cards.

Print and digital are my main areas of focus but I also create custom investor deck designs for clients.

GETHEALTHY INVESTOR DECK - GetHealthy.store helps foster a doctor’s influence in helping their patients make decisions about their health and lifestyle.

ODYSSEY ONLINE INVESTOR DECK - The Odyssey Online is a platform where you can write and share content by becoming a creator.