Recently, I posed a question to my fellow designers, PMs, BAs, and Devs based across Sri Lanka and beyond:

> What are the most essential qualities of a modern-day designer in 2023?

I listed down similar responses using Jaspe.ai.

### The Top Qualities that Emerge

After carefully wading through the responses, which admittedly were both skewed and somewhat subjective, I was able to identify the following top 10 traits:

* Empathetic

* Curious

* Creative

* Collaborative

* Communicative

* Strategic

* Inquisitive

* Humble

* Ethical

* Understanding

\
These words, loaded with meaning, provide a familiar yet evolving landscape for UX designers in 2023.

### Empathy

Empathy has been a buzzword in the design world for a while now, and while it is integral to a user-centered approach, there seems to be a misconception about its application. The focus has largely been on the end users instead of including those involved in creating and delivering the product or service. This induced me to consider a more holistic form of empathy, called sympathy, taking into account all stakeholders.

### Curiosity

Curiosity, the engine driving every designer to learn, observe, and challenge themselves, has taken on a pivotal role amidst our rapidly changing technological landscapes. This quality fuels creativity and fosters new designs and innovations.

### Creativity

In 2023, creativity for designers must extend beyond aesthetics and functionality. It should encompass the ability to envision myriad solutions, fostering an environment that embraces bold and offbeat ideas.

### Collaborative

The importance of collaboration only escalates with an ever-increasing need for specialized skill sets. Moving beyond the buzzword, the partnership will involve a more egalitarian approach, breaking down silos and fostering collective intelligence.

### Communicative

Communication is the key to advocating and articulating design solutions effectively. It's a trait that should be at the forefront of every designer's skill set to persuade stakeholders and ensure the successful implementation of their designs.

### Strategic

Being strategic in 2023 goes beyond being tactical or pragmatic. It encompasses a holistic and long-term view while seeking to provide more influence and value.

### Inquisitive

Being inquisitive allows a designer to understand concepts deeper, although it must be balanced with productivity to avoid analysis paralysis.

### Humble

Humbleness is a quality that complements a designer's persuasive skills. Being humble doesn't denote a lack of confidence; instead, it's about being open to feedback and continuous improvement.

### Ethical

As we advance into the digital era, ethical values hold more significance than ever before. It's about considering the societal impact of designs and steering towards inclusiveness and sustainability.

### Understanding

Proper understanding transcends empathy. It's about comprehending the world's complexities, recognizing the nuances of various materials, and staying abreast of market trends. It's about appreciating diversity and acknowledging one's knowledge gaps.

In a nutshell, these ten qualities define the persona of an adept UX designer in 2024, poised to succeed in this ever-evolving digital landscape. As we embrace these traits, we pave the path for robust designs that are user-centric, inclusive, and sustainable.

Modern Designer as We Move into 2024

### **Introduction**

As designers, we are constantly seeking innovative ways to refine our craft, especially when it comes to color management. OKLCH has recently stepped into the spotlight as a compelling alternative to the traditional HSL color model. While it offers significant advantages, OKLCH also presents unique challenges, particularly when it comes to tool integration. In this post, I'll share my journey with OKLCH, why I’m a fan, and the hurdles I face in bringing it into my design workflow.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKqpF9yYSMdW9Va4o1TekMchCjIo1%2FVvFZPCAp21AlgnaYw4GF%2F07522e19-bb28-494f-9dce-fe3d8b9eaee7.png?alt=media&token=1d3fa1cc-39e5-4276-94e0-21cf4eafecf4","id":"07522e19-bb28-494f-9dce-fe3d8b9eaee7","width":3840,"height":2160,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

**Why OKLCH?**

OKLCH stands for Oklab Lightness, Chroma, and Hue. Unlike HSL, which can sometimes lead to unpredictable color contrasts and gradients, OKLCH is designed for perceptual uniformity. This means that any adjustments to color lightness, chroma, or hue appear consistent and natural, making it an attractive choice for designers.

**Benefits of OKLCH:**

1. **Consistent Color Shades:** OKLCH allows me to create harmonious palettes effortlessly. The uniformity of shades helps maintain a cohesive design aesthetic, which is crucial for branding and UI consistency.

2. **Uniform Contrast:** One standout feature is maintaining consistent contrast across all colors in each palette weight. This ensures an accessible and visually appealing design.

3. **Smooth Gradients:** When it comes to creating smooth, natural gradients, OKLCH shines, enhancing the overall visual appeal of any project.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKqpF9yYSMdW9Va4o1TekMchCjIo1%2FVvFZPCAp21AlgnaYw4GF%2F388f28ce-c244-4101-afa6-82fcd7158c96.png?alt=media&token=3a0b44c6-d4e6-43a3-9e3f-0a13dd09c890","id":"388f28ce-c244-4101-afa6-82fcd7158c96","width":2988,"height":2220,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

