ABOUT ME
VISUAL JOURNAL
CONTACT
Tasked with updating their website’s UI, my focus was clear: to inject new life into TISSO’s digital space.
Collaborating closely with Ommax and BYKARB, I took charge of creating a visually appealing interface that aligned with TISSO's vision and mission. Drawing insights from user personas developed in coordination with BYKARB. After an initial assessment, we decided to take a minimal but classic look. Strategically utilizing white space, lighter tones, visible outlines, and photography, I crafted an elegant and user-friendly website. Throughout the iterative process, I refined and defined all the UI elements until they reached the desired outcome. Once confirmed, I delved into creating all components and full hi-fi wireframes of the website, alongside a comprehensive UI style guide in Figma, serving as a guiding document for the developers. Our collaborative approach, integrating insights from Ommax's UX workshops with TISSO, ensured a seamless and cohesive design journey.
The primary design challenge we encountered revolved around preserving the client's original bright yellow color while ensuring adherence to accessibility standards. Through accessibility tests, we identified that the color lacked the required contrast ratio. To retain the essence of TISSO's brand identity, we experimented with various shades of yellow until we found the ideal one that met accessibility criteria without compromising the brand's visual identity. Additionally, we strategically decided to use it as an accent color in UI elements such as banners and highlights of text, as well as opting for warm imagery or hints of a similar yellow tone. This adaptive solution struck the perfect balance, allowing us to uphold TISSO's distinctive branding while ensuring a user-friendly experience for all visitors.
PROCESS:
- Collaborative Planning: Teaming up with Ommax (UX and development) and BYKARB (rebranding), we strategized to ensure a unified approach towards achieving TISSO's web design goals.
- Defining Visual Direction: Based on target groups provided by BYKARB's collaboration with the client, I created user personas to establish a compelling visual direction. After exploring two design routes, we settled on the "Minimal & Classic" theme.
- Design Elements: To achieve our chosen design, we emphasized white space, lighter tones, and employed visible outlines and dividers as visual elements. Photography played a key role in enhancing the aesthetics.
- Hi-Fi Wireframes and UI Style Guide: I crafted all components, hi-fi wireframes, and a comprehensive UI style guide in Figma, facilitating seamless handover to developers.
KEY LEARNINGS:
- Effective Team Communication: Constant communication with Ommax's UX designers and developers was essential to align goals and achieve optimal results.
- Presenting Design Ideas: Taking charge of presenting my designs and articulating design choices helped foster collaboration and ensured that everyone was on the same page.
- Balancing Brand Identity and Accessibility: The challenge of maintaining the client's bright yellow color while adhering to accessibility standards taught us the importance of finding the right shade to preserve brand identity without compromising usability.