We provided a complete package. Furthermore, the beautiful design of the website was an added bonus, enhancing the enjoyment of the website for family office clients. The family office expressed satisfaction with the website and would not change anything.
iGuardian
Redesigning a website to hit target customers perfectly.
iGuardian is a Digital Family Office that uses patented technology to provide professionals and family members with clear control, unlocking the potential of significant wealth. It addresses challenges from disconnected systems or manual processes by seamlessly integrating essential operational and managerial tasks within a unified, secure platform. This includes managing information, ensuring compliance, and overseeing trust administration and archiving.
Leading with purpose: What iGuardian is all about
This story is about a 3-month journey I took as a UI/UX designer to reimagine the old website for a big corporate — iGuardian. This case study explains our approach on how a digital family office website was redesigned end to end along with its branding.
I redesigned the website to present a clear overview of the business by consolidating relevant information in one place. Additionally, we gained valuable insights into how we improved the website to effectively reach our target customers, aiming to convert visitors into signups or leads.
The family office featured in this case study chose to remain anonymous.
Roles
I assumed the following roles designing this website:
-
User Experience (UX) Designer
-
Interaction (IxD) Designer
-
User Interface (UI) Designer
-
Visual Designer
Deliverables
Interaction Design: High-fidelity interactive prototypes for key tasks on desktop, and mobile
UX/UI Design:
-
Research
-
Competitive analysis
-
Site map
-
Personas
-
UI kit
-
Low-fidelity wireframes
-
High-fidelity mockups and prototypes
-
Usability tests and findings
Project Specifications
Duration: 3 months
Tools:
-
Figma
-
FigJam
-
Miro
-
Photoshop
-
Illustrator
The Opportunity
When the company grew, a website redesign was in order. And it needed to happen quickly. I led the redesign of iGuardian ensuring a responsive user experience across Android, iOS, and iPad devices, as well as on desktop and web platforms since the outset of the project in November 2021.
Up until January 2022, I led efforts to evolve the website and address customer pain‐points related to attracting clients and building trust and transparency with the product.
After analyzing competitors, it was clear that iGuardian stands out as a digital family office, excelling in a specific area: offering a dedicated solution for managing single and multi-family office operations. This unique approach, emphasizing transparency and trust, sets iGuardian apart and creates demand for its patented technology services.
While other family offices exist, iGuardian's commitment to clarity and protection sets a higher standard.
The goal was to completely redesign the iGuardian website and establish a strong digital presence through branding, ensuring a cohesive look in a highly competitive environment.
The Challenge
The primary objective of this UX design began with the following goals in mind:
-
Provide a simple, familiar interface to the users to improve the client’s experience.
-
Increase client retention and engagement with the website as well as our technology.
-
Building trust towards our technology and showing transparency.
-
Give the client a quick way to reach out and raise queries.
-
Attract new clients on the platforms through a cohesive design throughout the platforms.
Proposed Solutions
-
Redesign screens to show clarity of information and a proper path for booking a demo.
-
Make it easy to understand the company's value and showcase services and success stories.
-
Demonstrate our technology and how it all works.
-
Redesign a responsive website to make it easier for users to raise queries through informative and relevant content, guiding potential clients in the right direction.
-
It was important to come up with a modern and appealing visual style for its branding materials, shining a light on the brand's personality.
.jpeg)
Started from Sketches
Brainstorm Session
Research
The initial research for the iGuardian project involved an in-depth analysis of the Family office market and the competition. We thoroughly reviewed similar solutions, examining their architecture, features, and user interfaces. It helped us understand the market landscape and identify opportunities for differentiation and innovation.
Additionally, we analyzed the materials provided by the client, including their business goals, target audience, and technical requirements. It allowed us to gain a deeper understanding of their needs and helped inform the design and development of the new website. The research phase was a critical step in ensuring the project's success as it provided the foundation for a user-centered design that met the client's and their users' needs.
Some of the significant points we focused on were:
Some of the significant points we focused on were:
-
Who are the major competitors?
-
What information iGuardian would like to keep on the home page?
-
What top navigation features would be on the home page?
-
Preference for a specific style for the website?
-
How do the clients perceive the technology iGuardian provides?
iGuardian's Older Website
Findings
-
The landing page is cluttered with unnecessary information, overshadowing the unique problem we solve and explaining why this distinction is crucial. Users are currently manually handling period-over-period tasks, whereas iGuardian provides a digital solution for them.
-
The site's navigation should prominently feature "About Us" to highlight uniqueness and market significance, "How It Works," "Knowledge Center," "Insights" (blog, articles, etc.), "Contact Us", and a call-to-action "Book a Demo."
-
Users require testimonials to establish credibility and trust.
-
Placing a "Book a Demo" button prominently in the header section grabs users' attention.
-
Screens showcasing the technology and detailed breakdowns of services generate interest and foster trust.
-
The webpage lacks sufficient white space, resulting in overcrowding.
-
The preferred color scheme aligns with the previous platform, with a preference for a dark blue background.
One of our goals is making iGuardian website reach more clients, who intend to book a demo and use the technology for their generational wealth management.
Hence, our objective became:
.png){kind=small}
"Redesigning the company website to refresh the brand, attract potential customers, and provide a positive user experience. Utilizing informative content to guide clients, build trust, and convert leads."
Getting Closer to User-Centered Design
We believe that our primary users are high-net-worth clients in law firms, banking, trust companies, accounting firms, and family offices/multi-family offices and our secondary users are the families to oversee their wealth digitally, prioritizing privacy and legacy control.
Armed with a better understanding of how customers feel about patented technology within iGuardian, I felt it was important to define those two sides of the personas I'd be using to drive design decisions moving forward: High-Net-Worth Legal Professional and Legacy-Conscious Family Office Manager.
These personas became important reference points for guiding our design decisions moving forward.
Defining the qualitative details of someone who was on a lookout for innovative tools that can streamline their work and provide a secure platform vs. someone who seeks a digital solution that aligns with the values of the families he serves, prioritizing privacy, security, and efficient legacy control helped me better understand how design would need to support both.
"Striving for confidentiality and detail in every aspect of client service."
Defining Important Tasks
Upon landing on the iGuardian website, users should be able to efficiently secure a demo appointment, expressing a strong desire for a streamlined process. It's crucial that they can swiftly identify and select a suitable demo time, followed by entering their information seamlessly. The ideal experience is one where users feel empowered to accomplish the demo process quickly and effortlessly, all within a few clicks.
As users arrive at the iGuardian website, they naturally navigate to the "What's Different" section to learn more. Here, they explore technology screens, service breakdowns, and engaging videos. Intrigued by showcased clients, they delve into case studies for deeper insights. If they want more information, users easily find the "Contact Us" option to continue their exploration or request further details.
.png)
(Click to enlarge)
.png)
(Click to enlarge)
The Framework: Setting the Design Direction
This site map, the result of the response from iGuardian clients, competitive analysis, and card sorting exercises I conducted, revealed that:
-
Every family office website has a few pages to simplify user-flows between pages by removing unnecessary pages, merging existing and adding new when needed.
-
They wanted a single demo booking process that was easy to follow.
-
The site's navigation would feature "About Us", "What is iGuardian,", "Contact Us", and a call-to-action "Book a Demo" in the initial phase.
-
Arranged meetings with the client and our team members consisting of the head members, content team, and the SEO team on a regular basis and facilitated them in organizing the website's content into appropriate pages and sections.
Creating Site Map for iGuardian
Identifying Design Patterns Through Rapid Sketching
Through rapid sketching and exploration, I discovered that organizing pages into clear modules is crucial. This includes a concise opening statement with a disclaimer, followed by four value propositions addressing client pain points using an accordion design. To convert visitors into leads, a streamlined form for booking a demo is crucial for gathering essential information such as their name, email, product interest, preferred date and time zone. Ensuring responsive design across the platform's history is essential. Strategically placed CTAs, such as "Talk to our experts," guide users, while easy navigation to essential pages like About Us, What is iGuardian, Contact, and Case Studies enhances user experience.
iGuardian Sketches
Identifying Points of Confusion through Wireframe Prototypes
After completing the planning, I began creating wireframes for the core desktop experience. Understanding the purpose and content made building pages straightforward. Adjusting layouts based on feedback was easy without prioritizing design preferences.
My focus was on ensuring each page clearly conveyed its goal and addressed user questions. Structuring information logically allowed for quick navigation.
Content came first, ensuring the page achieved its objectives before focusing on design details, creating a smooth user experience.
Creating Low-Fidelity Screens
Establishing Visual Design
Crafting the visual identity of iGuardian involved establishing a consistent design system across its website, slide decks, LinkedIn banners, and marketing materials. The focus was on conveying trust and transparency.
I primarily used navy blue colors, as specified by the client to maintain continuity with the older website, instilling a sense of control. Simple golden buttons and clear icons were employed to make tasks more manageable. Additionally, I opted for a modern font with large, easy-to-read letters.
For my color palette, I chose tech-inspired blues and golden, along with modern design elements, to give a contemporary feel. These colors were selected to evoke feelings of trust and security, aligning with iGuardian's values of wealth management.
Creating iGuardian UI Kit
Revealing New Shortcomings Through High-Fidelity Prototype Testing
Due to time constraints, I decided to go straight to creating a detailed prototype instead of testing wireframes. I focused on refining the wording and making sure the design looked clear and consistent with the iGuardian experience.
Throughout the process, I worked closely with the client to adjust spacing, section placement, and images. It was important to make sure iGuardian's perspective on family offices was consistent across all platforms.
To make the design more appealing and user-friendly, I added more graphs and made sure the Year history feature worked well on both desktop and mobile devices.
I also improved the site banner for better visibility and carefully chose icons and visuals to enhance the design. The goal was to keep everything simple while making sure users could easily find what they needed.
.jpeg)
High-Fidelity Refinement for iGuardian
Understanding What Works and What Doesn’t
High-fidelity prototypes allowed me to test the key user tasks identified during my research. The intuitive navigation ensured that clients could easily find what they needed and move through the platform seamlessly. Additionally, having a responsive website that adapts well to different devices and screen sizes was beneficial, and the strategically placed CTAs proved to be effective.
However, we noticed a few areas that needed reevaluation. The low conversion rates for key actions, such as completing a demo request, suggest potential issues with the design or messaging that require attention. Additionally, the lack of customization options on the platform may be a usability shortfall that needs to be addressed.
The Refinement
I collaborated closely with our Development Team to define tasks, set objectives, and evaluate the website. This project was a team effort, and I was actively involved throughout the process. Instead of just handing over designs and leaving decisions to the development team, I ensured that design quality remained high and that the project was pixel-perfect. I also thoroughly checked the responsiveness of the website at every stage.
.jpeg)
.jpeg)
Working on Refining the design
Summary
When iGuardian chose us, I understood their need for a single, user-friendly platform that saves time and enhances efficiency. Unlike other options, we provided a complete package tailored to their needs, incorporating visual updates and comprehensive technology explanations. Inspired by the older version of the website, our redesigned platform perfectly fit our family office client's requirements.
Each family is unique, requiring a customized set of services to reach its potential. By defining clear goals and implementing a concise UX strategy, I delivered a responsive website within the timeframe, reflecting our commitment to meeting the client's needs.
Next Steps
Here are some potential usability improvements for the website:
-
Enhance the search functionality to make information retrieval quicker.
-
Improve user assistance features to provide better guidance.
-
Prioritize accessibility features to cater to diverse user needs.
-
Integrate tooltips or contextual help to aid user understanding.
-
Differentiate the "Contact Us" and "Book a Demo" forms to create a positive and meaningful user experience, optimizing them to meet specific client needs and expectations.
Lessons Learned and advice for other family offices
Here are the lessons I learned:
-
Start by clearly understanding business goals, user problems, and creating a roadmap with deadlines.
-
Document everything in one place from the beginning to maintain clarity and alignment.
-
Understand the business's revenue stream and language, and prioritize listening to their feedback.
-
Involve main stakeholders, including developers, early on to co-create ideas and ensure alignment.
Read More of My Case Studies
Website Maintenance
DivaTales
Girl Power USA