web design & developer

i2 Wealth Website Redesign

i2 Wealth sought a modern, user-friendly website to effectively showcase their financial services and team expertise. My role in this collaborative project was to strategically design and develop a site that not only looked visually appealing but also aligned with the client’s business goals. By prioritizing a user-centered approach, I ensured that the website was intuitive and accessible, providing an enhanced user experience across all devices. This approach helped position i2 Wealth as a trustworthy and professional financial services provider.

  • Client: i2 Wealth
  • Timeline: 2 months
  • Team: Collaborative project involving a group of project manager, designers and developers
  • Role: Web Designer and Developer
  • Scope: Developed 3 key sections on landing page. Designed and developed multiple pages including services page, team page, and individual pages for two founders, as well as icon design and ui / ux design.
  • Tools: Figma, Photoshop, Illustrator, HTML, CSS, WordPress, Divi
i2 website

My contribution:

    Web Development:

  • Collaborated with other two developers to develop the header and footer of the website.
  • Led the development of 3 core sections on landing page, ensuring responsive design across all devices.
  • Developed and implemented the layouts for the Services page, Team page, and individual pages for the two founders.

    UI / UX | Web Design:

  • Designed custom UI elements, including icons on landing pages and graphics for the team pages, adding a unique touch that enhanced the overall aesthetic and user experience.
  • Created wireframes and high-fidelity mockups for multiple pages, focusing on user-friendly design.
  • Worked on the visual design, selecting color schemes and typography that aligned with the client's branding.

Process

Research & Planning:

Initiate Communication
  • Establish direct contact with the client.
  • Understand the client’s requirements.
Gather Essential Documents
  • Collect key materials such as logos, color schemes, and fonts.
Conduct Research
  • Research i2 Wealth’s competitors.
  • Analyze the target audience.
Develop a Plan:
  • Create a detailed design strategy.
  • Ensure alignment with client needs and project objectives.

Wireframing & Prototyping:

Created wireframes for the main sections and pages to establish the layout and user flow. Developed interactive prototypes, refining them based on client feedback received through the project manager before moving on to development.

  • Maintain Well-Organized Wireframes for All Pages I designed: Systematically organize wireframes for each page to ensure clarity and ease of reference. This structured approach facilitates updates and helps track changes throughout the development lifecycle.
  • Preserve Version History for Client Revisions: Maintain a detailed record of all design versions to accommodate client feedback and changes. For instance, during a recent project, a client initially approved a design but later decided to revert to a previous version. Having a comprehensive version history enabled us to efficiently restore the earlier design, saving time and avoiding confusion.
  • Enhance Feedback Efficiency with Senior Developers: Work closely with senior developers to improve the feedback process.

Design & Development:

Focused on clean, modern design principles with an emphasis on responsive layouts. Used a mobile-first approach to ensure the site performed well on all devices. Collaborated closely with the team during this phase to integrate design elements across the site, ensuring consistency and a cohesive user experience throughout the web pages.

In process of developer, I encountered issues to be troubleshooting, for instance, a navigation bar issue where the header overlapped the top of the poster pages at publication. I explored the theme builder approache and successfully resolved the problem.

  • Actively communicated with other team members and the project manager: Maintained open lines of communication to keep everyone on the same page and ensure smooth progress throughout the project.
  • Supported teammates when challenges arose: Collaborated with peers to solve problems together, contributing to the overall success of the team by offering assistance when needed.
  • Received and applied feedback from senior developers: Embraced feedback from senior team members to improve the quality of my work, ensuring continuous personal and project development.

Testing & Launch:

Ensure comprehensive responsiveness and functionality of the website across various devices and platforms before final deployment.

Device and Platform Testing ▼
  • Devices: Conducted extensive testing on a range of devices, including smartphones, tablets, and desktops, to verify responsive design and functionality. This included testing on both high-resolution and standard screens.
  • Platforms: Ensured compatibility and performance across major operating systems (iOS, Android) and web browsers. Verified consistent user experience and functionality across different environments.
Screen Size and Layout Adaptation ▼
  • Screen Sizes: Tested the website on various screen sizes, from small mobile displays to large desktop monitors. Confirmed that the layout and design elements adapted appropriately, maintaining usability and visual appeal.
  • Responsiveness: Checked that text, images, and interactive elements resized and repositioned correctly across different screen sizes.
Visual and Interactive Elements ▼
  • Visual Consistency Reviewed all visual elements, including color schemes, typography, and spacing, to ensure consistency and adherence to design standards. Addressed any discrepancies to maintain a cohesive appearance.
  • Interactions: Tested interactive components such as buttons, forms, and navigation menus. Ensured that touch interactions on mobile devices and mouse interactions on desktops functioned smoothly.
Usability and User Experience ▼
  • Client Expectations: Ensured the final product met client requirements and expectations through iterative feedback and revisions.
  • User Feedback: Conducted usability testing to gather insights from real users. Analyzed feedback to make final adjustments and enhance user experience.
Launch Preparation ▼
  • Final Review: Performed a final review of all elements and functionality. Addressed any last-minute issues or improvements.
  • Deployment: Coordinated the website launch, ensuring a smooth transition from development to live environment. Monitored the initial performance and user interactions to confirm successful deployment.

Insights I gained

Improved Product Thinking: This project deepened my understanding that effective design extends beyond aesthetics to align with business goals. Initially, CTAs were designed without a clear strategy, which limited their effectiveness. Through analysis of conversion metrics and a shift in perspective from a purely client-centric approach to a more business-centric approach, we recognized the critical role of CTA optimization.

We focused on:

  • Visibility: Ensuring CTAs were prominently placed and easily visible by using contrasting colors and strategic placement.
  • Text and Design: Implementing clear, action-oriented text (e.g., "start a consultation" "contact us") and design elements that made CTAs stand out.
  • A/B Testing: Testing different CTA designs, texts, and placements to identify the most effective variations.

By optimizing CTAs, we improved user engagement and conversion rates, directly supporting the client’s business objectives. This experience reinforced the value of integrating user experience improvements with strategic business goals to enhance both client satisfaction and overall project success.

Conclusion

The redesigned i2 Wealth website was successfully launched after two months of development. The client was highly satisfied with the new look, functionality, and improved user engagement, which led to clearer communication of their services. As a result, our team continued to work with the client, maintaining the website by debugging and ensuring it remained in top condition.

This project taught me the importance of collaboration in a team setting, and it solidified my skills in both web design and development. Managing multiple responsibilities, from design to development, allowed me to grow as a versatile web designer, and the experience of working closely with a team contributed to my ability to deliver high-quality work.