**The Tool Dilemma**

Despite these advantages, a significant hurdle remains: major design tools like Figma have yet to fully support OKLCH. As a result, I often find myself converting OKLCH to HEX or HSL to ensure compatibility with these platforms. This conversion process can sometimes lead to slight discrepancies between the colors in my design tools and the final CSS.

**The Impact on Workflow**

This lack of native support complicates my design workflow. While I love the results OKLCH provides, the conversion process adds stress and can be time-consuming.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKqpF9yYSMdW9Va4o1TekMchCjIo1%2FVvFZPCAp21AlgnaYw4GF%2F7daa8d05-9373-4d9c-b558-eee16121c84b.png?alt=media&token=756e6335-6b78-4f28-b36b-129d8f6ec2a9","id":"7daa8d05-9373-4d9c-b558-eee16121c84b","width":2874,"height":672,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

**Why Persevere?**

So, why stick with OKLCH despite these challenges? Simply put, the benefits outweigh the obstacles. The ability to create consistent, visually stunning designs is worth the extra effort. Plus, using OKLCH has deepened my understanding of color theory and its practical application in design.

**A Call for Change**

As a design community, we should advocate for better tool integration. Native OKLCH support would make it easier to leverage its advantages without additional conversion steps, benefiting all designers.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKqpF9yYSMdW9Va4o1TekMchCjIo1%2FVvFZPCAp21AlgnaYw4GF%2F420379dd-332a-4099-afe8-5a040733f9cb.png?alt=media&token=4d97f6a0-91e3-4aef-8203-543453ecd53f","id":"420379dd-332a-4099-afe8-5a040733f9cb","width":3840,"height":2160,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

**Personal Experience**

In a recent project, I designed a user interface for a mobile app where the client wanted a fresh, modern look with seamless gradients. Using OKLCH, I delivered a design that exceeded their expectations. The gradients were flawless, and the consistent color shades added sophistication to the interface.

The challenge arose when translating the design into a format compatible with the client's preferred tools. Ensuring color accuracy was a meticulous task, requiring additional time and effort.

---

**Conclusion**

OKLCH is a powerful tool for any designer aiming to enhance design quality and consistency. While the current lack of support in major design platforms is a barrier, its potential benefits make it worth exploring. By sharing experiences and advocating for better integration, we can push for changes that will benefit the entire design community.

### **Join the Conversation**

Have you tried OKLCH? What challenges or successes have you experienced? Let’s discuss and share tips for navigating this colorful journey together!

The Color Conundrum: Embracing OKLCH in a HSL World

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKqpF9yYSMdW9Va4o1TekMchCjIo1%2Fwhistleworthy-website-design%2Fa44a2ad3-ae0f-4a49-ad1d-f033c5a957cc.png?alt=media&token=2f5ef704-2497-4896-92eb-9689b202c291","id":"a44a2ad3-ae0f-4a49-ad1d-f033c5a957cc","width":2800,"height":2100,"filename":"whistileWorthy.ai 01.png","type":"image/png","caption":"","border":false}]}
```

### **🆕 The beginning.**

A robust digital presence is critical in our highly competitive environment, and this story is about a one-month journey we took as designers to design a fresh-looking website for WhistleWorhy.ai product by Aventude.

WhistleWorthy is a whistleblowing application. It aims to provide a secure and confidential platform for employees to report wrongdoing and unethical behavior in the workplace. The app allows users to anonymously report concerns while allowing employers to address and resolve these issues. With its user-friendly interface and commitment to privacy, WhistleWorthy is a valuable tool for promoting transparency and accountability in the workplace.

**The design challenge was**

Their product, however, has many competitors all over the world that are very established. Aesthetically, most of the competitor's websites are outdated. So, it was essential to develop a modern and appealing visual style that would shine a light on the brand's personality.

> "*Make it easy to understand the company value and facilitate positive user experience through informative and relevant content to navigate potential clients in the right direction.*"

## 😋 Design Process

When you have a myriad of business requirements, constraints, and politics, a systematic approach is paramount. Design thinking with a proper kick-off allowed us to define a business vision. This was followed by the discovery and delivery phases. This article highlights critical learnings.

**The discovery** **phase** aimed to understand the product, collect requirements, and analyze the use context. Deliverables: user segments, sitemaps, wireframes.

**The delivery phase** is the solution space that makes ideas tangible, usable, and beautiful. Deliverables: UI & interaction design, Style guide.

### **Discovery phase**

Defining how any solution should work, what problems to solve, and what gains to focus on are the core and fundamental aspects of any successful design process. Even if you know the answer to a brief, take a step back and dive into research to define whether you're focusing on the right problem to solve. Here, the beginner, 'curious' mindset plays a big part in revealing correct business objectives, *real* user needs, and technological possibilities.

Therefore, we started our project by investigating internal (company) and external (users) drivers to crystallize the area of a potential solution, outlining how the website should work rather than how it should look. The process was divided into five steps:

***Step 1 — Kick off to refine business requirements.***

First, it took us a few workshops with key stakeholders (the business) to understand the brand vision, overall goals, and challenges. We needed their perspective on:

* **internal**: business needs, requirements, goals;

* **external**: context, competitors, best practices;

*Documenting* insights is essential as this becomes a single source of truth that will inform the decision-making process and foster team alignment.

***Step 2 — Site and Content Audit***

In order to ensure that users have an enjoyable experience on the website, it is essential to anticipate their needs and provide relevant information at each step. To achieve this, we took into account the different user types and their journeys, which helped us to structure the site in a way that simplified user flows between pages. This approach allowed us to create a more intuitive and user-friendly experience for visitors to the website, which in turn helped to promote engagement and increase the likelihood of achieving our business goals.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKqpF9yYSMdW9Va4o1TekMchCjIo1%2Fwhistleworthy-website-design%2Fbabc3963-a5a4-412e-a4da-1a79e44f9cf3.png?alt=media&token=d2c137eb-8582-4477-ab00-21ed5191296b","id":"babc3963-a5a4-412e-a4da-1a79e44f9cf3","width":3307,"height":1602,"filename":"New sitemap Oct 29.png","type":"image/png","caption":"Preview of final Sitemap","border":true}]}
```

