Case studies – Vivolead Desktop

Context

Website Redesign, UX on focus

Denne projekt omhandler en redesign af Vivoleads website med særligt fokus på den generelle brugeroplevelse samt de 5 elementer fra UX honeycomb modellen (findability, usable, useful, credible og value). Yderligere har der været sat stor fokus på at skabe et website, der klart og enkelt indikerer virksomhedens service, den reelle værdi appen skaber for kunden, og hvordan det tilbudte service anvendes. Kort sagt vi vil gerne skabe en mere informativ og opdateret website for Vivolead.

Client: Vivolead Aps

responsibilities

deliverables

YEAR

Getting started

Problems & Goal

Problems

Today, the client's website does not generate any new users and thus has no concrete value for the company. In other words, the major challenge is lead generation through the clients' website.
The website's design and layout is not in line with the technology's foresight and capabilities. (Outdated website layout)
The website today does not always have a clear information architecture

Project goal

Peter Morville's Honeycomb model, C.R.A.P and AIDA should be used to enhance the current user experience for the customer (target audience) while addressing the current user experience challenges
The information architecture should be improved in such a way that users' user experience becomes simpler, informative and value-adding
Visual elements we can use to make Vivolead's value propositions visible as well as personality on their new website.

The first steps

RESEARCH & STRATEGY

Based on User stories, User journey mapping, and Information-architecture, we will first prepare low fidelity wireframes based on UX honeycomb and AIDA using Balsamiq. The low fidelity wireframes are used to get fast feedback from the client before designing high-fidelity mockups, where we wanted to focus in particular on the C.R.A.P model.

The final design was prototyped for the client using HTML and CSS for the semantic structure as well as JS to create micro-interactions on our solution and Bootstrap to speed up the workflow. All coding was done either at Atom or Brackets and with Github as our collaboration tool..

Every brand have a style

Color & fonts

Fonts can help create a visual hierarchy in a website’s content. the selected fonts are further selected to make the text easier to read to the user

In agreement with the client, it was decided to keep their current website and brand colors.

A streight roedaghed

Site map

The goal of information architecture is to build a hierarchy of menus, sections, and content that feels natural to users and does not mislead or interfere with their use of the site.

Following the creation of the Information Architecture, the newly updated version was tested using a closed map sorting test by LinkedIn users. The test was conducted using the online tool Optimal Workshop to find out what preferences the target audience had when it came to Vivolead’s website content.

First impression is important

Wireframes

Research and user analysis formed the basis for the initial wireframes. The new Landingpage website has more focused on telling the user about Vivolead and their application.

The company has some material they want users to have access to. The materials can be anything from introduction videos to how-to tutorial and blog posts.

Since the business application requires some personalization, it is necessary to schedule physical meetings. This option under the contact page is made easier to navigate through using the dropdown menu.

Prototype, Test, Design

prototype & FINAL DESIGN

After testing our Prototype on the target audience, necessary design adjustments were made. User test feedback is an extremely important element to ensure an end product that meets user needs as well as the set goal at the start of the project.