Product design and development

"Design and development for a new brand website that bets on videogames in the educational field."

Description of the project

The company ‘Mind the game’ requests a complete redesign of its website, which is under construction and without a defined brand identity.

Likewise, it started almost from scratch, without style guides, starting from an icon facilitating the company and allowing me to apply my UX/UI design skills in a holistic way.

Challenges

-> Identify the needs of the company
-> Generate a brand identity based on the logo and its needs
-> Generate the HTML, CSS and JS code to layout the website in Kopage
-> Generate the style guides
-> Incorporate an "events" section so that users can sign up for events, talks and presentations organised by the company. Incorporate also a News section on the website.

Design requirements

A meeting is held with the product owners (Giorgos and Ed) to identify the needs of the website.
‍
Below are the highlights:

What is the primary purpose of the website?
‍
- To generate leads and capture potential customers.
- To provide information about our products/services

Who is the target audience?

- People who do EU projects
- Schools and Universities
- Public and private companies

What is your primary value?

- Learning comes by enjoying the game

What type of content do you plan to include on the website?

- Case studies (future)
- Videos (demos)(how games look like)

Do you have any references or examples of websites you like?

- No, we admire the modern and clean design.

How do you want your product to look like?

- Our brand uses black and white as brand colors
- We have a logo that we want prominently displayed
- We use a friendly and approachable tone in our messaging
- We want our brand to be known for being innovative and cutting-edge

Old website analysis

The website is not responsive and does not even have content on all pages, however, improvements are identified:

-> Landing page underutilisation: Being the only area of the page that 100% of the users visit, it is necessary that all visitors understand the value proposition of Mind the game.

Users have to identify (in less than five) seconds:

a) What is Mind the Game
b) The benefits/value proposition of Mind the Game?

-> Adapt the homepage to generate leads and incorporate contact and newsletter subscription buttons at key points in the user experience

The leads KPI will measure the impact of the web redesign in attracting potential customers

-> Excessive text on all pages

Users don't read

-> Lack of examples of products and services, being the best way for users to connect with the brand and identify what they are looking for.
‍
-> Improve information architecture

Information architecture

In this case, fewer levels in the architecture help to avoid confusion and make it easier to identify the main categories. An excessive number of branches has been detected, which prevents them from quickly understanding the structure of the site.

Before

After

We decided to display products and services separately to accommodate users searching for either one specifically. This approach also ensures that both offerings and their respective content are clearly highlighted on the website (there will be customers looking for one or the other).

Navigation map

In addition to ensuring proper navigation, redirects have been applied to the contact page at the moments that generate the most confidence or emotion in the experience of using the website, such as the home page, the how we work page or the videos of the products that the company has designed. Repetition has been used to generate leads or enquiries from new users.

Behavioral design techniques

The techniques used to reduce user resistance to consultation with the company are shown below.

"Free" consultation

Use the word ‘free’ in the CTA ‘Free consultation’.
‍
-> Eliminates concerns about hidden costs
-> Activates emotional responses associated with gaining something without losing anything‍

Contact person

By introducing a specific person, users perceive that there is someone real and accessible behind the service, which removes psychological barriers such as distrust or fear of interacting with impersonal systems. This creates an emotional connection, reinforces the idea of availability and reduces friction when initiating contact, as the user feels that they are addressing a real individual and not an anonymous entity.

Availability of the contact person

Putting a green connected icon on the avatar makes the user feel that someone is available, so they are more likely to make the query without hesitation.

This way, we avoid the frustration of thinking about sending a query and not knowing if it will be answered soon.

-> Reinforces the perception of immediate availability: Users associate the green icon with presence and quick response
-> Decreases uncertainty about whether they will receive attention
-> Reinforces the feeling that there is a human behind the service, which can increase emotional connection.

Application

Techniques have been tried as long as there is consistency between expectation and reality in the service response.

Techniques such as countdowns that trigger a sense of scarcity, prompting the user to act faster, or that feel an internal need to complete the action before it is over have been rejected.

Brand identity

Having a relatively short deadline (a month and a half) to design and develop it, the design process has been altered.

In addition to the search for brand identity, my vision of the reorganisation of the information architecture has also been transferred.

Templates

The structure of the website has to be prepared to accommodate more products and services as time goes by. Filters will make it easier to find what we are looking for and the structure will allow the library to grow without affecting the user experience.

Product & Services gallery page - Grid view

Product & Services gallery page - List view

Product & Services detail view

Who we are

Responsiveness

Styleguide

Color tokens

Font tokens

Buttons & filters

Product render

Conclusions