Design Audit
Inspiration
feeding off what what designed by other teams already
Global Brand Consistency
keeping the look and feel of new design within the brand
Save Time
Save time on creating something from scratch
Save Money
Save time = save money cross teams
Before jumping into the design phase, I wanted to understand what Hero designs already exists on American Express web pages. That would help me with the following:
What I learned
There are a lot of brand inconsistencies and visual disconnect between the web pages.
Takeaway
Use existing design templates as a foundation for a new Hero design. I identified at least three areas of where the new branding is best to inject to appropriately and consistently elevate the Business Platinum Card offering: The Hero, the Left Rai, and the Offer Module.
Low Fidelity Mockups
As a hard requirement, I was given a document that outlined the new graphic elements that must be used. The document was created by a Brand Team from an outside design agency and came with no actual assets, rather their descriptions and visual examples of what that could look like.
Recreate Designs
Recreate the proposed graphic elements in design software: Sketch
Stock Imagery Search
Research and find stock imagery for Low Fidelity mockups
Get Feedback
Put it all together and get the pulse of the design, product, and brand teams on the direction taken.
Design Round 1:
Hero
Overall, the mockups received very positive effect and spiked excitement within the teams. The most talked about design was the one with proposed parallax effect.
Drawing inspiration from Apple website and researching the UI trends, the parallax effect was a new and quite advanced idea to explore.Also, the Hero size was a topic of interest.
I was challenged to keep exploring designs of Heros that can take over the page full screen as well as shorter versions. The argument in favor of a full page hero was that it looks more luxurious, contemporary, and stylish vs. its shorter contender. Although the shorter hero has the advantage of presenting the most important information about the Credit Card above the fold at a glance the moment the page loads.
Design Round 1:
Left Rail and Offer Box
To further elevate the product look and feel, I also mocked up design versions of two other elements on Product detail Page: Left Rail and Offer Box.
I wanted to show the possibilities of new Brand direction and new graphic elements, and how they can be applied to further improve the design and elevate product value.
In branding, consistency is the key. I expressed that by applying new branding direction to other page elements, we would achieve the desired effect in creating the brand that is memorable and desirable.
Design Round 2:
Imagery and Layout
Challenge: Use the imagery chosen by Brand Team
I was given 3 images that were potential front-runners to be featured in the final design. I wanted to manipulate the images so they better align with the New Brand Guidelines.
- Created a mosaic effect for visual depth
- Adjusted the colors to be in harmony with the Branding
- Cropped and resized image elements to allow for text legibility and elements color contrast to be accessible.
Design Round 3:
Refining Layout
Challenge: Explore information layout possibilities
As a requirement, I had to organically fit the set of information the hero carries:
1. Card Art,
2. Card Name,
3. Special offer,
4. Legal copy
5. CTA
I proposed 5 different ways all the information pieces could fit together and not only meet the aesthetic but also accessibility requirements.
Design Round 4:
Polishing Up
Challenge: Refine the design in the context of the entire Product page
The final decision on the height of the Hero was to be made next. I concentrated on showcasing how the entire Business Platinum card page would look like in cases of:
1. Shortened Hero
2. Full Page Hero
3. Dark Mode
