Kaleab Eshetu - Devshop Studio Case Study

GO HOME

BOOKING 6 CLIENTS IN THE FIRST MONTH

Devshop Studio

•

2023

My Role

Design Engineer

Timeline

3 Weeks

Team

1 Product Designer & 1 Developer

Responsibilities

Visual Design

Interaction Design

Conversion-focused Copywriting

Development

TL;DR

I designed, developed, and wrote the copy for a high-performance landing page that booked 6 clients within the first month. Through iterative usability testing and performance optimizations, the site achieved a balance of aesthetics, speed, and conversion.

SEE IT LIVE

Our Journey

My friends and I developed software products for various clients for the better part of the year. It was about time we built a website for our agency.

We wanted a simple and performant service website optimized for mobile and desktop.

Our Goal

I wanted a simple service website that showcases our process, target audience, and previous work. The plan was to conduct usability testing as much as possible as quickly as possible and iterate based on the feedback.

Most web dev and design agencies either have template websites or are stacked with animations, so much so that they lose quite a bit in performance.

I wanted people to have that wow factor when seeing the website without paying for it in performance.

Most web dev and design agencies either have template websites or are stacked with animations, so much so that they lose quite a bit in performance.

I wanted people to have that wow factor when seeing the website without paying for it in performance.

The first version before user testing

Performance

Performance was also a goal here. I used the .webp format for images and other performance improvements based on lighthouse-metrics.com recommendations.

After three rounds of testing, we reached a solution that all of our usability testers were happy with and that satisfied the KPI.

Performance was also a goal here. I used the .webp format for images and other performance improvements based on lighthouse-metrics.com recommendations.

After three rounds of testing, we reached a solution that all of our usability testers were happy with and that satisfied the KPI.

Iterative Design Decisions

I did the first round of usability testing with a task success rate as the KPI right after it got deployed. I made the usability study a moderated one to prompt more verbal feedback.

Quotes translated from Amharic

I did the first round of usability testing with a task success rate as the KPI right after it got deployed. I made the usability study a moderated one to prompt more verbal feedback.

Quotes translated from Amharic

“The projects menu doesn’t look pressable.”

“I couldn’t find the design projects.”

Before

After

Before

After

Animations

We still wanted some animations😁.

I used framer motion since it has a default framerate of 60fps, guaranteeing that our animations will perform and run smoothly.

Before

After

Before

After

Outcomes and Learnings

This project made me appreciate the value of integrating design into the development cycle. We had clients tell us that the site looked good, and in June 2024, we booked 6 clients.

We chose React with Vite for development. Vue might have been a more performant choice and would've addressed most of the technical implementation challenges we faced.

This project made me appreciate the value of integrating design into the development cycle.

We had clients tell us that the site looked good, and in June 2024, we booked 6 clients.

We chose React with Vite for development. Vue might have been a more performant choice and would've addressed most of the technical implementation challenges we faced.

NEXT PROJECT