MasLife: Designing Fintech for Millennials

MasLife is a FinTech Start-up based in London, United Kingdom. The mission of MasLife is to integrate financial health with physical and mental well being. The company operates as a bank, managing accounts, and linked debit cards. Maslife is different in that not only helps you track your financial health but your holistic health.

I was brought on as a UX/UI Designer to help with some immediate needs including an online onboarding flow as well as creating a new and engaging website.

The Original Site

Above is the original site. The image in the background is a .gif displaying multiple 

soothing nature images. The site was modern but too flashy for a bank/financial service. 

I wanted to swap the hero image with something which instilled confidence in Maslife as a 

financial institution. Further, after consulting with the founder, I learned they wanted to

target millennials. These two criteria helped me with my first few drafts.

First Draft

I like to start out with small changes first. When I redesign I always to try to keep as much 

of the original as possible while still upgrading and staying true to established goals 

and accessibility rules. I demonstrate such here by keeping the image nature themed. 

I picked a darker image to bring out the white font. I also placed a transparent box behind 

the text to give it pop. I reduced the margin of the text to give the information a more

structured feel and moved the submit button to below the input fields to mimic that feel. 

In addition, I changed the shape of the button to retain continuity with the input fields. 

Second Draft

I started by changing the background to a static image. I picked this image because of the joy it communicates as well as the innate marketing composure with the subjects being positioned to the right of the frame. 

Next, I lowered the point size of the font in the menu and made all the words lowercase to communicate a modern style. I then added some more relevant text on the homepage adding brand context to the viewport to give first time visitors a better understanding of the 

company's goals. 

Next I made the input fields darker against the background and increased their proximity to each other.

Third Draft

For my third draft, I returned to the original landscape background and chose a picture with a similar tint and temperature. I then used the color wheel and the rule of two-thirds to add in the yellow and white as secondary and tertiary colors.

There seems to be a trend of including the social media icons of a firm on the homepage or in and around the header so they are seen in the viewport. I decided to experiment with this trend and purposely used encircled icons giving contrast to this section, drawing the users eye to them.

I really like the use of cards in design. I believe them to be an efficient way to contain related elements and information. I especially like cards when they are being used outside of mobile applications. You will find cards used as a motif thought out this particular design.

  

Fourth Draft

Keeping with the original theme I once again used a hero image involving nature. This time an island surrounded by water. I really like the green presented in the picture. I felt the image really represented an ideal of calm which is a good feeling to represent when talking about wellness. Once again I used the social media in the viewport trend.

One way this design stands out is by aligning the content down the middle. Everything, including the homepage menu is focused down the middle. My favorite feature of this design is the input field which stands independent as an island. It is the focal point of the page encouraging the user to concentrate here and ease them into submitting their information.

Task 2: Onboarding Web App

The second task I was given was to create a web based onboarding sequence to help initialize the app for individualized use.

I wanted to create an environment where the user would have minimal distractions but still understand the brand was tied to the process. This is where the header and footer come into play. They both maintain the brand aesthetic by incorporating the colors. In addition the header retains the hero image found on the homepage. Flat illustration is a popular trend at present in design so I decided to include a few to incubate the site's relevance as well as add some flair to the design. 

This form efficiently contains all the information needed to launch an account in a concise way. It maintains appropriate spacing between elements to help the user keep their place when completing. 

The background of the input fields are light blue to give them some contrast to the white background.

Active state is denoted by the stroke of the box turning to dark blue. Error state is represented by the input field box turning red upon a submission fail. 

The next 2 screens were a challenge. I needed to collect 12 different inputs of information all while allowing the user to give as accurate an answer as possible. I did not want to use another form so I got creative.

I used sliders as a modern and fun feature and gave the space they revealed colors to indicate their position on the the scale starting at: red for low, going into yellow as medium, and green for high.

The information is collected on the backend to create a customized plan for the user. 

This screen is a loading screen that appears while the backend records and creates 

the customized plan.

Again the flat image is a focal point of the design. A superhero to represent that the user has completed an important task.

Below is the completion screen that displays the recorded answers and informs the user they have  finished onboarding. It also directs the user to the mobile app where they may begin using the app according to their plan.

Conclusion

I enjoyed working on this project. It was the most extensively I used Sketch beside one prior project. I enjoyed my time with Maslife and in the London neighborhood of Knightsbridge. If you want to work in FinTech, London is definitely the place, as a result of many up-and-coming startups looking to make an impact.

This was also one of the first times where I had to step into a design style and system which already existed. There is a different pace of work when the assets, colors, and elements have already been picked and are in use.

It takes effort and patience on a new designers part to try to take the designs to the next level while still retaining already established brand feels and user experience.