About Protosets and the challenge

Protosets is a company that creates software-modeled 3D studio environments.

The redesign that was requested had aim to:

  • be a hybrid web site and web application
  • showcase the company’s products and solutions
  • provide easy functionality and navigation to the visitors

Prominence had to be put on the ability to interact with the 3D environments, in a way that the visitors can test and adjust settings as per their needs, getting real-time preview of the results.

Protosets Logo

Website architecture & sitemap

To kick-off the project, a basic sitemap had to be created in order to have a better overview and understanding of the website’s depth and structure. I took the classic ‘sticky notes’ approach that allows for rapid structuring and easy grouping of features. In collaboration with the client, the website’s architecture was created and the sitemap documented.

As this is a crucial navigation concept, it enabled me to move forward in understanding the hierarchy and how pages are connected together. It also represents a good way of reducing long documentation and placing a great deal of information into a single overview. This was later refined as a digital flowchart with more details and information.

Going forward, the next steps were defining the layout and creating wireframes.

Protosets wireflows

Wireframing & layouts

To properly communicate the conceptual part of this project, basic wireframes and layouts had to be built and presented to the client to ensure we’re on the same track. Moving forward, the layouts would play a major role in keeping a consistent look and navigation, establishing a user-centered approach and an intuitive interface.

  • Since there was the need to distinguish different sections in one single page, while at the same time working cohesively as one big web application, a modular approach had to be taken.
  • The ‘Single Set’ page had to contain multiple modules for control, navigation and preview. This would enable users to demo how the 3D studio environments can be adjusted and controlled using different settings.

In addition, a number of modal windows had to be introduced to display further features that Protosets offers. Everything had to be minimalist looking, modern and provide the highest level of usability.

Protosets Wireframes

Style guides

To ensure a consistent visual look, a style guide was to be set in place. This includes typography, colour palettes, and all the other details that make for a visually pleasant and delightful digital experience.

Utilizing the logo colours, I’ve created a palette to be used throughout the entire website, thus creating cohesiveness with the entire visual identity of the brand. Careful consideration had to be taken to allow for subtleness and colour accents where needed, in order to ensure easy navigation and intuitive use to the end-user.

Only one web font was used as this would significantly improve site load times, plus stay on point with the entire concept of keeping the visual look minimal and clean.

Protosets Styleguide

User interface & visual design

With the wireframes, layout and visual style guides in place, it was time to start working on the user interface and visual design part of the project.

Using Photoshop and Illustrator in combination, I worked to create a highly modern and easily learnable digital product. The entire process from defining the Protosets website architecture, to conceptualizing and creating the final design took less than a month, so this project had followed the strict timeframe and deadlines set by the client and myself.

As this web application is still in its development phase, watch this space for updates!

Protosets webapp

Let’s work together.

Contact me and I will reply within the next 24 hours.

Get in touch

Socialise with me

Copyright © Seekforth 2017.

This is a unique website which will require a more modern browser to work!

Please upgrade today!