Client

Clovyr

The Challenge

Clovyr needed design, development, and QA support to meet the product launch schedule for its new decentralized app store.

The Outcome

A soft launch of Clovyr with new, responsive designs, and a thoroughly-vetted platform providing clear, intuitive UX.

We delivered a complete set of design files and a functioning design system, modifying all design containers so they would be responsive to desktop, tablet, and mobile breakpoints.

Services

Team augmentation
Design production
Design system
Front-end development
Quality assurance

tech

Vue
Pinia
Storybook

BACKGROUND

Countdown to launch

Clovyr is a cloud-based software marketplace and hosting service for open-source software. Clovyr’s platform makes it easy for developers to build, launch, and host their apps, offering a lot of flexibility, solid developer tools, a nice dashboard that spans all of your cloud providers, and a premium on privacy.

Clovyr came to us for design, development, and QA support to meet their MVP launch schedule, and the assignment grew to encompass business strategy.

Our work touched almost every facet of Clovyr’s marketing and the application sites, refining everything from purchasing options to site logic to accessibility standards.

01

Design and vision

Small Planet conducted a thorough analysis of previous Clovyr designs, and development needs, to identify gaps that need to be addressed for the MVP launch.

We re-examined Clovyr’s interface functionality — navigation states, search results, content cards, product bundling, purchase flow input messaging — and set a course of action to improve the overall user experience to support the product launch.

When you’re testing designs, you’re testing business logic too. The platform is a very conditional environment, and conditions, of course, create variables. Users can choose from pricing and package options which need to be clearly communicated in copy and state changes that occur in the interface.

We used our learnings to create responsive, production-ready designs, verifying critical components like navigation buttons, icons, user account setup, and search/tag categories along the way.

02

A 100% dynamic website

Small Planet’s development team built Clovyr’s design library and the resulting Vue3 reusable components, implementing high-level business logic in a global state machine via Pinia.

We built several pages and components in Vue to hook into their custom backend. The website is 100% dynamic, and because it was a greenfield project, we got to structure it in a really smart way.

The Clovyr team knew what they wanted to do, and what they wanted to do was pretty cool. Their standards are high and we wanted to meet them, and extensive, regular code reviews kept the quality mad high. Nothing got pushed to GitHub without being fully 100% reviewed.

03

“Unhappy paths”

When testing a product, you need to constantly rebel against the “happy path,” the most logical, rational action that should happen when clicking a button and filling out a form.

What about the potentially unhappy paths? When a site goes live out in the wild anything and everything can happen, and the deeper the testing the less likely your users will encounter errors.

04

Methodical QA

What happens when the password is incorrect? What happens when an invalid email is entered? Or when emails are already in the system? Are the input fields consistent? The various edge cases we tested shone a light on important design and development work that still needed to be done.

Our QA team members exercised all of the code paths, including the far-out ones like clicking a submit button 900 times in a row. They specialize in methodically testing small variations that unearth surprising results (and help stave off big headaches in the future).

This work rooted out issues associated with credentials failures, purchasing bugs, and much more.

05

Storybook ending

Rather than building up and deploying your whole application to test a design change, we leveraged the Storybook frontend workshop to view all the components and their different states in a contained way.

For QA, stakeholders, project managers, Storybook is the perfect tool because the team can test a new component library in isolation. It’s an efficient way to iterate because you can mock up modules without having to actually fire up the site. It also functions as a visual way to perform documentation.

Ready to get started?

Let’s build something together.