Front-end design for 2 services

Our team at Red Hat maintains a couple of internally facing services (called ODCS and CTS). Not everyone is familiar with the fact that these services run in the back-end. Sometimes people would visit the URL in their browser and wouldn’t be able to load any page. Then they would report particular service isn’t working.

Original pages

This is why simple HTML page was created for each service to serve as a front-end. Content-wise it’s a very basic page with only the name, description and links. Originally, design-wise only a raw HTML was used without any CSS.

Original pages for ODCS and CTS looked like this:

ODCS (original)
CTS (original)

As you can see, there is really not much for user to do on these pages. Nevertheless, I thought I could make them look a bit nicer and consistent with each other. Plus it would be a good opportunity to practice design, Figma and CSS.

Design process

I started out by listing all pieces of information that both pages would contain:

  • Service name
  • Service name abbreviation
  • Service description in 1 or 2 sentences
  • Link to documentation
  • Link to source code

ODCS page had one extra link to the list of composes (recent outputs of the ODCS service). And that’s it. The complexity of pages is low and that makes the design process somewhat easy.

Common layout

Next step was figuring out the common layout for both services.

Instead of experimenting I went with the first idea that came in mind: service name on the top, followed by description on the second row and finally two buttons.

Usually, I like to explore different ideas, let them fight, explore the breadth of possibilities. However, in this case I felt like the solution is pretty straightforward.

Inspiration

At this point, I went online and looked for an inspiration. I wasn’t sure about the color scheme and button styling. After a while I found a design that I liked and decided to emulate it in Figma.

Figma

As a primary CTA I chose “Open repo”. It points to the source code repository home page. “Read docs” points to the subsection of the same repo.

ODCS v1
CTS v1

Feedback

With the first draft of Figma designs ready I asked Marie, one of my colleagues who is an interaction designer, for feedback. We talked it would more suitable to use official Red Hat fonts (brand typography) and unify the colors of both pages.

Implementation

At this point, I’ve proceeded in implementing the revised design. It was a matter of studying brand guidelines and using the same values for different CSS attributes (colors, dimensions, margins, …).

It was a manual work instead of injecting any existing design system files… which is not the ideal way of doing things. However, it makes sense in this case as both services are internally facing thus the requirement for branding is just a “nice to have”. Furthermore, it doesn’t make sense to include any frameworks or template libraries for a single and simple pages such as these. We don’t expect to add any functionality to the front-end in the future anyway.

ODCS v3

Next version (v3 above) was also discussed with Marie and as you can see above the alignment of buttons and the link wasn’t quite right. Afterwards, I incorporated the remaining feedback.

Result

This is the version that is now deployed and greets our visitors.

ODCS (v4, deployed live)
CTS (deployed live)

Comparison

It looks a bit better than before which was the initial goal :]

Mission complete!

Project: ODCS & CTS front-end
Date: 2022
Duration: 15 days
Team: Roman Luks (UX, dev)
Consultation: Marie
Tools: Figma, Visual Studio Code, git
Source ODCS: https://pagure.io/odcs
Source CTS: https://pagure.io/cts