mobile.jpg

Business Class website concept

desktop.jpg

American Express Business Class

new desiGn concept for desktop and mobile site

Due to a Non-Disclosure Agreement, information on this page only reflects the design concept, not the final product. All information here is my own and might not reflect the views of American Express.


 
 

The challenge

Sharing essential know-how with those who need it the most.

Current American Express website has a dedicated subpage about business trends and insights. We wanted to communicate that American Express, being a known business leader, could be not only a source of information but an enterpreneur’s personal mentor.

 
 

when was that?

March-April 2020

my role

Product Designer

tools

Sketch / Invision

team

mcgarrybowen SF & NYC

 

The goal of this project

Design a website that helps business owners access essential knowledge wherever they are. With an enterpreneural lifestyle in mind, we designed Business Class.

 

Design process

How the world affects the deisgn

I was working on this project in April 2020, when COVID-19 had recently started. Due to the worldwide pandemic, everything changed, including certain design and content guidelines. We took our “business chic” idea and transformed it into something rather elegant but neutral. We changed the messaging and photography, as most of the people allover the world started spending mostly all their time at home. It was important for this project to be aware of everything that is happening and avoid being tone-deaf.

As Business Class platform was created to support business owners, we wanted to make sure that it brought more solutions than frustration to the audience. By adjusting the content hierarchy, we could highlight important topics that can help business owners to feel supported during this critical times. By increasing white space areas we minimized the “"visual noise” and help website visitors feel at ease. By minimizing promotional content, we wanted to show that American Express really cares about being a true mentor for business owners, without focusing on the company’s benefit.

After organizing all the above knowledge, we moved from a page that does not currently feel like a destination, where users can simply get lost in various content modules to the place, where business owners can feel safe knowing that they can find what they truly need.

 

Initial Business Trends and Insights desktop homepage

 

Reimagined Business Class desktop homepage

 

kickoff

Building a foundation

As the client wanted to change the look and feel of the website, we relied on certain style, called “business chic“. Existing visual identity provided by the client and wireframes created by my colleagues served as a strong fundament in my design process.

Before infusing wireframes with visual design I was working with our product team to define any redundant elements and confirm the functionality of current wireframes.

 
Business Class wireframes by Manuel Gonzalez and Daniel Gordon

Business Class wireframes by Manuel Gonzalez and Daniel Gordon

We settled on 3 main design modules for the homepage:

  1. Personal content. Available for registered users, this module provides personalized content, based on their preferences.

  2. What matters now. Content that is important right now, depending on the world economic conditions and business flow.

  3. Full functionality. Communicates the full inventory of Business Class to provide choices for someone, who is not yet sure what they might need now.

Business Class homepage sketches


Discovery

Look & feel

Discovery and inspiration was crucial to this project, as I wanted to build something that would keep the website functionality but will make people feel relaxed, not overloaded by the content. I’ve created several inspiration boards highlighting specific design elements I thought could be successfully utilized.

Initial mood board with key design elements marked

 

Ideation

Defining the design identity

Having a design system is incredibly helpful, when creating digital experiences.
What about enriching an already existing design system with new visual elements, without breaking it?
We took the new brand design for Business Class and connected it to the American Express brand.

The idea was to highlight that Business Class is an important part of American Express, however, it has its own character.
By choosing “business chic“ as our primary style descriptor, I wanted to communicate the increased value of this resource for the end user.

 
 

Key design elements

that helped to translate Business Class brand design into this new digital experience.

 
design_element_4.jpg

Business Class Pattern

Using brand patterns to highlight key content and visually connect elements.

design_element_1.jpg

Color blocks and transparency overlays

Smooth color blocks help to zone the page, making the page scanning easier.

Transparency overlays make the design more fluid, allowing the extension of the white space to the photography.

design_element_5.jpg

blue vertical lines

Leverage vertical line elements to support the page’s flow and direction.

design_element_3.jpg

New typography

Specific typography treatment enhances the website’s design system, making navigating the content more intuitive.

design_element_2.jpg

Black and White Photography

Differentiate the photography color treatment to join elements in groups and engage users’ attention.


functional elements

Is it easy to find?

While rethinking the search module that was missing from the page, we decided to use 2 search options for this page. Classic search incorporated into the homepage hero and natural language search in the middle of the page. It allows us to follow users’ activity and suggest solutions on the way.

Natural language search

Natural language search

 
Hero search utility

Hero search utility


design patterns

Make it personal

As previously mentioned, personalization takes an important place in this design update. So we tried to imagine what would be the simplest way to explain a new visitor how they can get personalized content suggestions.

  1. Firstly I included a short onboarding experience to one of the article modules, so a new user can easily understand what area this module affects.

  2. To minimize distractions and highlight the affected area the onboarding experience unwraps above current artcile modules.

  3. The process is simple. We provide various topics and base the personalization algorithm on specific user choices.

  4. To finalize the personalization request we would contact our new user through their email.

 
 
 

Connecting the content

As I chose the black and white treatment for the personalization module, I wanted to keep the visual language consistent on other pages.

So, I used the same effect on article pages.

Personalization hover effect home page

Personalization hover effect article page


mobile.jpg
 

mobile design

Transition from desktop to mobile

The desktop design was easily adapted on mobile, as most of the modules were pretty straight forward. Here are sevral changes I made:

  • replaced the personalization module with a carousel;

  • added a dropdown for the topic list;

  • changed the search utility action to full-bleed search;

  • removed black and white photo treatment, as there is no hover action on mobile, plus now all the articles are joined in one carousel;

  • removed images from the topics module at the bottom of the page.

 

Full-bleed search

 

Topics dropdown

 

Personalization carousel

 

Topics module

 
BC_mobile_screens.jpg

 

the result

Elegant and connected

All the design elements came together to support the initial strategy and solve client’s problems. The new site is more spacious and welcoming to new visitors. Logo placement and hero image feel more like a destination. We brought more valuable content to the top of the screen and added personalized approach. Visual elements increased the overall site scanability. Subtle motion helps to engage users’ attention.

 

 

what’s next

Exciting change and future plans

The Business Class website is still under development, so there’s a lot more design details to explore.

However now, thanks to the brilliant team of strategists, UX researchers/designers, visual designers, we see the clear path to make this product more engaging and effective for business owners.