FlexPay Website Redesign

As part of feedback from both internal and external stakeholders, we identified the need to rebrand the FlexPay website to make it more clear that it was part of the SAP brand. To improve this disconnect and gain  

more credibility, we decided to rehaul the current website and adapt more SAP brand assets. I worked alongside one other designer for this project, over the course of 3 weeks.

Visual DesignWeb DesignBranding

- problem -

Since our solution was primarily sold to existing SAP customers and deeply integrated into existing SAP systems, we received a lot of feedback from account and sales teams that FlexPay should leverage the broader SAP brand more as it would help create credibility and drive sales. Based on the old website and design choices, customers weren't able to tell that FlexPay was part of the SAP family so we decided to update and adjust the FlexPay brand, starting with our website.

Original FlexPay website before redesign

- inspiration -

To get started, I looked at existing examples of SAP websites and created a mood board of colors, typography, and overall interesting visual treatments.

- style and content updates -

It was clear that we needed to step away from our playful illustrations and previously established color palette and move towards photography and our corporate colors. We kept the content for the most part but worked on the storytelling and improved the overall flow.

- Ideation -

I played around with various gradients and abstracted shapes, while still sticking with the overall FlexPay theme. I also wanted to explore light vs. dark mode to better leverage the direction of some rising design trends. While going through these ideations, I tried to stick with the central theme of storytelling. For a financial application, it's important for us to build out a narrative that leaves the user feeling comfortable with sensitive financial information. I tried to accomplish this by establishing trust early on through visuals, quotes, and key product callouts.

Early stage iterations and design directions

I went ahead and turned my sketches into some first designs in Figma. While I think it's the right direction, it has some issues as well. The icons are overpowering and, compared to the original designs, blend into the map a little too much. Additionally, some of the lighter emojis can be hard to see against various backgrounds.

Some of the final design choices

- site performance -

We delivered the new website in just 3 weeks and saw amazing results instantly. In the first couple of weeks, we generated multiple new leads in the form of website sign-ups and received positive feedback from our stakeholders. Comparing our old and new site, we had a 21% increase in unique users and sessions overall.

See more...

Product Work
Designed an entire set of screens for an "administrator" persona, leveraging the SAP design system. Worked on an onboarding sequence for our mobile experience.
Website Redesign
Redesigned the FlexPay external facing website to update the look and feel and adapt more SAP brand assets.
Branding Efforts
Created a flyer to address FlexPay's response to Covid, worked on a one-pager for FlexPay's launch plan to be shared with stakeholders, and iterated on designs for an email campaign.