Case study · Fintech product design
Vista UI/UX Design
Project context
Vista is a digital ecosystem for investment products, institutional services, content and education, decision support and risk assessment, and account access.
The design scope included the homepage, fund pages, portfolio management, market making and B2B services, the blog, risk assessment and account-access flows.
Challenge
The challenge sat at the intersection of three related problems without hiding the real complexity of financial services.
Service complexity
Products and services serve different audiences and decision contexts.
Discoverability
People need to identify a relevant starting point without reading every page.
Trust and clarity
Financial experiences require clear information and predictable navigation.
Problem statementHow might a multi-service financial ecosystem become coherent, understandable and actionable without concealing the genuine complexity of financial services?
Role and scope
As the UI/UX Designer, I defined the experience structure and translated it into a coherent responsive interface, from page architecture to reusable patterns and handoff.
Design responsibilities
- UX structure and page hierarchy
- Information architecture
- User-flow definition
- Wireframing and layout exploration
- Responsive interface design
- Visual UI design
- Reusable interaction patterns
- Design handoff and development collaboration
Project scope
- Core experience
- Homepage
- Products
- Investment products
- Institutional services
- Market making and B2B
- Decision support and risk assessment
- Assessment and result flow
- Content and education
- Blog and articles
- Account and access
- Investor login and OTP
Understanding the ecosystem
The service scope was grouped by content type, decision and access path.
Investment products
- Vista funds
- Sobat
- Akam
- Behinro
- Portfolio Management / PMA
Institutional services
- Market Making
- B2B Services
Content and education
- About Vista
- Blog
- Educational content
Decision support and risk assessment
- Questions
- Risk profile
- Recommended next step
Account and access
- Investor login
- OTP
Users and needs
User groups were organised around their needs and the tasks they want to complete.
Investor exploring options
Understand products and choose a suitable path.
Investor seeking professional management
Understand PMA and initiate consultation.
Decision-support and risk-assessment user
Understand a risk profile and next step.
Institutional-services client
Discover services and submit a request.
Content-and-education user
Access education before deciding.
Primary user flows
The primary flows show the path from an entry point to the relevant action.
Choosing a fund
- 1Home
- 2Solutions
- 3Funds
- 4Fund detail
- 5CTA
Portfolio management
- 1Home
- 2PMA
- 3Benefits
- 4Consultation request
Decision support and risk assessment
- 1Home
- 2Assessment
- 3Questions
- 4Result
- 5Next step
Institutional services
- 1Home
- 2B2B / Market Making
- 3Details
- 4Request
Key UX decisions
Shared service-page structure
- Problem
- Content differs, but people should not relearn navigation.
- Decision
- Consistent hero, benefit, detail and CTA patterns.
- Rationale
- Reduces cognitive switching.
- Trade-off
- Some pages need custom modules.
Multiple investment entry points
- Problem
- People arrive with different intent and knowledge.
- Decision
- Expose funds, PMA and assessment as parallel paths.
- Rationale
- Avoids a forced single funnel.
- Trade-off
- The initial choice set needs hierarchy.
Assessment as decision support
- Problem
- Financial choice can be cognitively demanding.
- Decision
- Progressive steps with a clear result.
- Rationale
- Limits information load.
- Trade-off
- Financial-model validity is outside design scope.
Content within the ecosystem
- Problem
- Some people need education before action.
- Decision
- Integrate blog with the main experience.
- Rationale
- Supports informed decisions.
- Trade-off
- Product links must not become promotional.
Risk assessment
This section explains the design logic of the flow and makes no claim about the financial or legal validity of its result.
A dense, single-step form could make the questions and progression harder to follow.
To reduce cognitive load and guide the decision progressively, risk assessment was divided into a multi-step flow.
- 1Entry
- 2Questions
- 3Progress
- 4Completion
- 5Risk profile
- 6Next step
- One decision at a time
- Visible progress
- Clear selection states
- Understandable result
- CTA after result
Risk-assessment result
The final state presents the profile summary and suggested next step at the end of the flow.
Service page design
A scalable page system keeps the foundation consistent while allowing context-specific modules.
- 01Hero
- 02Proposition
- 03Supporting explanation
- 04Benefits
- 05Trust or content
- 06CTA
Portfolio Management / PMA
Process and consultation
Market Making
Institutional service
B2B Services
Service scope
Fund pages
Product information
Module order, explanation depth and CTA type vary with service context.
Two applications of one shared pattern: the foundation remains consistent while content, explanation depth and action adapt to the service.
Portfolio Management / PMA
The service-page pattern applied to process explanation and consultation.
B2B Services
The same foundation with modules and actions adapted to an institutional audience.
Final UI examples
Two product-detail pages show how a reusable structure supports funds with different content.
Akam Fund
An application of the product-detail structure for the Akam fund.
Sobat Fund
The same reusable structure with Sobat fund content.
Visual system and UI foundations
The visual system unifies typography, colours used in the interface and the foundations of recurring components.
Interface typeface
Yekan Bakh FaNum
Regular · SemiBold · Bold · ExtraBold · BlackColours used in the interface
- #374151
- #3A52A0
- #034EA2
- #01B69B
Type hierarchy
Defined roles for headings, explanations, data, labels and actions.
Spacing and grid
A consistent rhythm across editorial pages and dense modules.
Colour and contrast
Separate roles for interface, neutral, feedback and state colours.
Shape and surface
Cards, dividers and surfaces use controlled, purposeful decoration.
- Navbar
- Footer
- Cards
- Buttons
- Forms
- Fund patterns
- Responsive modules
Accessibility
Accessibility considerations focused on readability and predictable interaction.
Contrast awareness
Distinguish text, backgrounds and controls.
Readable hierarchy
Support scanning.
Touch targets
Allow sufficient control space.
Visible states
Show selection, focus and status.
Form labelling
Do not rely on placeholders.
Predictable navigation
Keep primary behaviour consistent.
Beyond colour
Pair colour with text or form.
Retrospective Evaluation
Without verified usability-test data, this is an expert retrospective review—not a measured behavioural outcome.
- 01Consistency
- 02System status
- 03Recognition rather than recall
- 04Hierarchy
- 05Error prevention
- 06Experience continuity across screen sizes
Strengths
- Shared interaction language across the ecosystem.
- Parallel paths for different intents.
- Structural continuity across breakpoints.
Improvement opportunities
- Reduce density on selected service pages.
- Strengthen product comparison.
- Clarify recommendations after assessment.
Outcome and learnings
The work produced a coherent responsive system across investment products, institutional services, content and education, decision support and risk assessment, and account access.
Lessons
- Financial UX requires clarity before visual complexity.
- A scalable page system beats designing pages independently.
- Different intents should not be forced into one funnel.
- Decision support needs stronger guidance.
If I revisited the project today
- Structured usability testing
- Analytics-based funnel evaluation
- Fund comparison tools
- Contextual personalisation
- Formal accessibility audit