Biocoded webpage
A strong digital presence is key in our environment. This case study documents the process of re-designing the webpage for Biocoded, a software development company based in Maribor, Slovenia. The main focus on the webpage is the Biocoded product, which is an end-to-end encrypted voice call and messaging app. It is available as a free cloud service for end users and as a licensed self-hosted server installation for complete in-house privacy.
Webpage:
https://biocoded.com/
The challenge
The Problem:
The challenge was to create a unique and clean webpage design that would meet the overall brand idea and would help to:
increase visibility of the business.
simplify the interaction process for users.
adapt to a responsive design.
My role:
I was full-time employed with Biokoda for 4 years and I already had a pretty clear picture of who the targeted users were and what are their goals and needs were. As the only designer in the company I was working closely with the product lead and the dev team to ensure that we are all on the same page.
Research
I divided my design process into 5 phases following the IDEO’s human-centred design thinking process.
Understanding the problem
After I analysed the current Biocoded webpage, I concluded that it needed a redesign for the following reasons:
the webpage looked outdated.
the values of the product were not clearly visible on the webpage.
it felt more like an informative website, without a proper CTA.
it was hard to see and understand all the features the product provides.
User Interview
Before I started creating my user personas, I did a little research about the users and their needs. The main data I had was coming from the interviews with the current users that were already using the Biocoded application. I interviewed 8 people who had difficulties understanding the purpose and the features of the product.
Below are the sample questions asked in the user interviews:
Do you understand the difference between the Biocoded Global and Private product?
What’s the purpose of the Biocoded product?
Can you easily find the download button for the right platform?
Due to sensitivity of data I’m unable to share all the user interview questions and findings.
Identifying Users
To better understand the users, I categorised them in two sections and identified their characteristics and needs from the webpage:
Individuals:
people that want to communicate with friends and family.
they want to find out the features of the product.
they want to easily download the application for their own devices.
Business companies:
large or small business/companies that need their own secure communication solution.
need more specific information about the product to understand if it meets their needs.
want to find out more about the cost of the professional solution.
User Persona
Based on the research so far I came up with two Persona examples, highlighting the main points to consider whilst re-designing the webpage.
Design
Once I had all the information, the next step was to illustrated the necessary graphic. The main purpose was to help users understand the features that the main product provides.
After presenting my team with the illustrations and the concept for the company webpage, it was time to start designing the hi-fi webpage.
Hi-fi Wireframe
Once I got the final content I created a high-fidelity interactive prototypes in Adobe XD. Due to the sensitivity of the data I’m unable to share the clear view of the final webpage design and all the illustration included in the final design.
