Designing the RAYA Portal: Applying a Deep-Tech Approach to an Employee Portal

When we create something new, we are not creating just to come up with a new project. Instead, we create each of our products with a specific purpose. Yana Kabenkina is a Lead of Web Applications at WayRay. She is working on web projects and trying to keep things simple and functional. One of her latest projects is RAYA — an internal portal for WayRay employees. A project for which we were customers and executors at the same time. Read why it is so challenging for us and what are the main principles of every web project that we do at WayRay.

The basis of design is to see the essence

“The RAYA project is indicative of how WayRay works and the deep-tech approach.”

At WayRay, we are constantly working on two web projects — our site wayray.com and the internal RAYA portal. We researched other companies' existing internal internet systems, and it became clear that standard approaches do not suit us. We do not want to use ready-made schemes; we want to make our own with its own characteristics and functionality. The main design principle we use is to understand the goal and see the essence: to know who, how, what, and in which cases we will use it. This can only work when we make our own.

“The original idea sounded like this: to collect everything in one place so that all working tools can be quickly accessed from one page.”

There is a lot to factor into this process, however. WayRay has a lot of internal services, guidelines, work applications, software, and other considerations for the portal. In the first release, RAYA was a landing page consisting of a field of news posts and categorized working links. This version lasted for a year, whereupon we realized that one landing didn’t cover all the company's potential needs. So we came to the conclusion that this is a multi-page portal with long reads about the company and culture, contacts, onboarding, dashboards, and analytics. At the same time, the main idea has not gone anywhere — quick access to everything that the user may need.

RAYA is a single, streamlined platform for all of the existing information about the company that will substitute wayray.com (our ex internal portal). In there, users (WayRay employees) can locate digital tools for all of their work and communication needs, dive into product descriptions, read the WayRay Code (WayRay Employee handbook), catch up on the latest company news, submit a request to HR/IT/Admin, and more.

“As you might have guessed, the name RAYA comes from RAY, and according to different sources, it signifies friend, advisor, and protector. It’s also gender-neutral.”

Functionality comes first

There is a portal, an external site, and different functions, different target audiences. But, of course, we are guided by our principles, we are strict and rational, and we always start with an idea and adapt it for specific users. The main site wayray.com is more used for presenting the company to the outside world, so it is more promotional and visually rich in nature. At the same time, the internal RAYA portal is made for employees within the company. While an internal portal depends on functionality, it performs different tasks, simplifies work. Effectively, we have to take particular approaches to achieve particular aims.

“RAYA is made by WayRay for WayRay. This is a big feature and a positive feature. We are our own customers, and we can improve it constantly.”

Enough work was done, and we finally released the current version, guided by the principles of user-friendliness and functionality. In addition, we plan to increase the structure of the internal portal: collect a large section with a knowledge base, collect useful articles by category, guidelines, and have onboarding, which will also help when a new employee comes. There is always room for growth, changes, and improvements, and we will always consider this.

RAYA’s Sitemap

Initially, it was a landing page that collected useful links and provided quick access to all working resources. Then it became clear that one landing page would not cover all the company's potential needs, and it was necessary to expand to a full-fledged portal. After this understanding, the task at hand was to rework everything, taking into account the new sections.

The revision took place in several stages: first, a map of the future portal was made, and the entire scope of work was laid out, then all sections were divided into their release priority. For the first release, three main sections were designated: main, culture, and team, on which the active work began.

There were several stages in the design, and we’ve used the principle of “expansion-contraction”. From a design perspective, expansion and contraction factors can make a huge difference to the layout and appearance of a website. Expansion is when there is active work on the mood board, with many different potential options. A screening process leaves 1–3 of the most successful concepts from this set of options, the contraction, which is to undergo a more thorough study. Sometimes it happens that after a more detailed examination of a concept, you realize that this is not what you need. In this case, the “expansion-contraction” stage starts anew, but in the end, you eventually come to exactly what you need.

We needed new sections and scalability, in other words, expansion to a fully formed portal. We also realized that it was time to change our visual style. For instance, the illustrations designed in-house looked outsourced and trite. There was no WayRay in them.

