Business Class website concept
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
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.
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.
We settled on 3 main design modules for the homepage:
Personal content. Available for registered users, this module provides personalized content, based on their preferences.
What matters now. Content that is important right now, depending on the world economic conditions and business flow.
Full functionality. Communicates the full inventory of Business Class to provide choices for someone, who is not yet sure what they might need now.
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.
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.
Business Class Pattern
Using brand patterns to highlight key content and visually connect elements.
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.
blue vertical lines
Leverage vertical line elements to support the page’s flow and direction.
New typography
Specific typography treatment enhances the website’s design system, making navigating the content more intuitive.
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.
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.
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.
To minimize distractions and highlight the affected area the onboarding experience unwraps above current artcile modules.
The process is simple. We provide various topics and base the personalization algorithm on specific user choices.
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.
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.
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.