What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

[ Case study coming soon ]

Imagine a big sales company that started in the early 2000s and has grown a huge amount of transactions data over the years. These transaction records have grown to over 10 Petabytes of data and are hosted on an on-premise database like Oracle. When a sales transaction is needed, it can take 2-3 days to be generated and cases like power outages and disaster recovery processes take a long while to complete which makes customers constantly lose confidence in the company. Other issues with on-premise databases are: 

• Database maintenance
• Scalability
• Infrastructure cost
• Database administration know-how
  

One of the obvious solutions is to switch sales transactions from being hosted on an on-premise database like Oracle to a cloud data warehouse where database records can be easily generated. Advantages of cloud storage include :

• speed and performance
• Easy to scale up and down
• Unlimited concurrency
• Zero management data warehouse as a service.
• Easy integration with Business Intelligence (BI) tools.

‍

The goal of this project was to design an interface that helped companies transpose their database hosted on-premise platforms like Oracle, to Cloud storage.

‍

The problem

As easy as it might sound, the process of switching hosting platforms can be tedious. It means the company needs to have new hires that'll rebuild the same database structure for the cloud storage warehouse. Immense time and budget will need to be dedicated to rebuilding the database from scratch and the team has to put huge attention to data inputs to avoid information mismatch.

‍

The solution

The goal of the project was to build a migration tool that'll easily allow companies to instantly migrate an on-premise database to a cloud storage unit with just a few clicks.

‍

Audience

The primary users of the web app are going to be Database engineers but I and the developer had to collaborate and pay attention to language, technical terms, visual guides that will be used to make sure we build a seamless migration process interaction for engineers regardless of their level of expertise. 

‍

Constraints

To save development time, the dev mentioned the intentions to use just Bootstrap to build the interface, so I had to make sure the screens and components I was designing were easily implementable using bootstrap's style guide.

Process

To understand what the developer had initially built in the backend, I had to review the initial process of migration, database credentials needed, objects that will be migrated(tables, procedures, functions & views), error handling and notification, filtering objects, the duration for migration, and figure out the best experience and visual information to show to the developers at each stage of migration.

After gathering these requirements, I & the developer created a user flow to highlight each step of migration.

‍

‍

Design Solution

For the index page I created a simple but unique view that communicated the idea of data being transferred. I made some research on transfer/change to different forms, I got into a rabbit hole of energy transfer and discovered WAVES. A wave is a disturbance that moves energy from one place to another. Did some extra digging and waves basically are ways in which energy is transferred. I moved on to research wave motions to see if there were any elements I could imitate into the design I was working and voila!

Searching through three.js  I discovered a javascript interaction that mimicked a wave motion, researched more, and found other implementation examples on Codepen which was amazing because this was what I needed to pitch the development idea to the developer. We discussed and for the implementation, we were going to remove to mouse position event because it was an unnecessary interaction for the page. 

I moved on to design the simple landing page with the wave-like motion and then created a style guide to build other pages involved in the migration process.

‍

‍

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.