Benchmarked - The idea
This project was a part time job i had alongside my studies. During this project, i got to utilize a vast set of tools i’ve used during my education. The idea is to deliver a SaaS product which allows different businesses to screen each other, when looking for a new supplier, while also rating each other like trustpilot.com.
Working together with 2 other people, the CEO and COO, who has no design experience, i was put in charge of the entire design process and flow.
The final prototype of the application i handed over to the team, as my part time ended, can be viewed following this link Benchmarked mockup.
Trustpilot for suppliers
Research, branding and marketing
Starting this project completely from scratch, i spent a lot of time researching competitors and similar companies, as well as finding a customer base. It was concluded based on this research, that the target group to get into the market would be the maritime sector.
From this point on the branding and marketing took shape, following the theme of wavy figures and blue colors.
The UI
The UI design is heavily inspired from the Vueitfy website itself, which was later used as a framework for the applicaiton. The Benchmarked application needed to contain a lot of information and tools, and sectioning the application like the Vuetify website, allowed for multiple menu bars.
The general theme for the rest of the application, which can be seen in this mockup, was to keep a simple and colorful design. which helps the user quickly identify the most important information through nudging.
The UX challenge
Creating a powerful platform, which allows the user a great deal of agency, meant implementing a lot of tools. This was quite a challenge UX wise, since you want to still keep it simple and intuitive.
The challenge especially lies in the different parts of the platform, which all can have different toolsbars. This meant creating two simple and minimal toolsbars at the top and left side, and then expanding the tools the user has available, through a new toolbar in the sectioned menus of the application.
Creating SEO for a website
I created a simplistic onepage website for the project, to help create visibility, and show potential clients a quick overview of the project. However creating a great SEO experience for the homepage, was quite a challenge. For this task i utilized the tool Morningscore.io. This tool is super easy, and it gave me a lot of metrics to go after. Figuring out which keywords to use can often be difficult, however using morningscore, i was able to get a list of different keywords and phrases, which might resonate with the user.
As an additional help to figure out keywords, i also used one of their tools, to identify various angles, expanding from 2 key sentences.
Turning a design into code
After designing the website and platform, my job evolved into coding the application, in collaboration with the COO, who was responsible for the backend. I got to use the VueJS framework called Nuxt, as well as working with API’s. This wasn’t anything that i learned in my curriculum, however i was very interested in it, and taught myself on the side. This was a very fun experience, and although i didn’t get to do a lot of coding before my part time ended, i managed to learn a lot about how you implement a design in bigger project.
List of tools used:
VueJS
Vuetify
VsCode
Quasar
TypeScript
Apollo GraphQL
Adobe Illustrator
Adobe Photoshop
Adobe XD
Adobe InDesign
HTML
CSS
Javascript
Sass