JPMorgan Chase & Co. is the biggest financial institution in the U.S. The client’s key goal is to build trust with the public, expand their customer base and educate the public on their contribution to the community.
The client’s website is mainly informative and contains many articles expanding on their activities. The front page consists of a top nav bar, a hero carousel with links to various articles and additional articles at the bottom.
A careful analysis of the client’s current design reveals that the homepage does not meet the proposed business goals. It fails to communicate who the client is and what is the client’s intent. There is no clear key messaging or a clear CTA. Crucial information can be found only after a deep dig.
The front page lacks a clear message. If users are not already in the know, they have no idea what JPMorgan Chase & Co. is all about. Some images hint at general intent, but they are very weak at best. There is no clear headline or a strong CTA that directs the user to a clear funnel. The front page should be as clear as possible regarding the business’s intent and what it can give to the user.
From a visual standpoint, the original front page lacks appeal. Components have inconsistent features and don’t adhere to any coherent design system. Various elements are misaligned. The homepage relies heavily on photos, but the pictures used don’t convey the desired messaging.
Once the audit is complete, the redesign process begins. I start with exploring competitors and creating mood boards. Then from sketches, to concept, to wireframe I start to build and iterate on the design until it is ready.
Here is an example of 8 different ideas. 2 of them I explored more as concepts.
Sketching allows me to come up with lots of designs in a short period of time. It also helps to get rid of the first bad or obvious ideas, slowly revealing the better ones that are usually hidden away.
Here are 2 of the concepts I created, which I developed both into low-fidelity wireframes.
These help me to quickly iterate on sketches. I can see if a design has potential without wasting a lot of time on detailed creations.
Out of these two I chose the best one to develop high-fidelity final designs of.
Potential designs are further explored by creating a more detailed version of them. The focus is on space, composition and layout.
I revamped JPMorgan Chase & Co.’s homepage from the ground up, emphasizing the copy and introducing a modern design.
A clear messaging is key to the design’s success - users and potential clients need to know what JPMorgan Chase & Co. are all about. I came up with a strong headline to place in the center of the screen. Below that there’s a CTA for more information.
A powerful message goes a long way when it’s within a clean and modern design. I used the client’s accent color for CTAs, while keeping the rest of the page calm and let the images do most of the heavy lifting. I used Poppins, a sans-serif font, to give the website a modern and clear look and to complement the logo’s more traditional design.
The original design did not enhance the user’s experience of the website, but hindered it. The original carousel is now replaced with a full screen hero carousel and a timer at the bottom, clearly indicating the status. Two additional features include a search function, empowering users to explore the website on their own and a scroll arrow at the bottom, suggesting additional content is available below the fold.
Each page in the carousel tells a new story about the client, their mission and goals. Each page has a unique CTA that sends the user to a different section of the website. The transition is slow and smooth, in a manner that keeps users immersed in the experience, without hurting their eyes.