Final sitemap built in [FlowMap](https://shorturl.at/bcovz)

***Step 3— Context exploration.*** When we had a general idea of the website's purpose, we needed a system for presenting different content. Here, we got inspiration from Faceup, WhistleBlower software, etc.

***Step 4— Modular system***. Following initial discussions about building a flexible modular design to represent various content, for our wireframes we created multiple elements based on the same logic and style with different hierarchies, balancing between images, headlines, and various supporting copy. Ultimately, we managed to create the whole website by using the elements presented below 👇

\>--- Components

***Step 4 — Wireframes***

Finally, once the planning and foundation were built, we were ready to play with wireframes for the core desktop experience. Once you know WHY and WHAT we are doing in writing, constructing pages is a piece of cake. Of course, we went through circles of feedback. Still, it was easy to move things around without involving design ego for graphics.

The main point: each page needs to convey the goal and present main user questions and concerns. This information must be structured logically to allow users to scan the page quickly.

Content always comes first; once you know what the page needs to achieve, you can focus on elements and graphical composition.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKqpF9yYSMdW9Va4o1TekMchCjIo1%2Fwhistleworthy-website-design%2F23fb8baf-4783-4ae8-a4d3-9b7d46fb842d.png?alt=media&token=0d9e547e-5a24-46d7-a03b-7449097da5cc","id":"23fb8baf-4783-4ae8-a4d3-9b7d46fb842d","width":684,"height":273,"filename":"Capture-2023-10-29-124246 AM.png","type":"image/png","caption":"uick options in hi-fi wireframes to match stakeholders’ expectations better","border":false}]}
```

### - Key learnings

1. Start your design process only after you've identified business goals, user problems, and a roadmap — where deadlines and deliverables are clearly outlined and agreed upon with all stakeholders.

2. Document all the key points from day one: business needs, problems, design stages, feedback, and discussions in one document (which becomes our single source of truth).

3. Think business, understand their revenue stream, and learn their language. Listen to any feedback from business (you know how to do your business; they know their business!). Don't fall in love with your design ideas *— **listen*** carefully to what ***the business*** says. The best ideas can come from anywhere.

4. Involve main stakeholders and especially developers at the beginning of a project to co-create ideas.

### **Delivery phase**

Once logic and functionality are defined, the visual design process takes little time. It turns into an enjoyable meditation on aesthetic and design quality. Using wireframes and the modular system, the UI was created, following brand visual guidelines.

During this stage, well-developed digital design guidelines help you justify design decisions and deal with alternative opinions within the team.

Another important aspect was to provide all necessary materials, guidelines, and recommendations for developers. Create this project together as a team. Don't just hand over the designs and leave lots of decisions to a dev team. On the contrary — be a driving force to maintain high design quality to make your live project pixel-perfect.

### Delivery phase: key learnings

1. Designers own a live result, therefore, we need to guide and support developers while they're working on the project.

2. Define your design patterns and language first. Consistency — is what defines good design.

```cv
figma
{"url":"https://www.figma.com/file/SgXvIevlAV3bSPVGVNd7Qu/WW-Marketing-website?type=design&node-id=1009-2273&mode=design&t=5mx1EUuUYZw85wm3-4"}
```

### **Final say**

Overall, reflecting on this process helped us to extract the key pivots that enabled us, blockers that we should eliminate, and all the learnings that we can use to improve our process next time.

Key takeaways:

* Only start the design process once you get all the business requirements.

* Only jump in the visual design once you are happy with your solution (UX).

* Always spend time during the discovery process to think about whether you are doing the right thing…And validate all assumptions before any line of code is written.

🚫 The process that we followed was tremendous but still far from being perfect:

WhistleWorthy Website

> ### Leave Dates is a cloud-based leave management software for small and medium-sized businesses.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKqpF9yYSMdW9Va4o1TekMchCjIo1%2FsEpThmZ3mRnCPiIIp2iU%2F4853e5f6-db08-4883-887a-305db8fae4d7.png?alt=media&token=8f74d7ba-e5cd-4f33-bd6c-83203fa3181c","id":"4853e5f6-db08-4883-887a-305db8fae4d7","width":1920,"height":960,"filename":"File Cover.png","type":"image/png","caption":"","border":false}]}
```

### **Overview 💫**

In the past, Design Systems on the web were primarily developed by large organizations like Google, Atlassian, or GitHub. These companies served as excellent examples of the emergence of Design Systems. As these organizations grew in size and complexity, the need for a Design System became crucial. A Design System acted as a centralized and authoritative resource for hundreds, or even thousands, of designers and engineers. Building products without a Design System became impractical at such a scale.\
\
However, the situation is different for small teams who often face limitations in terms of budget and resources. These teams may not have the means to hire dedicated designers or assemble teams specifically tasked with creating a Design System. As a result, the purpose and scope of a Design System undergo a transformation within the context of small teams.

### **Problem 💢**

With no designer on staff, the first few years was unstructured in terms of product design, This led to severe user experience inconsistency across platforms which breaks cohesive design experience.

### **The Goal 🎯**

> Create a scalable design system of components with documentation that can create a cohesive design experience for internal and external users as well as streamline development work.

### **Audit and prioritise 🚦**

To establish a cohesive design experience, the core components of Leave Dates' products underwent an audit and prioritization process. This involved identifying and defining the styles of these components and building atomic elements that could be frequently reused. For this task, I utilized Notion to compile a comprehensive list of all the audited components.

**↑ Above:** Component list in notion.

## **Design tokens 🔥**

Design Tokens are small pieces of data that represent design decisions. They can encompass various design values such as color, opacity, spacing, and more. Utilizing design tokens promotes flexibility and consistency across product.

**↑ Above:** Sample of Leave Dates' brand color design token visualisation.

## **Explore & build UI components 🎨**

During the process of creating and expanding UI components and design patterns, various factors were taken into consideration for each new addition to the library:\
✔️ Accessibility\
✔️ Scalability and flexibility\
✔️ Functionality\
✔️ High visual quality\
✔️ Mobile responsiveness\
\
With the growth of the component library on Figma, design efficiency improved significantly. This enabled me to concentrate on higher-level UX design flows, rather than repeatedly recreating components across different pages or responsive sizes.

**↓ Below:** Few components from design system.

## **Documentation 📝**

Upon completing the construction of numerous core components and patterns in Figma, my focus shifted towards documenting the guidelines and applications of these elements in Zeroheight. This documentation became an indispensable resource accessible to all members of the company.\
\
The Zeroheight document played a vital role for both myself and the developers. It provided detailed insights into spacing, size, color, accessibility considerations, and expected behavior of the components. This information empowered the development team to accurately implement the design elements and ensured alignment between the design vision and the final product.

**↑ Above:** A snap from Zeroheight dashboard Accessibility principle of Leave Dates' design system.

## **Next Step ➡️**

After completing the design phase, documenting the components, and collaborating with developers to build functional elements, the next crucial step is integrating all HTML/CSS/JS components across various variations on Zeroheight. This integration ensures that the design system is adopted consistently, extending beyond the Product Team.\
\
In addition, I have initiated the process of generating a prioritized backlog of components and patterns to be developed in Figma and documented on Zeroheight. This backlog serves as a guide for future design iterations and updates. I will maintain a collaborative approach, working closely with developers and other designers to refine Leave Dates' comprehensive design library as we continue to evolve the design system with the introduction of new products.\
\
It is important to note that this design system is an ongoing project, and many of the components are already being utilized to redesign Leave Dates' products. The iterative process will continue, ensuring that the design system remains adaptable, cohesive, and aligned with evolving requirements and user needs.

## **Questions ❓**

Feel free to reach out to me via **[email](https://iroshandezilva.com/projects/leave-dates-design-system#)** if you'd like to learn more about this project! 😇

Leave Dates’ Design system

Let me know if you want to talk about a potential collaboration. I’m available for freelance work. 