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.
Constraints
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 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.
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.
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.