Soft Skills Games

UI Project : Rebranding, website, and corresponding dashboard-based webapp

The Project Brief

A repeat client came to me with a unique request.

In the process of seeking investment for an idea related to teaching soft skills using commercial video games, he found and bought a company doing just that.

I was asked to create a beautiful website and SaaS product (using a few assets from the current product) that businesses and professionals will enjoy engaging with, so he can secure investment.

Soft Skills Games


Because I was given days (instead of weeks) for the project, I did not use the UX Design process.

The client specifically requested that I use the brand colors, font, and logo icon that I designed for his previous project. That simplified my work a great deal and helped me jump in quickly. 

The old site

Before jumping into Figma and beginning to design, I had a good long look at the current solution. The logotype was weak, there were too many colors, the font lacked character, the icons were poorly chosen, the formatting made little sense, and there were three different areas on the site where a person could sign in to access the product; the old website lacked cohesion and direction.

The client asked me to use the graphs in the screenshots below for the webapp.

The new and improved branding and website for a company called Soft Skills Games. They use mainstream video games to help people train their soft skills.

The new website

My designs are clean and simple. I pared the website down to the essential. The homepage says it all, there is another page for a deeper understanding of how it works, and then there’s a page that walks the person through registration on Steam. Just 3 pages. 

Normally, I use photographs in designs, but for this project I used illustrations. It was a lot of fun to customize and unify them. 

The buttons are animated, and the games and testimonials carousels scroll horizontally.

Website and Webapp
Click through the interactive prototypes on Figma
Soft Skills Games

The Webapp

The webapp is like one big dashboard. I kept it simple with four areas that comprise four sub-areas. 

The sidebar of each area shows statistics that have been gleaned from the data related to that area. The badges widget slides open and closed to reveal more or less badges.

It was super fun to design giant components for some of the graphics. They’re enormous, animated widgets that show four or five unique screens each. 

Soft Skills Games

Two areas

Divided into two areas, the on-boarding process separates the users of the app into individual users and coaches.

The area of the app designed for coaches allows them to create teams, add users, modify the data of their team members, oversee playing habits, and track the data.

The design of the coaches area includes additional functionality that will be added later, in subsequent releases of the product.

Final Thoughts

With this project, I made incremental adjustments to my process, dug deeper into the creation of components in Figma, and I tried using ChatGPT to help me with some of the copy for the website. 

While I’m proud that the client likes it so much they are taking it straight to the development house, I would have liked to have had other designers or even just laypeople comment on the design. Feedback is invaluable, and beyond the client's, there wasn’t any.

Thank you for looking.
Do you want to say something about this?

Please send me a message; gift me with your comments.