Swag International

Design system BO & VO

I served as the creative director for an app outsourced to NTT Data and Tangity. The app gathers data from smart devices (such as rings and scales) and stores it on blockchain, providing a comprehensive health overview.

The main challenge lay in coordinating partners and technologies while ensuring secure data transmission to patients’ healthcare providers.

Collaborating with NTT Data and Tangity allowed me to combine diverse skill sets and integrate creative ideas. I served as a liaison between end users and the design team, conducting interviews and working alongside the business department.

I analyzed multiple competitor apps on G2 and Product Hunt, using AI and web scraping to gain a comprehensive view of best practices and pitfalls to avoid.

I adopted a new approach. Since we were launching a completely new product, our pool of stakeholders was fairly limited, making it challenging to define comprehensive functional requirements. To overcome this hurdle, I identified similar apps and products on G2 and Product Hunt; however, the sheer amount of data posed an issue. I therefore developed a custom web scraping script to gather the information and then processed it with an AI, allowing me to clearly highlight strengths and weaknesses.

I worked in an Agile manner with the partner, reviewing weekly UX sprints and refining them as needed. The main issue arose with the UI, as the partner’s proposals did not fully capture the project’s essence.

To address this, I provided reference screens that offered a clear, shared vision of the desired app experience.

To optimize the display of the organizational chart, I designed an expandable system that avoids both horizontal and vertical scrolling while maximizing the available screen width and height. Certain sections are collapsed and expand on demand, providing a clearer overview. For enhanced navigation, I introduced breadcrumbs and contextual tooltips, improving overall structure comprehension. Additionally, I implemented an advanced search bar with filters, allowing users to quickly locate a specific individual.

We developed a system of tags and icons to instantly identify specific qualifications or roles, differentiating both the icon and color. For breadcrumbs, we follow the pattern defined by the design system: if the text is too long, it is truncated in the middle. Additionally, when the organizational chart is resized, a tag appears to indicate the number of people in that particular row or column.

I used multiple tools to ensure the design system meets user needs, emphasizing WCAG 2.2 accessibility. In particular, I performed color testing with Able and tracked user behavior via Hotjar.

Ongoing interviews and surveys with stakeholders enable continuous iteration, ensuring the product is refined and improved over time.

Overall, the design system proved to be a valuable ally, delivering tangible results. In the first Virtual Office implementation, the data highlighted increased efficiency and reduced development times, clearly demonstrating the improvements achieved.

Back

Design system BO & VO

⬤ 01. Challenges

Creative direction for a health app using blockchain data

⬤ 02. Reflection

Strategic synthesis of expertise and competitor insights

AI integration to enhance UX

⬤ 03. Ideation

Agile collaboration and creative alignment toward a unified vision

⬤ 04. Experience

Design system prototyping and validation through interviews

Organitation chart

Tag, searchbar and truncate

⬤ 05. Optimize

Continuous testing and iteration for an inclusive design system

Impact

Development times

Team Efficiency

Work with me