Project Overview
The Product
Sekto is a digital banking platform that simplifies financial management for individuals and freelancers. The responsive web version allows users to open accounts, manage finances, and access banking services without visiting a physical branch.
Duration
Role
Tools
4 months
UX/UI Designer
Figma, Miro , Google Forms, Chatgpt, Notion
The problem:
Users needed a convenient way to open and manage their bank accounts without visiting a physical branch. However, the existing experience wasn’t fully accessible on desktop devices, making it difficult for users to manage finances seamlessly across platforms.
The goal:
To design a responsive web platform that allows users to open, manage, and monitor their Sekto accounts easily and securely across all devices, ensuring a consistent and accessible digital banking experience.
The Process
User Research:
For my user research, I did a few user interviews and a usability study to learn how people use online banking platforms. At first, I assumed users mostly cared about how modern or attractive the design looked but after talking to them, I realized that most frustrations came from not understanding how to manage different accounts, slow onboarding, and not being sure if actions went through. This helped me refocus my design on making things clearer, faster, and easier to navigate.
Initial Key Insights
Initial Key Insights
1. Users struggled to find key actions, like viewing account details or accessing support, especially when switching between screen sizes.
2. Important information like balance or transactions wasn’t immediately visible, leading to confusion on smaller screens.
3. Difference in screens meant keeping the design more familiar to the native app of the product
Information Architecture
A simple familiar sitemap to help me understand the structure I want for website, I chose to go with Hierarchical model
Features
About
Live Transaction visibility
Instant Account Setup
Account Management
Smart Tools
Our Story
Mission & Vision
Homepage
Support/AI Agent
FAQs
Contact Support
Login/Signup
Login
Create Account
Footer/Others
About us
Contact Us
Help
Paper Wireframe
I focused on visual hierarchy, accessibility, and how users like Lindiwe could quickly understand the product and open an account with ease.
In this stage, I explored layout variations for key web screens like the homepage, account selection.
Digital Wireframe
I chose to make the call-to-action more visible to help user open an account as it was the core problem they had, if they need to learn more before commit it easy accessible
A call-to-action button to get users open their account easy without confusion
A value proposition section where users are clearly informed about what they get from using our services and why other people choose to use them too
Digital wireframe screen size variations
I created responsive mockups of the homepage to ensure consistent usability across desktop, tablet, and mobile devices.
Website
Tablet
Mobile
Usability study: parameters
Study Type
Moderated and unmoderated usability study
Participants
5 participants
Location
Johannesburg and Ermelo, remote
Length
15-20 minutes
Mockups
To improve more on trustworthy of the product I decided to show a social proof that can be implemented to get more users to trust the product and show how it can be efficient
Before usability study
After usability study
Mockups
After conducting the usability study, I realised the importance of asking open-ended questions to uncover users’ real challenges. As a result, I added a text field to the “Freeze Card” feature, allowing users to describe their issue in their own words and making the experience more user-centered.
Before usability study
After usability study
Final Designs
Accessibility considerations
I used high-contrast color combinations and sufficient text size to ensure readability across all screen sizes.
I maintained consistent navigation and clear visual hierarchy to support users with cognitive or visual challenges.
I ensured all interactive elements, like buttons and links, have large tap targets and proper spacing for accessibility on touch devices.
Takeaways
Impact:
Participants were quite impressed that the product is responsive and can be access from different devices. “Now I can access it from my laptop” one participant said
What I learned:
Through this project, I learned how responsive web design enhances accessibility and convenience for users across different screen sizes. I also realized the importance of thoughtful layout adjustments to maintain usability and consistency as designs adapt to various devices.
Next Steps
Conduct additional usability testing to validate how users interact with the responsive layouts and identify any navigation challenges across devices.
Refine visual consistency and accessibility, focusing on improving contrast, spacing, and text hierarchy for better readability on mobile and tablet.
Explore micro-interactions and motion design to make transitions smoother and enhance user engagement across devices, creating a more intuitive and enjoyable responsive experience.