The Booksprout product is a platform divided into two categories to serve readers and authors. The readers can find free review copies from their favorite authors and the authors can boost their book launches with more reviews.

Those were the two personas I had to work with when designing version 2.0 of the platform. The old version had 5 years before Chris – the founder started to think about improvements and new features.

The old version below was an amazing start that Chris created himself with simple features.

For every project that I work on, there's always a sitemap to map all the features and screens I will have to design and fix any UX problems we might have along the way. For this project was a little bit different.

The Booksprout team previously worked with another designer and when I got into the project there were a lot of UI inconsistencies and UX problems that needed to be handled quickly.

We maintained an open scope of work and when the designs were finally handled by the developers the old designs were non-existent anymore. It was a lot of work to redo and improve designs but at the end of the day was worth it. It was a lot of back and forth with daily communication over Slack and weekly meetings over Zoom.

When I started working on the Booksprout platform I was trying to manage the old components from the other designer but something wasn't adding up. The colors, components and alignment was not something Chris was 100% happy with it.

We ended up starting over with the designs and using only the content to create something new and aligned with Booksprout's vision.

For the readers new design the whole structure was changed, the search as moved to another location, the available books now have bigger covers with more information on them, they can easily navigate to other links and there are many icons to illustrate items.

The screens I have here are not even 5% of all the work that was put on when designing those screens. If you want to dig deep and use the product I strongly suggest you create an account at www.booksprout.co

For the new author's design now they have much more control over the campaigns they run when a new book is available for readers to download, read online or send to their Kindles. There were a lot of pages done and many UX flows fixed.

The screens I have here are not even 5% of all the work that was put on when designing those screens. If you want to dig deep and use the product I strongly suggest you create an account at www.booksprout.co

Booksprout has a strong community and the old all-green color palette needed to be changed with a lot of care so people would know this is indeed Booksprout with a new coat of paint.

The font used on the marketing website and on the platform were Open Sans, and being a Google Font the load speed was a major improvement when users have a slower internet connection.

I love to design icons and this project wasn't any different.

I designed over 40 custom icons to illustrate many things like types of reviewers, menu items, and so on. All icons have the same 2px stroke to be consistent and easy to spot even on the smallest of the size. When you create a reader account you have a little badge that says what level you are, I created 3 badges to illustrate the levels as a new reviewer, valued reviewer, and top reviewer.

When looking at the analytics almost half of the traffic is from mobile devices so the experience needed to be as refined as the desktop version. With such a heavy data platform like Booksprout was a lot of try and error to fit all that information on such a small screen.

The mobile designs ended up being one of my favorite parts of this project because of the unique experience they have on some parts of the project.

When I started working on this project we didn't have anything remotely similar to a style guide or a design system and that was the first thing I did. Having a style guide in place allows me to work on components a single time and reuse them as many times as I want and also makes updating components if we have changes much easier.

Chris had no idea a thing like this was possible and I'm glad we took that route because all the hard work paid off. There are a lot of menus, buttons, icons, headers, font styles, and colors all organized on a Figma file to be used and reused as many times as we want on this project.