DataShades.info
Datashades.info is meant to be a search hub for the CKAN community. From there, visitors can search CKAN data portals across the globe for site statistics.
Datashades.info is an entrepreneurial project of Link Digital, the agency I worked at that provides CKAN hosting, support, extension development, and theming to clients globally. Datashades.info is aiming to be a search hub for the CKAN community. When a user comes to the site, either searches for a URL or selects one from a list of indexed portals, they will get a quick overview of the data portal's statistics.
Link launched the beta version at the end of 2018. With all the functionalities almost built in place, we can go beyond just usability to make the site more engaging and more able to communicate the brand. Stage 2 has been managing to create delight for users via smoother product flow.
Project Context
What is CKAN?
CKAN is an open source data management system that helps manage and publish collections of data. Similar to other content management systems like WordPress - but for data instead of pages and blog posts. It is used by national and local governments, research institutions, and other organizations who collect a lot of data.
Role
Date
Scope
Mission
UI/UX Designer
Jul - Nov, 2019
Desk Research
Visual Design
Interaction Design
Concept Development
To refine the initial product and focus on improving the browsing experience and mobile navigation process.
The Datashades stakeholders want the product to stand out in the market, appealing to individuals across many cultures who are either private professionals or public servants. The interface design should draw users in further exploring the site, and ultimately increase the chances that they will want to buy into the premium indexing options.
Project Brief
"Information is like sun rays, it can make something previously unknown visible, but too much light can be blinding, just as too many unstructured data can be incomprehensible. So Datashades, like sunglasses, can filter data and help you see what you have."
-
To design a product that boosts cohesion in CKAN community.
-
To provide users multiple ways to access and retrieve the indexed data portals.
-
To guide users through the site in a more fluid, intuitive way.
-
To make the site more fun to interact with, even the user who is not data-savvy will find it enjoyable to use.
Objectives
Testing The Beta Version
What are the problems?
Findings
I tested the MVP and noticed 3 main issues need to be fixed.
- Issue 01 -
Categorize the portals into countries
Instead of throwing a list of URLs on the front page to upset users, the new version can introduce countries and brand names to categorize all the indexed portals and make the site content easier to follow. Hence, users are able to filter out portals by the parameters they're familiar with. As the CKAN community grows, states and cities can be added as advanced filtering options.
- Solution -
Off-putting URLs listing
The indexed data portals were displayed as a string of vapid URLs both in the map view and list view, discouraging visitors to continue to explore the product's core features.
- Issue 02 -
Build an interactive vector map
The MVP embedded the map from an established mapping system. An established mapping system can be fast implemented, but has less control over what's displayed. Contrarily, an interactive vector map does a better job of conveying important information, because it allows you to add labels or icons and use the brand colors or fonts. What's more, mobile optimizations are also easier.
- Solution -
Faulty total count & location pins
The count of CKAN data portals shown on the map were faulty, and much of the location pins couldn't reflect the real regions the portals are based in, causing tremendous confusions for users.
- Issue 03 -
Select the most useful default unit of time
The chart labels should be prominently visible and legible. A better method of specifying time along the x-axis is needed, such as adopting months as the default unit. Also, enable users to switch between hours, days, and years in the graph to generate each to their own meaningful results. On top of that, help texts or tooltips are essentials to showing users the hidden functionality.
- Solution -
Hard-to-read charts
In the charts, time was specified in hours on the X-axis to show the change in values over time. Yet, the number of metrics barely changes a bit, not even in days, making it very difficult for users to grab meaningful trends at first glance. Besides, there's no indication to tell users they can scroll the chart horizontally to see more values.
Visual Design
Branding
Visuals
The colors and typography chosen are in alignment with the Datashades brand guide. I used the color scheme to design a brand new logo for the product, which mimics the aperture on a camera that determines how much light travels through the lens.
HEX #67B845
HEX #078094
HEX #132B3A
HEX #4E616B
- Colors -
- Typography -
- Logo design -
Custom Illustration
Visuals
Interactive maps are great assets for businesses with large geographical reach. So I use Adobe Illustrator to customize all maps of world countries, which are polygonally stylized and overlaid with their country flag colors. These abstractly familiar maps were designed to bring the site content closer to users, aiming to increase the chance they become actively engaged with the site.
- Selection of poly maps -
UI Components
Visuals
The user interface elements were designed centred around the interactive map, which aimed at improving the navigation within the site that features a world map. The flat and clean UI was intended to make the poly maps stand out and focus on smoother page transitions.
High Fidelity Interface
Prototyping
Delivery
The new developed concept attempted to transform disengaged users into an engaged user by giving them an immersive, treasure-hunt-like experience along their journey of discovering CKAN data portals all over the world. The UI animations and transition effects were designed to provide instant visual feedback to users' actions on the site, and thus to create a more welcoming and rewarding experience for them.
The new prototype features a full-screen world map overlaid with the brand colour on the homepage. The map functions as a navigation tool, where users can roam freely, zoom in and out and drag the cursor in any direction. As users move across the map, they will notice the shape of country that hosts the CKAN data portals is clickable. The poly map comes in view when the user moves the mouse over those countries, giving a sense of exploration and inviting them to discover more.
1. A playable interactive world map
When clicked, the map hotspot transports users to the dedicated country page of their choice, where they will see a list of city portals on the left-hand side and a country map on the right. The portals are displayed as luminous dots distributed all over the map. On click, each dot reveals the name of the portal and its URL, and a preview panel will slide up from the bottom. To learn more details about the selected portal, just click on “Learn more”, the preview panel will expand into a portal profile page with more useful information presented in charts.
2. Navigate worldwide CKAN portals by countries
Except for dragging the mouse across the map, users are allowed to search a country of their interest. When click on the search icon at the bottom right of homepage, a search panel with autocomplete pops up. The autocomplete functionality not only speeds up users’ typing, but also suggests to them other countries available for exploration. When the search is activated, the map immediately zooms in on the country of their query. On click, users are transferred to its national view of CKAN portals.
3. Search a country with help of autocomplete
Besides the map, users can either choose to enter or paste a CKAN portal URL on the “Search” page, which will direct them straight to the portal profile, or select the list view in the “Portals”, where the indexed portals are displayed all at once on a vertically scrolling page.
4. Access a portal profile via multiple entry points
Mobile Optimization
Delivery
The site can be assessed by browsers on any device. A series of UI were tailored for better mobile experience, such as gesture-controlled maps, easy-to-tap buttons, hamburger menu, and a responsive table which are more legible without having to scroll horizontally.
Interactive maps
Search autocomplete
Multiple entry points
Wrap Up
As it's an internal project with no strict delivery deadline, I was able to have ample time to develop concepts for stage 2 of the product. I made use of downtime to do heaps of case studies and research on the technical solutions. The process was fun because I was given chance to collect information on innovative solutions, explore various design options, and experiment with new methods. Then chose the right ones, adapted them and applied to our own case. To keep the product rolling, the stage 3 could be:
-
Highlighting the premium indexing portals on the homepage world-map
-
Enabling users to filter the maps by the most useful parameters to them
-
Turning the world-map into an interactive exploration game for awareness-raising purpose, for example, to educate visitors about the significance of opening up data or to promote the important open data events.
Some websites that feature interactive maps I found very inspirational are:
Here is the tool that helps create interactive maps using SVG files - MapSVG.