Exploration in Web 3.0
How might we make online banking a more delightful and enjoyable experience while innovating with new technologies.
This design focuses on the redesign of a personal banking dashboard. The task at hand was to reimagine what this present day dashboard would look like if it were designed as a Web 3.0 styled dashboard.
- Problem Analysis
- Project Plan
- Primary Research
- What is Web 3.0?
- User interviews
- Target user group / personas
- User features
- Sketches & ideation
- Design Solution
- Visual design
- Testing & Analysis
- Testing strategies & methods
In order to formulate this design idea I needed to further investigate Web 3.0 since I was vaguely familiar with this terminology. I also conducted research on the users wants and needs in a personal banking dashboard.
I had heard of Web 3.0 but was unfamiliar with it's exact definition. And what a Web 3.0 dashboard might look like. After some light Google searching I came across an article Web 3.0: The Third Generation Web is Coming. Upon completing this article I had a better understanding of what Web 3.0 is projected to be.
Simply put, Web 3.0 is the intelligent web. Meaning that the web learns, adapts, and adjusts to the users wants, needs, familiar, or frequent tasks. Either customizing automatically based on data. Or affording the user an opportunity to make those adjustments based on the systems recommendations.
Before I could begin designing, I felt it was best to conduct a bit of field research to see what was important to users and what they predominately used their online banking for. This research was conducted via text message, email, online messaging apps, social media and face-to-face conversations.
I feel that this was a very valuable part of the design process because it gave me insight on the users wants and needs. The data I collected also helped formulate the overall strategy for the redesign of this dashboard.
What I found in my research was that users want to check their balances, check their transactions, transfer funds, and pay bills
Target User Groups
After conducting the user research I discovered that they are many groups of online banking users. Those groups ranged based on social class as well as position in household.
I decided to focus this design on young-professionals in their early-to-mid thirties. They all average about $45-65,000 per year and work in the technology industry.
Brian is a 31-year-old back-end developer that works for a local startup technology company called Wizardly Widgets. Brian drives a Toyota and lives by the beach. He likes to shop at Macy’s and other department stores but buys items when they are on sale. Enjoys kung fu and soccer. He often checks his account balance during the week to keep an eye on his finances.
Magdalena is a 32-year-old user interface designer that works for an ad agency called Levitate. She does not drive she prefers to take city transit. Magdalena lives in the hip part of town. She likes shopping at boutiques and getting designer labels. Enjoys traveling and going to dinners. She hates having to remember her bills and likes to automate their payment.
Daniel is a 30-year-old project manager that drives a used BMW he paid off and lives in a swanky upscale neighborhood. Daniel is very thrifty with his finances. He shops at top department stores but looks for deals on last seasons items. He enjoys the nightlife and lifting weights. He typically uses his online banking to transfer money to his savings or investment accounts.
The features that I decided to target in this redesign were based on the data collected during the initial research.
Those features are listed in order of importance: check account balances, review transactions, transfer funds between accounts and pay monthly bills
Sketches & Ideation
Based on the emerging theme this iteration to presents account balances as the most important information related on the screen.
Layout concepts we're based on two patterns in which user's scan a page, dashboard or content for information.
The layout patterns are an F layout - which is a layout where people move through the page in the pattern similar to the letter f. And a Z layout – which is were people move through the page in a pattern similar to the letter z.
I chose these layouts for familiarity.
Keeping Web 3.0 in mind I also tried to imagine the dashboard as movable blocks of content. By keeping the sketching process focused on simplicity and function it allowed me to move through several possible solutions before coming up with one I felt best represented what I was trying to create.
Wire-frame & Visual Design
The layout I chose to further expand my design vision on is a simple and straight forward concept.
The goal of this design was to be familiar to the user. I looked closely at dashboards I use on a daily basis paying attention to patterns and placement of touch points and content areas. I also did an online search for design inspiration dubbed “Web 3.0 dashboard”. One of the dashboards I gathered my inspiration from was WordPress. I felt it would be a similar dashboard layout that the targeted user group may have encountered in some capacity. Even though it’s not a dashboard that makes automated changes or suggestions for the user, it does have the capability of customization and rearrangement of its widgets.
Because this system is provided to banks the design needed to be flexible and work well with branding specific guidelines for each institution. I chose a popular bank in the United States and emulated my concept off of their perceived style.
Testing Strategies & Methods
In order to test this design, key performance indicators (KPI’s) need be established.
However some proposed methods that could be used to test this assumption would be paper prototypes testing layout and functionality, clickable prototypes for interaction tests, or release an MVP and gather user feedback.
I feel that the current design solution is a great representation of what a personal banking dashboard could look like based on Web 3.0 principles and ideas.
However if I could spend more time working on this project I would like to create some iterations based on other user persona’s in the different social classes and income brackets to see the possibilities of layouts and what other content might become important to the different groups of users.
I would also like to look at the layout from a responsive standpoint and how I could carry the user experience over to other platforms like mobile apps and devices.
A final area that I feel I would enjoy some deeper exploration would be “on page” interactions and how the user’s tasks could be simplified, if there were any features they may want, like completely closing a section of content or presenting content blocks differently.