My role in this project covered all bases, from the initial research and wireframing, to prototyping and ideation. My main focus was content, design and accessibility.
My Role
Being a start-up, the primary goal of this project was to create something that would attract investors and clients alike. To do this, the presentation had to be unique. Creating a responsive website design that remained simple and to the point, whilst also being distinct compared to other similar services, is something I had to think about carefully. Not only this but providing the information in an easily accessible manner, without being overwhelming, was key. From discussions with the client, the primary visitors would have a prior foundation of knowledge, so highlighting key services provided that other companies did not was important.
Furthermore, I was asked to write the content for the website, including all of the technical information, about page, and more. I had talks to figure out the ideal tone of voice, and recommended an informative yet friendly approach, to not seem robotic and help attract potential clients.
The Task
I began by conducting competitor research, both direct and indirect rivals, as well as familiarising myself with the technology to understand the uses and potential customers better. After discussing possible routes with the client, I sketched up some wireframes before moving to Figma to create low and high-fidelity prototypes.
An observation I made whilst researching competitors, was that the overall layout remained very consistent between them. The primary method of navigation was always a bar along the top, which is admittedly easy and reliable. However, I wanted to switch it up a bit and use something I had not seen used. As such, I included a burger menu in the top left-hand corner. This would allow for a distinguishing element of the website, accessible from any point whilst scrolling down the page.
As elements of the website would be text-heavy, I opted to use icons on various screens to help break up the flow of information, whilst adding some extra visual flair. I separated the information into key sections, hidden away unless clicked on. The client wished to have an explanation of the types of technologies their product worked with, as well as further information on services, their system and more. Rather than showcasing everything in a long list, I showed brief information such as pros and cons for each technology as a summary, with further information on subsequent pages if the visitors were curious. Whilst the target audience focused on those with prior knowledge, I kept the language simple and concise, without the use of buzzwords to accommodate those who did not fit into that category.
Methodology
Personas
Wireframes
Prototypes
The visual style I ended up using took a less is more approach. Some competitor websites were extremely busy, with an overload of images, text or both. I stuck to a white background, using a colour gradient of blue and turquoise as highlights, keeping it consistent on buttons and icons. The further right the element was, the lighter the colour. The text was coloured appropriately to meet accessibility standards, and icons were sized proportionately so those who may have issues reading could still navigate easily.
UI Kit
Feedback
“The colour scheme is very nice. Usually, only one colour acts as a highlight, however, the gradient that is consistent across the screen is refreshing.
— Participant 2
“The menu is very different, for websites such as this anyway. The faint transparency adds to the quality. I think a solid block of colour wouldn’t have looked as good.”
— Participant 4
“The content that’s been written is really clear. The lack of corporate buzzwords helps me, since I don’t know much about this technology.”
— Participant 4
“I think some elements could be made smaller on the desktop version, however, everything fits nicely on the mobile, in my opinion.
— Participant 3