A project for an offshoot of The Fraunhofer Society, a renowned German research organization. The goal of sovity is to make data sovereignty available to everyone, through the use of their SaaS as a simple and effective means to access international data spaces.
About two weeks for adaptive web.
Sovity is a groundbreaking for data sovereignty-as-a-service developed by The Fraunhofer Society. A novel product in the field of data sovereignty, sovity allows clients to protect their data through use of international data spaces, making sure they maintain ownership of it. Sovity needed a space for potential users to engage with the company and to inform them about the progress of the product and of sovity.
Prospective users who would like to maintain sovereignty of their data online have no means to learn about what sovity is and how it works. They have no way to inquire about the product, its development, or its applications.
Create a space where users can learn about international data spaces and data sovereignty, engage with sovity as a company, and become informed on the product and services sovity provides.
Data sovereignty and international data spaces are complex concepts that we were not previously familiar with. Learning about them from the client and understanding the problems their product is solving for their users was the first step to empathizing with both the client and their potential users.
This involved interviewing the client and analyzing the data they had previously collected.
After establishing what the client and potential user needs were, we were able to begin the process of narrowing down the problem to a succinct statement that would help us to provide a working solution to fit both the users’ and clients’ needs.
“Businesses at risk of losing the privacy of their data online need a means to access international data spaces without having complex knowledge on data ecosystems. Sovity solves this issue by providing Data Sovereignty as a Service (DSaaS), simplifying the process. Sovity needs a means to connect with potential users and inform them on their product, its applications, and its availability”
Honing in on the client and users needs allowed us to establish and prioritize features for the site:
- Use case information
- Contact information/form
- Explanation of product and important concepts (data sovereignty, international data spaces, etc)
- Job opening listings / careers page
- History and development information on sovity
- Multi-language options (at least German & English)
Could Eventually Haves:
Nice to Haves:
- News section for updates on company and product
- Testimonials from partners
- Beta testing sign-up
- Information on packages and individual services available
- e-commerce platform, ability to purchase or sign up for services
After establishing what our problem and user goals from the site were, we were able to create a few simple user flows to further guide our design process.
The client provided a logo and a few colors previously designed for the brand, but nothing else. A design system or style guide did not exist, so we were tasked with making one.
After playing with the colors and doing some initial brainstorming, we settled on an atomic design approach, to start from the most basics elements and build up from there.
We built everything sequentially — molecules, organisms, templates and pages — from our basic elements of hexagons, dot grids, rectangles, and arrows.
Once we had all the pieces, we just needed to build the wireframes and prototypes to house them all.
Using our must haves and data we settled on the site map, using our user flows, prioritized features, and information architecture decided on with the client.
We then created our wireframes, from some lo-fi paper sketches to a full hi-fi web prototype, along with a full mobile version.
Evalute
After finishing the hi-fi prototype, the website was built in WordPress. Several UI changes were made even after handoff, including the addition of a visual timeline of sovity, as well as editing much of the copy/text to be shorter and more concise.
Takeaways
- Make use of as much data as possible, before ever beginning to make design decisions
- Question previous decisions and existing design elements, your ultimate loyalty is only to the user
- An atomic design approach can help you find a design flow if you don’t know where to begin
- Make sure to have enough contrast when using similar colors, especially in terms of accessibility and readability
- Write copy as concisely as possible and make sure to edit thoughtfully
- Find creative ways to display text when your page is text heavy
If you need thoughtful, user centered design, are hiring, or just want to get a coffee, get in touch.
.png)
