MSUX Bank Website

This is an individual assignment from the class Experience Design.

I designed three versions of a home web page of the pretend MSUX Bank. The three versions each lead to radically different user experiences. I use different design elements to support the intended experience of each version, including shapes, colors, fonts, layout, language and so on.

Version 01

Overall Experience: Business Style

Reliable, Modern, Advanced

Design elements:

Layout & shapes:

The main vision is concise and flat. It is easy for customers to find out what they need. Additionally, I add four icons in the below, so that users can find the four most commonly used banking services as soon as possible.

Colors:

Blue is formal and makes people feel reliable.

Language:

The main view conveys the professional attitude of the bank, and keeps pace with the times, with a sense of science and technology.

Version 02

Overall Experience: Cordial Style

Youthful, Vigorous, Approachable

Design elements:

Layout & shapes:

I use illustrations in my main view, which is more cordial. Correspondingly, the ID card of client managers is another eye-catching place. The bank is no longer a cold financial machine, but more humane.

Colors & Fonts:

Pink is youthful and vigorous. Maybe it is strange to use pink for banks, but it has a feeling of celebrating the cherry blossom season, and banks can also try some novel visual effects.

Lower letters are friendly and approachable.

Language:

The main view conveys the friendly attitude of the bank, and willingness to help.

Version 03

Overall Experience: Modern Style

Innovative, incisive, unshrinking

Design elements:

Layout & shapes:

The main vision uses pictures which reflects the features of MSUX bank. Three pictures can tell people the vision of bank, which cares about people’s welfare and happiness. The shape is formal and business.

Colors & Fonts:

Blue is formal and makes people feel reliable.

Capital letters are firm and stable.

Language:

Pictures is the first step of storytelling this homepage version. Eagle is also a symbol of bank, which is incisive and trenchant. It means the bank could make right decision and sagacious.

Reflection from three versions

Visual effect could convey different attitude of company and business. I use visual languages to storytelling, which includes layout, color, fonts and shapes. Through observing people’s usage habits and the design styles of different websites, designers can understand people better and know how to motivate people's emotion.

Made by Hannah💖 @2024. No cookies here 🍪