Neutopia

Neutopia is a platform that allows organisations to harness the power of their community through personalised content, collaboration, and learning.

UI Design

Competitor Analysis

Usability Testing

Accessibility Evaluation

User Flow

High-Fidelity UI

Prototype

Interaction Design

Motion Design

Role

UI Designer

Industry

Learning, Marketing & Community Building

Timeline

6 Weeks

Made in

Figma

Type

Website

Reason

Study Project

Defining The Problem

Part 1: Community Admin (Analytics)

Current State: To get access to the analytics, the admin user has to download 1 excel file per category (5 total) each time they want new data.

1. Viewing, downloading and getting access to data and insights on how a course, group or event is performing, is not a straightforward job.

2. Accessing real time data is a tedious, repetitive and time consuming endeavour.

3. Analysing data can be challenging task.

Part 2: Alumni (Onboarding)

Current State: Alumni receives an email with a registration link, they create a password and get redirected to the home page.

1. Registration process does not introduce the user to the platform or collect essential information to connect with other members of the community.

2. Tailored content is considered at a later stage, when users might be overwhelmed or already distracted with generic content.

3. There is a lack of brand consistency, which can confuse users and make it hard to portray a sense of security, as well as some accessibility issues.

Analytics Dashboard

The Solution: Part 1

For the community admin user, I created an analytics dashboard that summarises the different types of data, to give a quick overview of the overall performance of the content available.

The user can hover over elements to access more details, scroll through a list to view information about a specific, course, group or event and navigate to that content or even to a different dashboard.

The Solution: Part 2

I provided the user with the ability to go into more detail and have access to more data and insights, by creating a dedicated dashboard page for each topic or category.

To achieve consistency and not overwhelm the user with new information, I adapted the excel file data to a dashboard format, this way the user is still familiar with how to navigate the content without a steep learning curve.

The Solution: Part 3

To make sure that existing users of the excel files, still have access to the data while the transition to the new dashboard is complete, I created a dedicated page where they can download the reports as before, giving them a chance to experience both approaches.

This will help the business make a smooth transition to the new approach, without affecting the users or generate blockers.

Onboarding

The Solution: Part 1

After analysing the research done previously, and conducting a competitor analysis of the onboarding process, I introduced a 3 step onboarding.

Each step is dedicated to a category of information that will contribute to the user’s profile

The first form is a mandatory step, where the user can either use SSO (Not designed but suggested to the client), Social sign up, or register with their email.

The Solution: Part 2

The second step is where a user can provide personal information, that would help other members, mentors and community leaders, learn more about them.

The user can upload a photo, a personal or professional website, and give a brief introduction about them selves.

To give the user a clear indication of the process, I used progress steppers as signifiers of how far the user progressed and how much more needs to be done. An animation of the waves plays throughout the form indicating progress for a more visual indicator.

The Solution: Part 3

Finally, the user can select topics and categories of interest, to get a more tailored experience, with relevant content and more accurate suggestions

While providing the information can help the user and other members to connect to the right people and share relevant content, I made 2 steps of the onboarding form optional, to provide the user with an alternative onboarding experience and give them the chance to complete their profile at a later time.

High Fidelity Prototype

For the community admin user, I created an analytics dashboard that summarises the different types of data, to give a quick overview of the overall performance of the content available.

Prototype

The Questions

What do our admins need to achieve?

Analyse data, and audit large amount of content, as efficient as possible.

What do our users want?

Tools to complete daily tasks with minimum repetition.

What do our users need to achieve?

Create an account and register with minimum effort

What do users want?

A seamless, informative and guided on-boarding experience

The Story

What do users say?

After interviewing admin users from different partners, the main theme was a feeling of frustration and helplessness.

Long, complex and confusing spreadsheet documents.

Tasks are repeated again and again for the same information...

How might we understand the users needs?

By using the user stories tool, Mr. Marshmallow here will take us through his thoughts and ideas about what an admin user needs and wants.

The Goals

As the feature did not exist in the current product offering, I first set some goals for the MVP or beta version and confirmed with the stakeholders what success would look like.


We decided on the following scope:

Analytics Feature

Create a dashboard with a summary of the data, to give users a quick overview of the overall performance of the content available.

Create multiple dashboards with more in depth information about specific data categories so users can analyse and audit the content.

Provide a temporary way for users to access the data the current way, to avoid blockers and allow for a smooth transition to the new system.

On-Boarding Feature

Introduce a simple on-boarding process for users to provide basic information and start customising their experience early.

Evaluate the current design and branding consistency and suggest changes that provide a sense of security to users.

Perform an accessibility audit and bring the platform design to the current standards so it can be more inclusive and accessible by a broad range of users.

Feature Prioritisation

With a short timeline for a project of this magnitude, I had to prioritise the features with the most impact and provide a first iteration of the solution that can be tested and approved by users in a fast way.

From my discussions with the client, we determined that having dashboards with the functionality to view the data without having to download files was the first priority, followed by the onboarding flow as a second project.

Hands-On

My Ideation process starts with sketching a few ideas to start visualising what a solution might look like and iterate, iterate, iterate...

Step 1:

Where do the charts from the spreadsheets fit?

Are they the right type of charts for this use case?

Which data would users want to see in the summary?

How might we reduce the cognitive load so the data is less overwhelming?

How might we present data in an easy, scannable format for a high level overview?

How might we make accessing data dynamic and less repetitive?

Step 2:

What would make visualising the data easier?

What data should we prioritise?

Usability Testing

Round 1

To validate the initial ideas, I set up usability test sessions with multiple users, and took them through multiple wireframes that represent different approaches to dashboard layouts.

This allowed me to prioritise what matters to them and what would be the best approach.

Round 2

I created a few iterations of the initial dashboards to test with users again and move to prototyping.

The second round of testing provided valuable insights into specific details about how the dashboards would be used by the admin users.

On-boarding iterations

Dashboards iterations

Conclusion & Future Opportunities

Admins Feedback

Having a dashboard to view the data in real time is going to help us save countless hours of tedious work.

Being able to view different types of data highlights in one screen is going to minimise the load on our operations and save time that can be used in other areas of the business.

With this approach, we’ll be able to determine the performance of content quickly and efficiently.

Opportunities

Enhance the experience with data filters, heat map charts and more specific data visualisation.

Reconsider branding to accommodate accessibility and reach a wider audience.

A mobile adaptation of the analytics feature.