MG Group
Online Banking
ROLE
UX/UI Design
Visual Design
Branding
UX Research
GOAL
Create a trustworthy customer portal where users can complete tasks easily and confidently.
CHALLENGE
Design a clean interface packed with functionality, while making complex flows feel simple and intuitive.
Getting to know the user
Research & audits.
We started the project by conducting several interviews with our target audience: people aged 28 to 50 who use online banking services. Many participants expressed frustration with their banking apps, particularly when dealing with unfamiliar terminology or struggling to find the features they needed.
We also conducted a competitive audit to understand the existing market, identify competitors’ strengths, and uncover opportunities for improvement.
The design process
El proceso
de diseño.
We started by mapping the website structure. This helped us identify the most important pages and understand how users would navigate between them.
We decided to design the web portal first and then adapt the experience to the client’s mobile app.
We began by sketching wireframes on paper. Once we identified which structures and flows worked best, we translated them into digital wireframes.
We created low-fidelity prototypes and used them to conduct an unmoderated usability study.
Participants were able to complete the transfer flow without any significant errors or notable negative reactions.
With the main flow validated, we moved on to the UI and started designing the high-fidelity screens.
The high-fidelity mockups allowed us to visualise the transfer flow using the brand’s colours and visual style. We then created an interactive prototype to explore the experience in more detail.
To validate the functionality, we conducted another usability study and confirmed that users could complete the experience without major issues.
Once the web experience was working well, we adapted the design to the mobile app, making sure the interface remained coherent while maintaining the brand identity.
Moving to a different platform required us to rethink the appearance and placement of certain elements to better suit mobile usage.
Maintaining consistency across both products helped strengthen the brand and create a seamless experience across platforms. Users should perceive the brand as consistent, solid, and professional, regardless of the device they use.
Take a look
Prototype video.
Outcome.
What I learned
When adapting a product to another platform, we need to consider that the context of use can be completely different. The device itself also offers different possibilities, which directly influences the user experience.
For example, on desktop, users may need to enter a password to verify a transaction, while on mobile we can take advantage of biometric authentication such as Face ID or Touch ID.
Next steps
We now have a validated transfer flow, but the work doesn’t end here. The next step would be to test the product again, introduce new user flows, and keep iterating based on user feedback.
More Work
Floramía
Tienda online
UX / UI / DISEÑO VISUAL / BRANDING / RESEARCH