The first stage was considering the visual side and finding a different style. We wanted to play with the lasers’ aesthetic throughout, with red lasers represented in gradient. But as the draft was ready, it turned out to be nothing like we wanted it to be. It looked as if it was a fleeting trend that was about to fade away. We needed something more unique and utilitarian.

The next stage was to create a full site map in order to sidestep from visuals to function. On the basis of the map, we had some ideation stages with several designers, but their approaches were not suitable for us. Having undertaken research on existing portals, we made the new landing. It was more minimal, just about function, no design at all.

This approach became the foundation of the MVP-version. At this point, we realized that we had lost a lot of time looking for our unique visual style, and the process could have lasted even longer. So, we decided to release the MVP-version to work in stages.

“We didn’t try to cover everything all at once, as we used to, and we still had the final product capable of helping the team to work. During this time we were considering the improvement of the functional side, visual concept, and identity.”

Everything is compact, understandable, and in plain sight

The first thing we achieved is that all the main links and services are divided into semantic groups and placed on one main page screen. This allows you to have quick access to everything without unnecessary scrolling. Everything is compact, understandable, and in plain sight.

In the team section, we have convenient filters for departments, projects, locations, and a search that works by the first name, last name, email, and phone number. All this allows you to find the right person and their contact information quickly. There is also a more informative section about the culture of the company. Here you can read everything about the company's history, its technology, development, and values. It is beneficial for both new employees and those who have been working for a long time to refresh themselves, as it gives a sense of full awareness and a strong idea of ​​the place in which they work.

“The very first thing that distinguishes us is that we are not a huge corporation, whose portals are more like some kind of typical social network with message boards, internal discussions, and so on.”

Initially, our task was to create a convenient and functional tool. If you google “corporate portal”, for example, you can see that basically, all the portals are very dry and too “corporate”, in many places, there is a characteristic “tiled” type of information presentation. We tried to get away from such standard solutions and make an uncluttered but informative, friendly, helpful, and pleased to visit service for our employees. It seems we have succeeded, but there is still a lot of work ahead.

The hardest part is the main page

The main page should have everything. At the same time, it should be simple, capacious, and super understandable. It has had many iterations. For example, with the Rabbithole (our contact book)— everything was clear; it was formed right away. Photos of employees and brief updated information about them. But there were many problems with the main page, and we still continue to work with the backlog and feedback. We are constantly thinking about its transformation.

“One of our challenges was to put the RAYA homepage on the horizontal iPad screen.”

In terms of design and development, it is important to make everything here as simple and understandable as possible. This itself is not a simple task, of course.

Overall, the RAYA project shows the processes behind designing portals and how WayRay approaches design. We wanted a unique portal, made from the ground up, with a specific focus in mind that is user-friendly and does everything it needs. Of course, we have challenges to address, like any design project, but we are better equipped to overcome them by controlling this process than by relying on someone else.

Tips for designers

• Before working on a large task, the most important thing is analysis: identify the main goal and use cases, clearly separate what is necessary and useful, and what you can do without.
• Healthy perfectionism: do not try to cover everything at once, but prioritize and work in stages. It is better to make an MVP version and work on its development than to try to do everything at once and perfectly.
• Understand there is no final result, which you finish and forget about. A web product, and even more so a portal, is a living and dynamic entity that requires constant work, attention, collecting feedback, backlog, and improvements.

Also, special thanks for the core product RAYA’s team:

• Veronika Udodova — Chief Design Officer, who supports us during research, mood boards creation and leaves feedback on the visual content of the portal.
• Sasha Yaguza — Web Designer, helped us design the WayRay Code sections (Employee handbook) and Onboarding (adaptation process allowing new employees to learn about our company, technology, and team during the first week and get into the specifics of WayRay work).
• Evgeniia Proshina — Project Manager of the RAYA portal; she is also a content maker, web analyst, and strategist of this product.
• Grapheme — web development agency, released the interface part of the portal.
• Evgenii Iulin — Front-end Developer, who is currently finalizing and improving the portal interface.
• Emin Babaev —QA Specialist checks the portal work and catches bugs that might be missed during the development.