Create a Site Experience | Bizzdesign

BiZZdesign was in need of an UI/UX audit and an incremental improvement of the experience of how Enterprise Architects share diagrams with stakeholders.
Client
Bizzdesign
Year
2023
Timeline
8 weeks
Service(s)
UX Reseach
 / 
UI/UX Design
 / 
Problem/Challenge
Subscription Email Design

Enterprise Architects needed a better way of creating Sites(Presentations) and share them with business stakeholders. However Bizzdesign has two different product Enteprise Studio and Horizzon and making changes to what happens in their modeling app Enteprise Studio was out of scope. How did we handle that?

Goal
Search Alert

Perform a UX audit on the current experience and design an incremental improvement which is much better for the users irregardless of the technical limitations faced by Bizzdesign.

Methodology/Strategy
Recruitment materials

For this project, Contextual design methodology was utilised. We had a contextual inquiry with an enterprise architect which of course included an interview and an observation of him interacting with the feature. Afterwards, we interpreted the session and visualised our findings in work models and an affinity diagram. We then created storyboards and redesigned the system in order to better meet his needs.

Explanation types

One useful way of differentiating between the different explanation needs is based on the types of questions users might want to ask the model.

In the domain of context-aware computing, the following types of questions are defined:

Input, Output, What, Why, Why Not, How, What If, How to, and Certainty

Data Gathering
Social media campaign visuals
Competitor Analysis
Decision Matrix

The project started with a remote interview with screen sharing with a consultant at BiZZdesign. This participant was chosen, because he is frequently using the feature. The consultant creates sites on a regular basis for demonstration purposes and he also often helps customers struggling with it.

The consultant was asked to interact with the feature while thinking aloud. Many issues were observed during the session, which you can see in the video below.

Data analysis
A promotional leaflet
Information Architecture

The issues the user had with the system were discovered and organised into an Affinity diagram of breakdowns, which you can see below. Some of them were issues he is facing daily with this feature. Some come directly from customer complaints and some we discovered during the interview. The issues were clustered into 3 different groups - General, Scope and start view and Sharing and publishing.

Moreover, a flow model was created for this use case.

The Flow Model captures communication and coordination between people to accomplish work. It showed who the user interacts with, what do they exchange with each other, individuals’s tasks and where the breakdowns occur. And finally, a storyboard was designed to better visualise the user’s journey and achieve a common understanding.

User Requirements
Infographic about HousingAnywhere

User requirements were defined in the form of user stories. As the step-by-step wizard was chosen as the leading design pattern for this project it made sense to organise the user stories around the user flow of creating a site.

User Requirements
Rotterdam Hotspots Illustrations

Illustrations of Rotterdam hotspots to be used in promotional materials about living in Rotterdam.

Tools:

Illustrator

Information Architecture
Design Version 1 and 3D Animations
Ideation and Sketching
Design Version 1 and 3D Animations

A wizard was chosen for the final design. It could help guide the user through the different steps needed to create a useful site.

Information Architecture &
Low-fi prototype
Design Version 1 and 3D Animations
Usability Testing Version 1 &
Improvements

4 usability tests were conducted to evaluate the first prototype’s usability and clarity.

Afterwards, the prototype was improved based on the findings. Some of the issues spotted during the usability tests are described below together with their improvements.

Design system

A simple design system was created to ensure consistency and speed up the high-fidelity design process.
You can access the design system from here.

High-Fidelity design

The final high-fidelity designed prototype can be accessed at this link.

Or please watch the video below.

Click map and Heatmap study

Once the web page was live click map and heatmap analysis could be made as all animations were now running smoothly and all interactions worked as expected.

Tobii eye tracker was used in another set of user tests in order to be find out which elements on the page attract the most attention and which are missed and see if we could use this information to optimise the page further in the future. A heatmap was generated based on the results.

Moreover, a clickmap was extracted from Hotjar which showed us where do users clicked the most on the live page.

Evaluation

Due to limited access to end users, an expert evaluation was conducted by 3 UX Designers. The results are shown below. There was not enough time to implement changes, but the evaluation was carefully documented.

Improvements after testing

Improvements were made based on the major issues found during the usability tests. Some are mentioned below.