Qravity Developer’s Log, Episode II: UI/UX
In Episode I of the Qravity Developer’s Log we took you through the initial steps of Qravity’s development. During this stage, we defined project requirements, began planning the user experience (UX), and started working on the platform’s user interface (UI).
In this episode, we’re diving deeper into the structure of the Qravity UI. You will learn about how we approached platform design, and the ideas that Sergey Shevchenko, Qravity’s UI/UX Designer, presented during the process.
Defining design objectives
Qravity enables people to produce, distribute, and consume digital entertainment in a transparent and equitable community-driven environment. Producers and creatives throughout the world can use the platform to complete and profit from projects they feel passionate about.
We designed Qravity with the objective of simplifying the production and distribution of digital entertainment in a comprehensive, easy-to-use platform. Project founders (PFs) can use it to plan timelines, create and allocate tasks, and supervise task completion. Qravity also makes it easy for content creators (CCs) to discover and collaborate on commercially viable projects.
Establishing UI color palette and element design
Qravity’s users will work primarily with forms and dashboards, we initially proposed a predominantly light color palette with blue accents, and based on the Material Design Guidelines. However, because Qravity is a platform for content creation, we soon decided that a darker color scheme would be easier on the users’ eyes, especially for working long hours.
With the aim of maintaining a simple look and feel that is easy to read and navigate, we developed a new UI consisting of austere dark greys with mint accents. Weeks later, while discussing post-MVP development, we re-evaluated Qravity’s look and feel and decided that it needed to be more fun and inspiring.
During this round, we proposed an outer space theme with a dark blue palette. David felt that the concept and colors were perfect for Qravity, so we took its branding in this direction.
To enhance Qravity’s calm cosmic vibe and provide a sense of floating in zero gravity, we used rounded shapes, waves, and arcs. When designing individual elements, we took inspiration from the flat concentric formations of dust and ice that orbit planets and other cosmic bodies.
We applied our galactic theme and palette to Qravity’s most critical, and complex, pages: platform registration, project listings, project details, and task list. As we reviewed these pages, we fine-tuned the Qravity color palette, selected fonts, and designed individual elements. We built all of this into a comprehensive graphical user interface (GUI) that exudes a cosmic atmosphere of limitless potential.
Travelling through Qravity
Qravity greets unregistered users with a simple signup screen.
After a user registers and signs in, they can select one of two user roles: project founder (PF) or content creator (CC). The platform then has them provide basic profile information, including their profession and skills. Once the user has completed their profile, Qravity takes them to the Find a Project page, which lists open projects with tasks for CCs. Users can filter projects according to content type, namely feature film, documentary, digital publication, music, audio book, game, or application.
Project previews display the project’s title, the PF’s name, team size, task count, the percentage of project stakes (in the form of Qravity project tokens, or QPT) available to CCs, and a short introduction. We kept the information in the project previews to a minimum so that users can swiftly scan projects and easily determine which ones best match their skills and interests.
Once a user selects a project, the platform presents the project’s detail page. The page header consists of the project’s title, color-coded category, and cover image; below this, users can see detailed project information:
- Project creation date
- Number of open tasks
- Number of completed tasks
- Team size
- Available QPT
- QPT awarded to CCs
Further down the page, users can see the PF’s profile picture, the PF’s share of the project’s QPT, and the full project description.
Perhaps the most important element of the project detail page is the list of open project tasks. Information about each task appears in the following order:
- Task name
- The type of CC required to complete the task
- Completion status
- The task’s QPT value
- Assignee (if the task has already been assigned to someone).
We added space to the table and placed each row in a separate, lighter-colored bar to emphasize information about project tasks and make it easier to read. Initially, users can only view a table with the five most recent tasks created by the PF. Clicking on the ALL TASKS redirects the user to a separate page with the full list of all project tasks.
In addition to viewing ongoing projects and tasks, users can also start projects of their own. We took great care to keep Qravity’s project initiation process simple and intuitive. Users simply need to create a Project Founder profile then click the MY PROJECTS button in the main navigation menu. If it’s their first Qravity project, they will see a CREATE NEW PROJECT button; otherwise, they will see the button along with a grid with clickable thumbnails of their current and completed projects.
To start a project on Qravity, the PF enters the project title, category, description, and cover image. They also have the option of attaching files that could help kickstart the initial phases of project development. The PF then defines the share of revenue they will receive from the distribution of the completed project.
We applied the same design to forms throughout the platform. Understanding the tedium of filling in long forms, we made a conscious effort to make the process as engaging as it is practical, with no distractions.
Once the PF defines their share of project revenue, Qravity allocates the remaining QPT to the CC team automatically. The platform presents QPT distribution in a line chart, which highlights revenue share for each project participant; namely, CCs, PF, Qravity, and QCO Boost contributors (read the Qravity white paper to learn about QCO Boost and how it provides advance funding to help drive projects to completion). Once the PF clicks on the CREATE PROJECT button, they can break their projects down into tasks and allocate QPT to those tasks, and CCs can apply to complete those tasks.
All Qravity users have a profile page where they can present themselves and showcase their talents. Just like everything else on the platform, profile setup is highly intuitive, making it easy for PFs and CCs to, for instance, upload their profile pictures, write their bios, link to their portfolios, and add and edit their skills.
Because Qravity is currently in an active stage of development, it will contain more than the pages we have just described. We are planning to add more features to the platform, including 2-factor authentication; the ability for Qravity users to send referral codes to invite new users to the platform; Qravity CC portfolios, in which CCs can showcase the amazing work they’ve created on the platform; and an achievements page.
In the next episode of the Qravity Developer’s Log, we will look at Qravity’s technical architecture and the technologies we are using to develop the platform. We will also explore the platform’s components and more of the features we are planning to add in the near future.
