MoneyOwl Website
Adapting the website to fit the changing world.
When a challenge arises due to the changing world, the website must be adapted to match it to survive. This was the case for the MoneyOwl website when the pandemic hit the world. To reconnect with customers now standing behind screens, I was tasked to implement changes to the website.
My Role
Time Frame
UI Designer
Jan 2022
Prototyping SiteMapping
1 UI Designer
Team
Skills Used
Problem
Offline services can no longer be accessed like before.
Before the project, the MoneyOwl website was only available in desktop format, and certain services were only available by direct contact towards the company, such as creating a Joint-Account between 2 individuals. However, this was not possible due to the pandemic, so the company decided to slowly implement these services to enable their customers to access them in the comfort and safety of their homes.
Goal
Design new webpages with the services while adapting elements from the existing company design system into desktop and mobile formats so future clients can complete them without physical contact with the company. Create email templates that clients will receive to be kept updated with any changes.
I will only be designing for mobile format
The Planning
Before diving into the drafting stage, I read through the detailed documentation and spreadsheets about the current website prepared beforehand by the design team at MoneyOwl. This was very useful in allowing me to understand the design implemented by the website and what is required on the pages that I have to design. For example, retrieving identification documents from customers, which is an important security step when creating an account.
Sitemaps were made during the discussions, outlining what steps the users need to complete to finish their new joint account set-up and how the website would react in response to the user’s every action.
Ideation & Site-mapping
Challenges
There are two different types of Joint Account available for creation: an account consisting of two adults, and another between an adult and a minor (under 18 years old). Both types work differently, requiring different sets of steps and actions to reach the user goal, which required more careful planning. I also had to recognise when emails must be sent out to the user(s) whenever an action has been made, which was another challenge as I had to constantly reread the sitemaps to ensure that I have got all of them down, while at the same time ensuring they have a consistent design and look that the client is satisfied with.
One of the sitemaps when ideating.
Design Stage
There is already a pre-existing brand style guide, so the new pages were designed according to what it has. However, some additions were made to the style guide as the new webpages progressively evolve, like having new colours to symbolise different errors occurring during the creation of the Joint Account. Graphic elements were also created by me for the company’s usage.
Graphic elements designed.
Final Mock-Up
When the user wants to create an account, the user will be able to do so by accessing his Portfolios page and clicking the “Add Portfolio” button, which will then bring him to the new Portfolio Type Page. This will be the crucial first step for the user to decide what account they want to create.
Creating a Joint Account
Joint Account: Uploading Information for Minors
If the user decides on creating a Joint Account with a Minor, he would be required to fill in a series of forms and upload necessary identification documents to fulfil the security measures of MoneyOwl.
Joint Account: Adding a Adult Holder
if the Secondary Holder happens to be an adult, the procedure is simpler, requiring only a few security details to continue.
Secondary Adult Account Holder Acceptance
As this is a Joint Account between 2 Holders, the acknowledgement of the account creation must be done by both parties. This would not be necessary if the secondary holder is a minor (under 18). Only until the secondary adult holder has acknowledged the account creation, then will the account be officially processed by MoneyOwl.
Other scenarios that could happen have also been considered, and were implemented as well.
Responses: Emails and Notifications
To ensure that all parties involved are well informed of the moving steps in creating the accounts, emails and notifications will be sent to them to inform them of the progress and what actions they need to take to ensure a smooth process.
Other pages
Reflection
This project is one of the biggest projects I’ve done, having to design over 40 new webpages for just a single project. The client to designer interactions were eye-opening, as I was used to receiving information from my Design Lead instead of the clients directly. Overall, I had a great time in this project, and gained a better understanding of the financial securities and designs needed in a project which demands intense security measures.