Skyeng Home: Internal HR Portal For One Of The Largest IT-Companies In CIS

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>What is Skyeng</p></div><p class="h3-style">Skyeng is an international EdTech company, aimed at teaching English online. The company is headquartered in the USA, but they work all over the world: Spain, Italy, Germany, France, South Korea, and other countries.</p><div class="mb-80"></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Initial stage</p></div><p class="h4-style">Before we proceeded to design platform’s UX and UI we created an identity and a website for Skyeng’s HR brand. The website not only included information about the company, but the information to search through vacancies.</p><div class="mb-80"></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Project goal</p></div><p class="h4-style">The previous Skyeng home interface was difficult to navigate and spend a lot of time in. It was important for us to not only make good UX and clear flow, but also make it easy to comprehend copiuous amounts of information and make the whole thing nice to look at.</p><div class="mb-48"></div></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee779a6a75c956ef18c22_se-2.webp" loading="lazy" alt="" class="s_image_full mb-56">

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee77b53eb68e8bae22d57_se-3.webp" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Scalable UI kit</p></div><p class="h4-style">The UI kit needed to include a wide variaty of blocks. We went for atomic logic for this project so larger molecules and organisms could be built from that by the Skyeng team.</p><div class="mb-80"></div></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee77a710d8d02304328f6_se-4.webp" loading="lazy" alt="" class="s_image_full mb-56">

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee779d120de534e685a0c_se-5.webp" loading="lazy" alt="" class="s_image_full mb-56">

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee7794042903b3fad1867_se-6.webp" loading="lazy" alt="" class="s_image_full mb-56">

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee779eabdf6f28a2d6418_se-8.webp" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Key interface sections</p></div><p class="h4-style">We’ve made a broad variety of screens and flows, but we want to tell you about the main ones.</p><div class="mb-80"></div></div></div>

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">The dashboard was a key part to the project. It needed to display different types of informations and quick and easy shortcuts. We made the dashboard in a way that you can access all other crucial parts right away.</p></div></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee77b322acffd6d170f79_se-9.webp" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">User profile was onother important part of the platform. By looking at your profile you needed to quickly understand all of the important information that was realted to you and get access to crucial links.</p></div></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee77a710d8d680e4328f5_se-10.webp" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">It’s not only for the employees, but for the management. One of the important parts of management is managing money. It was extremely important to make the accounting section easy to navigate through and see all of the important information about different pernding and upcoming payments.</p></div></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee77a415a855f14fe8aac_se-11.webp" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Adapted for phones</p></div><p class="h4-style">Smartphone is not a key device in this project yet the platform needed to be accessible from any device.</p><div class="mb-80"></div></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee77a341fb50914a08365_se-12.webp" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Dark Theme</p></div><p class="h4-style">Having a dark mode is a must-have for any system that people spend a lot of time in. Employees have an option to set the theme they prefer. Dark mode option offers better visibility for users with low vision and those who are sensitive to bright light. Looks amazing too!</p><div class="mb-80"></div></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee77afddd92cd82575def_se-13.webp" loading="lazy" alt="" class="s_image_full mb-56">

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee77b60f0e538450b8d86_se-14.webp" loading="lazy" alt="" class="s_image_full mb-56">

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee77b60e2144fc250fcdc_se-15.webp" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Typography</p></div><p class="h4-style">The typography needed to be broad and adaptive, so we’ve prepared many text styles. Still, everything with a lovely, readable, friendly font.</p><div class="mb-80"></div></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee77b415a852591fe8aad_se-16.png" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Palette</p></div><p class="h4-style">The palette was mainly based on Skyeng brand colors but also needed to include a wide variety of additional colors since there were  many parts of interface requiring a different indication of states and statuses.</p><div class="mb-80"></div></div></div>

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee77af0ab075da5298c13_se-17.svg" loading="lazy" alt="" class="s_image_full mb-56">

<img src="https://assets.website-files.com/62e119d58c1c3abc0a13d8f9/631ee77bed58050431ca3f07_se-18.webp" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Testimonial</p></div><div><p class="quote">“The process is what impressed me the most. It’s very effective and design oriented. I had a task I needed to solve ASAP and Embacy did everything in their prover to help and do everything right”</p><div class="mt-24 mb-48"><p>Yana Gerasimovich, Head of Employee Service, Skyeng</p></div><a href="https://clutch.co/profile/embacy?page=2#review-1672487" class="link-l undrln-bl">Full Review</a></div>

</div></div><div class="p-lr pt-200"><div class="team-case"><div class="mb-4"><p><b>Producer:  </b>Leonid Bondarenko, Vadim Orlov</p></div><div class="mb-4"><p><b>Project Manager:  </b>Sofya Narbut</p></div><div class="mb-4"><p><b>Design: </b>Polina Villevald, Mikhail Krasovitskiy</p></div><div class="mb-4"><p><b>Illustration: </b>Lisa Ivanova</p></div><div class="mb-4"><p><b>Webflow development: </b>Artem Kuznetsov</p></div>