The Process
Research + UX
From the project's outset, stakeholders and I embarked on an extensive research phase, delving deep into various aspects such as defining the brand's presentation, identifying the target audience, analyzing competitor landscapes, and determining the most effective layout strategies.
Redesigning the entire website from the ground up was a substantial undertaking, requiring careful planning and meticulous execution. During the initial stages, my primary focus centered on crafting moodboards that encompassed a diverse range of visual aesthetics and emotional tones. Concurrently, I assigned and supported my teammate in the creation of wireframes, providing us with valuable insights into the optimal arrangement of elements across each page.
This comprehensive approach enabled us to lay a solid foundation for the redesign project, ensuring alignment with the brand's objectives, addressing user needs, and paving the way for the subsequent stages of development.
Style Guide
As the design process began, I created a style guide for the website. The style guide included guidelines for colors, typography, icons, and photography. I chose a combination of bright primary, accent, and pastel colors to reinforce the finance-theme and create a friendly and positive vibe for the brand. The style guide ensured consistency in design elements and facilitated a cohesive user experience.
Logo Update
To align with our evolving target demographic, it was essential to update the logo. While the previous logo solely relied on green to signify finance, we recognized the need to infuse it with a fresh color palette that exuded friendliness and trustworthiness. This strategic enhancement revitalized the brand while maintaining a sense of familiarity for existing users. By introducing new colors, we successfully created a logo that appeals to the target audience, establishing a balance between a modern look and the brand's established identity.
UI Design
We proceeded to craft mobile and desktop mockups that reflected the new design vision. It was evident that the original site conveyed a sense of strictness and rigidity, along with an outdated visual appearance.
Before
After
Our primary objective was to infuse the design with a sense of fluidity and contemporary aesthetics. Our approach involved implementing modern design principles to deliver a fresh and engaging user experience that aligned with current industry standards.
To enhance the appeal of the website, we strategically introduced meaningful content, vibrant colors, and captivating icons and illustrations throughout the pages. One of my teammates took charge of creating eye-catching hero illustrations that not only strengthened the brand's identity but also seamlessly integrated with the brand's color scheme.
Regarding the article page, recognized as the site's most critical component, great emphasis was placed on presenting a clean and uncluttered layout. Our primary objective was to accentuate the content, ensuring each article is effortlessly readable and highly engaging for users, promoting seamless interaction.
Furthermore, we prioritized accessibility throughout the redesign process. Adhering to WCAG AA (Web Content Accessibility Guidelines) standards, we meticulously evaluated the color choices and typography to ensure they met the necessary accessibility criteria.
The outcome of these efforts resulted in designs that effectively transformed the appearance of the website, infusing it with dynamic visuals and captivating design elements. This revitalized presentation extended across both mobile and desktop platforms, delivering an engaging user experience that resonated with modern design trends.
Front-End Development
I provided support to the development team by seamlessly transforming my mockups into an optimized and streamlined WordPress theme.
At this stage, my responsibilities encompassed constructing the HTML markup, SCSS styling, JavaScript implementation, and occasionally delving into PHP (although PHP is not my primary expertise). To ensure consistency and adherence to best practices, I formulated a comprehensive set of markup and CSS guidelines that served as a reference for every developer involved. These guidelines included employing the BEM (Block-Element-Modifier) naming convention for SCSS, establishing preferred formatting conventions, and prioritizing the use of modern CSS techniques, such as CSS grid layout and custom properties. My aim was to keep the CSS codebase minimal, less restrictive, and easily maintainable, without relying on third-party libraries.
Accessibility was a core consideration throughout the development process. I incorporated accessible markup, accommodating features such as keyboard focus support, compatibility with screen readers, and rigorous color contrast tests. To ensure a seamless user experience across multiple platforms, I conducted thorough cross-browser testing on the latest two versions of major mobile and desktop browsers.