Neutopia
Neutopia is a platform that allows organisations to harness the power of their community through personalised content, collaboration, and learning.
Made in
Figma
Type
Website
Reason
Offer Analytics Tools
Role
UI Designer
Timeline
7 Weeks
Industry
Learning, Marketing & Community Building
Defining The Problem
Part 1: Admin User (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.
Project Process
Research
This project was a UI Design project, where I relied on research previously conducted by other designers.
Competitor Analysis
Ideation
Define MVP
Information Architecture
User Flows
Sketching
Prototyping
Hi-Fi Wireframes
Interactive prototype
Usability testing
Reiteration
Visuals
Design System
Accessibility Audit
Layouts & Responsiveness
Interactions and Animation
User Testing
Hi-Fi Wireframes
Interactive prototype
User testing
Reiteration
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.
.png)
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.
.png)
Design System & Style Guide
To give the users a sense of security, familiarity and comfort, I started building a simple design system, to help achieve a consistent branding, a usable, reusable and accessible eco system for creating and maintaining the platform design.
Primary Colors
#D9575C
#D95555
#F78DA7
Neutral Colors
#172038
#6D767D
#ABB8C3
#F9F6F3
Semantic Colors
#CF2E2E
#FF6900
#FCB900
#057ABD
#6EC1E4
#23A455
#00d084
Chart Gradients Theme
Typography
Font: Lato
Weight: (Light, Regular, Medium, Bold, ExtraBold)
Base Value: 16
Scale: 1.25 - 1.5
Line Height: 120% - 150% from large to small text
Layout Grid
To achieve consistency between different dashboards while taking full advantage of screen real estate, I implemented an 8-point grid system in 2 variations. One to accommodate the different dashboards, and a generic one for the home page.
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.
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.
.png)
