Svelvet

WHAT IS SVELVET?

Svelvet is an easy-to-use, intuitive, and highly customizable lightweight Svelte component library for building interactive node-based flow diagrams.

Svelte is a new and popular front-end Javascript framework.

MY ROLE

Svelvet was a freelance project in which I worked on the design aspect with 4 developers. Svelvet is an open-source product, and the developers needed a documentation website design.

• Wireflows

• Visual Design

• Final Design

Svelte is a well-loved and relatively new frontend framework/compiler that has been growing in popularity for the last few years within the developer community. However, unlike other industry frameworks such as React, Vue or Angular, Svelte does not yet have a comparable robust library ecosystem.

As for a design challenge, many of these documentation sites for frontend frameworks have a certain established style, which I had to understand. It also meant that my creativity was limited. As a time constraint, I had three days to complete my designs.

MY GOAL

Design a frontend engineering documentation website which would house the documentation for the Svelvet component library.

After reviewing a few documentation websites, I noticed the simple, easy-to-navigate, and straightforward nature of these websites, and incorporated those elements into my design.

The developers wanted the design to have different shades of red to match their logo.

After discussing the visual design requirements, I created a hi-fi mockup to give the developers an example of what they will be coding.

The developers praised the simplicity, yet aesthetic nature of the design. Below are the live designs that the developers coded. Currently, Svelvet is trending in HackerNews and on the Svelte Reddit thread.

HELPFUL GLIMPSE OF SVELVET

Users are intrigued by the descriptions and samples of the tool on the home page.

SIMPLE AND ORGANIZED DOCUMENTATION

Users are able to easily navigate between topics using the left menu panel.

TESTING AND ITERATION

Although the layout of the website was inspired by the industry standard for coding documentation, I would have wanted to run usability tests to receive feedback from users and then iterate to make the website more appealing and usable. I believe that there is always room for improvement.

How I would select participants for the usability tests would be to choose junior and senior developers worldwide to ensure usability is universal.

VALUE OF DEVELOPER/DESIGNER COLLABORATION

It would be a shame if time and resources were spent on the design only to learn in the end that the developers do not have the knowledge to implement the design. Going through this Svelvet project with a team of developers shows the value of working closely with developers/involving developers early in the design process to ensure consistency and practicality from a developer standpoint.