The User Interface

The Vision

The app is pretty simple overall, and specifically tailored to the clients usecase. I wanted the layout to be smooth, clean, and have a subtle style. This was (hopefully) acheived with the following:

1. unDraw
2. ChakraUI
3. Neumorphism
4. React Select

unDraw

Created by Katerina Limpitsouni, unDraw, is a collection of high quality, well optimized Scalable Vector Graphics (SVGs), which have been graciously opensourced. If you are paying attention you will find Katerina's art all throughout the modern web, and it's impact is really inspiring.

its own feel and Character

This exceptional resource allowed me to give the app a feel and a character which I otherwise could not without dedicating a good deal more time to the art.

Here we iterate through a series of graphics, one for each event. They are pre-assigned, so the user does not have to spend time assigning them, but provides a distinct visual anchor to aid with navigation.

//Each SVG is embedded in a react component imported above.
    let svgs = [
         <Event0 />,
         <Event1 />,
        ... // Then we cram them all in this array.
         <Event8 />,
         <Event9 />
]
// This function returns the ones place value, that way we go back through the list with each ten events. 
    let ones = (num) => Math.floor(num % 10);
return (
    ...
    <div className="row-header">
        <div className="row-title" href={`/session/:${session._id}`}>
        {/* display the SVG component based on the list index's one place. */}
            {svgs[ones(index)]}
        </div>
        ...
    </div>
    ...
)

ChakraUI

Segun Adebayo's ChakraUI component library, was a great choice to use. Especially for a desktop application. It was straightforward, quick-to-learn and easy to implement, and it's focus on accessability makes for great useablity improvements.

Get those Hurdles outa here

One of my favorite features of this library is the amount of control over the focus built into the library. You can easy determine what gets focused on when a modal opens and when it closes.

Though the user might never notice this type of optimization, it is the best kind. Anytime we can remove blocks and obstacles between the user and their goal is a huge victory. Their mind is freed up to focus and momentum towards their objective is safegaurded.

Here are just a few of the most noteable components that added to the useablity as well as the beauty of PairUp:

Toast

Pretty straightforward, toast communicates changes to the user, by popping up at the bottom of the screen.

function ToastExample() {
  const toast = useToast();
  return (
    <Button
      onClick={() =>
        toast({
          title: "Account created.",
          description: "We've created your account for you.",
          status: "success",
          duration: 9000,
          isClosable: true,
        })
      }
    >
      Show Toast
    </Button>
  );
}

I used them for new files created on the desktop and changes to the database.

• Tooltips

Dropdown Menus, Modals and Editables

Here is an example of using ChakraUi's dropdown menu, editables and modal.

Chakra was built well for a use case like this. Where we need the functionality of the dropdown menu and the pop up modal not to interfere with one another.

Neumorphism

Wait rocks?

No, not that Neumorphism. What we are talking about comes from joining "skeuomorphism" and "new" together; Neumorphism. Michal Malewicz did a good writeup on the subject, for all the details.

In plain text

To put it simply, skeuomorphism is the representation of imitations of real life objects, and Neumorphism in this context describes a recent approach including protruding buttons (as opposed to floating), and buttons as objects resting on a lower visual layer of the interface.

Adam Giebl created a beautiful neumorphism generator, which also serves as an excellent sandbox for getting familiar with this approach to making appearantly protruding elements. You can choose the perceived height, light source direction, and colors, as well as some different button shapes.

Up above you can see an example of my own use in creating rows. Neumorphism matches the smooth subtle feel I was aiming for, and I enjoyed playing around with it's implementation.

React Select