Concordia Capital

Concordia Capital

Case Study 1

Case Study 1

ENHANCING VISUAL ELEMENTS

homepage - before

homepage - before

homepage - after

homepage - after

SECTOR

SECTOR

timeline

timeline

TOOLS

TOOLS

Figma, Optimal Workshop, Wix

Figma, Optimal Workshop, Wix

2 months

2 months

Investment Banking

Investment Banking

Team

Team

SKILLS

SKILLS

Alone, entire project from redesigning to implementing on Wix

Alone, entire project from redesigning to implementing on Wix

Website UI, Mobile UI, Analysis, Research, Interview, Fidelity

Website UI, Mobile UI, Analysis, Research, Interview, Fidelity

project CHALLENGE

project CHALLENGE

  • I face challenges with limited user feedback and restrictions on client data, which prevent personalized UX improvements
  • The company prioritizes quality over attract new users --> Couldn’t do market research since most financial sites focus on getting new customers
  • I work with a website built on Wix, which limits the changes I can make due to technical constraints

I face challenges with limited user feedback and restrictions on client data, which prevent personalized UX improvements

The company prioritizes quality over attract new users --> Couldn’t do market research since most financial sites focus on getting new customers

I work with a website built on Wix, which limits the changes I can make due to technical constraints

HOw i overcome

HOw i overcome

  • Used evaluations, insights from other users, and data to guide decisions
  • Kept layout clear, with a consistent structure and scannable text
  • Made design simple to allow changes on Wix

Used evaluations, insights from other users, and data to guide decisions

Kept layout clear, with a consistent structure and scannable text

Made design simple to allow changes on Wix

goals: enhance visual elements

goals: enhance visual elements

Increase Professionalism and Trust

Optimize Information Presentation

Support Multi-Device Usage

Encourage interaction, while protecting client privacy by not showing transaction details or success stories

Redesign the layout to highlight important information, improving readability

Redesign the website and create mobile version

Pain Points: content, Navigation, Mobile Access

Pain Points: content, Navigation, Mobile Access

Overwhelming Content

Users find long paragraphs on Homepage and News/Insight pages difficult to digest, leading to information overload

Overwhelming Content

Users find long paragraphs on Homepage and News/Insight pages difficult to digest, leading to information overload

Insufficient Buttons

Users struggle to find specific information due to the lack of buttons

Insufficient Buttons

Users struggle to find specific information due to the lack of buttons

No Mobile Version


Users cannot access the site from mobile

No Mobile Version


Users cannot access the site from mobile

Success: Clicks & Content Interaction

Success: Clicks & Content Interaction

Trust and Professionalism


  • 433% increase in Clicks to Contact shows that users are more willing to engage --> the redesign encourages users to take meaningful actions

Trust and Professionalism


433% increase in Clicks to Contact shows that users are more willing to engage --> the redesign encourages users to take meaningful actions

Layout improvements and Content optimization


  • High increases in Unique Visitors, Sessions, and Page Views shows a growing interest in the site --> the redesign effectively draws attention and keeps users engaged
  • High increases in Average Time on Page shows that users are finding the content more engaging and valuable --> the redesign improves content presentation and readability

Layout improvements and Content optimization


High increases in Unique Visitors, Sessions, and Page Views shows a growing interest in the site --> the redesign effectively draws attention and keeps users engaged

High increases in Average Time on Page shows that users are finding the content more engaging and valuable --> the redesign improves content presentation and readability

*Please note that the current website might look different from the version in my case study, as the company may have made changes after my internship ended.

discovery

clear navigation, needs mobile & visual improvements

Interviewed 6 users to understand their first impressions, navigation, content, and visual design

Sorted and visualized responses to spot trends and patterns

Used insights to identify user pain points

Decisions Based on the Data


Content Overhaul: Redesign paragraphs with bullets, subheadings, and visuals

Mobile-Friendly Redesign: Develop a responsive version of the site to engage a broader audience

Branding Improvements: Enhance visuals and unique design elements to make the site stand out

Navigation Tweaks: Improve interactivity by making logos clickable and optimizing the navigation bar

Heuristic Evaluation

Visual Design


The large logo unbalances the navigation

'Firm Overview' is repeated on the homepage

Missing images/icons slow down info access

Uniform text size makes long sections overwhelming

Links and URLs


One email link is broken, and the other is missing letters

Some page links lead to the wrong places or lack easy navigation back

Wrong URLs

Layout Issues


Different margins across pages make the site look uneven

Navigation bar titles don’t update when switching pages, confusing users

'Unique Mandate' section is hard to read due to cramped layout and dense text

Flow and Interaction


There's no button to jump to other Team bios after reading a bio

News sections aren't fully clickable

feature analysis: Content, Engagement & Navigation

Homepage Dominance


Receives the most traffic --> Optimize visual appeal and balance design

Low Traffic on News/Insights and Advisory Pages


Limited views, aligning with the heuristic findings of overwhelming content and poor readability --> Breaking down content using bullets, visuals, and subheadings to make information digestible and increase engagement

High Bounce Rate on News/Insights and Team Bio Pages


This supports the heuristic results indicating dense paragraphs and lack of visual aids --> Add visuals and interactive elements to these sections to retain users and improve time on page

Cross-Linking for Low-Traffic Pages


The heuristic evaluation flagged navigation issues, like non-clickable elements and missing links --> Cross-linking is proposed to create a more seamless flow between pages, boosting visibility for underperforming sections

The card sorting method indicated that users are satisfied with the current information hierarchy, confirming that the user flow is already straightforward and simple, and does not require changes.

Solutions: Trust, Usability, and imternal traffic

Increase User Trust


Simplify content, add visuals, and enhance navigation for clarity and professionalism

Enhance Professionalism


Balance visuals and improve text hierarchy to create a polished, trustworthy brand image

Enhance Usability


Fix links, optimize content display, and ensure mobile accessibility

Greater Visibility for Low-Traffic Pages


Instead of using buttons to promote services (business focuses on customer quality in stead of quantity) --> the homepage will include buttons linking to other pages

The company focuses on specific customers and values quality over quantity, unlike other banks. So I created a moodboard to understand the company's vision instead of conducting traditional market research.

moodboard

I developed 8 different visual options, which was challenging because the company wanted minimal changes to the existing visuals. The CEO selected this option that best matched his preferences.

SOLUTIONS

*Please note that the current website might look different from the version in my case study, as the company may have made changes after my internship ended.

Design System

Aa

Aa

#0F52BA

#008E75

AAA 9.56:1

AAA 13.23:1

Helvetica

Times New Roman

The company wanted simplicity, so I chose Times New Roman for the header font to convey professionalism and trustworthiness, and Helvetica body font, which ensures readability and a clean, modern look

I chose blue as the primary color (company color) and cold grey as the secondary color to add a modern, refreshing contrast, replacing the old warm grey that felt outdated and dull

I chose simple rectangular buttons with sharp edges for a clean, professional look, using two primary buttons for key actions and one secondary button to maintain a clear hierarchy and consistent user flow

Since the main focus is on the visuals, and both the flow and information hierarchy are already effective, I will focus solely on creating high-fidelity prototypes to enhance the visuals.

High fidelity prototype

*The current website might look different from the version in my case study, as the company may have made changes after my internship ended.

I developed the mobile version of the site based on the existing web design. Since the company uses Wix to manage the website, the options and layouts are quite limited. To work within Wix's constraints, I focused on creating a clean, responsive layout by simplifying elements and prioritizing essential features. The trade-off was that I could only perform basic customization and interactions for both the web and mobile designs.

take aways

Platform Limitations

Working within the constraints of Wix taught me the importance of understanding and adapting to specific platform limitations in web development.

Industry and Company Constraints

I learnt the importance of balancing creative design with industry regulations and company preferences limited the scope of changes I could implement.

Client Access Limitation


I couldn't get in touch with the real clients, so I used alternative users to identify pain points. This taught me to rely on feature analysis, information hierarchy, and data to support my research.

THANK YOU FOR YOUR VISIT

 Please check out my       and               for more.

© 2024 PORTFOLIO

by anH V LE