Yeltic Editor

PROJECT:

Yeltic Learn Redesign

ROLE:

Product designer

DURATION:

8 weeks

SLIDE DECK

Some of the final screens

Project overview

Yeltic Editor is an educational desktop app for creating trainings, that can be visualized in the accompanying mobile app, quick and easily. Yeltic Editor strives to deliver a simple experience while creating powerful trainings to develop both soft and hard skills using both immersive and conventional technologies. The app will have a set of templates, each one with specific features for the user to explore.

Problem to solve

The visual look needs a complete and intensive redesign. Pilot users don’t understand the flow and the software doesn’t comply with accessibility standards. Information architecture was not define and it doesn't take advantage of a desktop-sized screen.

Goal

Make a redesign that solves all of the existing problems while focusing on adding important, yet missing features and functionality. The highest priority being the reworking of the visual style to align with the design philosophy of the mobile app. The final goal is to make the architecture of the app a lot more logical and the flow a lot simpler.

Background

In the following screenshots you will be able to see what the old design looked like and why it needed a change. There are a lot of points to highlight, with the most important pain points being the lack information architecture. Elements feel floaty and disconnected from everything.

Pilot users commented on how everything is very weird or hard to do, especially when they're used to more conventional tools from their day-to-day life, like PowerPoint, Slides, or Canva. This was the main reason to not only look at direct competitors to see how they make their apps, but also general apps like the ones just mentioned.

Finally, another big problem I needed to attack was the visual style. It needed to align with the mobile app and feel clean and inviting to use.

Analysis of the old design

After having a general look on the old design, I needed a deeper dived into the app to actually recognize all the problems that it had and try to solve at least 40% of them for the first deliverable (2 weeks after start) and 80% for the first MVP (8 weeks from start).

Below, you will be able to find a table with the 5 categories that were evaluated and can have a better idea of the magnitude of the situation. Out of 186 criteria points, 177 needed some form of fixing or reworking.

At this point, it wasn't about fixing the old design, it was about a starting from scratch and defining new rules and set of guidelines to ensure a proper build.

You can have a link to the full analysis here.

Main pain points

The app didn’t comply with neither AAA nor AA accessibility guidelines. The whole app lacked many design principles to make it more readable or accessible, like contrast, negative space, hierarchy, accentuation, and more.

The product as it was lacking in distinctive features, and it was less capable than many established products with the only difference of applying AR into trainings. This meant that it couldn't perform many basic tasks and as such many users would not adopt the product.

The app didn't feel like a proper desktop product, there was no use of horizontal space, many components felt way too big, and the design felt more mobile than desktop.

The final pain point is visual design. It has way too many problems from a UI standpoint. The app does not feel clean or visually appealing. A product that looks good and functions well will be perceived more favorably by the users.

Meet the users

Handmade wireframes

Taking the time to come up with as many early concepts as possible was key to bridge the gap between the competitor’s analysis and my own ideas.

Given that the app creates trainings for mobile apps, the canvas resembles the aspect ratio of a phone.This allowed me to take advantage of all the horizontal space, have a design philosophy of multiple panels, and setting up spaces for specific actions.

These next points are the main things that I learnt about the direction I wanted to take for my design.

The use of horizontal space being a top priority that could grant a lot of missing functionality, as well as making it easier for the user to locate certain features quickly.

I wanted to add more essential information for the displayed trainings, instead of having only the creator's and training name, I also wanted to add the state of the training and secondary actions.

For the general canvas, I wanted to illustrate the different slides, but I didn't want to waste as much real state as the old design, so I tried to explore solutions using text and icons.

Another thing that I learnt in this discovery phase was the idea of adding panelson the same screen space, instead of hiding them in tabs, this thanks to the vertical aspect ratio of the canvas.

User flow

General architectural guidelines

For the redesign, some rules were established. These rules specified what set of information goes where. Taking advantage of all the horizontal space that we had, and also of the not very common vertical aspect ratio of the canvas, due to it being for mobile phone viewing, I decided to divide the app in 5 panels.

5 panels could achieve visual harmony due to how each of the panels work. Let me explain a bit better. Both panel 1 and panel 5 are fixed in their place, they are always there; but panel 2 and 4 are not always there, they only appear when necessary, this creates visual symmetry at most times

Below, I will explain the function behind each panel.

Panel 1 is defined as the general information panel. In this panel users will be able to find everything related to their training, like the description of the training, all their slides, and settings.

Panel number 2 is the first of the dynamic panels. Here, users will find specific settings to customize features like labels, 3D models, prompts, Q&A from gaming templates, and more.

Panel 3 is the canvas. In here users will be able to see the content they are creating for their employees in a way that is very similar to how it will be viewed in their phones.

Panel 4 is the space designated for notifications, tips, warnings and more. It's pretty much the space designated for the app to communicate with the user. The main reason for its location is that we didn't want to bloat the rest of the app with overlapping elements.

The final panel is the place designated for general settings for every template in the app. In the case of the default template it shows all the other options; for the 3D template it shows camera and model controllers, for games it show customization of rules, and more.

Digital wireframes

For the home screen I wanted to make use of the horizontal space. This is why I needed to have a fixed side panel to the left with options that are always reachable, no matter where you are.

Every training will need to have elements like state of training, creator, details, title, and thumbnail. Access to a search function was also necessary, so the user don’t just rely on scrolling for finding their content.

General structure

The canvas screen for the app has a very thought out structure.

Panel 1 is about project settings, like the name of the project, and the buttons for preview and publish.
Panel 2 is for general tools (like font, size, alignment…), components, and library access.
Panel 3 is all about the project’s content. This includes the thumbnail and description, all the slides you’re gonna create, and settings.

Unlike the rest of the sections, panel 4 is not always fixed in position, it only appears for specific settings of some features.

Panel 5 is the general canvas, in here users will see all of their content.

Panel 6 is for just notification. Just like panel 4, it only appears when it needs to, this creates a visual balance on the design.

Panel 7 is all about general settings for every slide or feature, like video, image, or audio editor.

These locations were set up this way to help keep the design simple and not overwhelming for the user.

Default template

For section number 1 I wanted to have the thumbnail, title and description visible. The main reason for this decisión is that training can become really long and we don’t want users to forget their main objective.

For section 2, I wanted to differ from the original design and some of the competitor’s design. Instead of using thumbnails for the different templates, I opted to used text indicating the title of each template and an icon which describes what kind of template it is (default, 3D, pairing, grouping…)

For section 3, I wanted to have quick and accessible CTA’s that would allow the user to both preview and publish their trainings. I took inspiration from competitors to determine the location

3D template

Panel 1 and Panel 2 are settings for special features. They can be divided in two depending on the context. As we had established before, panel 3 will have general settings for this screen template.

For the 3D template, it was important to showcase the switch to a 3D space, this is why the interface will feature a plane and 3D movement (rotation, panning, zoom).

Library

For the library screen, the architecture was set from the very early stages of the design process. The design keeps the idea of using horizontal space and it’s divided in independent panels.

On the far left we have a CTA to upload media and below that we have access to different categories of media. In the middle it’s gonna include all the media content, while displaying its name. Finally, on the right it’s the place for thumbnail and details on the content that the user selected.

Publish

For the Publish screen, as everything else on the app, it also follows the same 3 panel structure.

On the left we have the info that will be displayed on the app for the users to see. On the middle we’ll have the tools to schedule and categorize the training, and to the right we’ll have a small preview and two CTA’s.

Low fidelity prototype

Given the very tight deadline, a basic prototype was created to test elements of user flow and the general information architecture elements in the product.

Usability studies: Round 1 (2 weeks into project)

Two rounds of usability studies were conducted. The first one to test general flow and information architecture. The second one to further test the more specific flows for specific actions and the layout of many specific features. Thanks to those two studies I could discover valuable information that helped iterate the product into its final shape

Participants had trouble locating basic functions like delete and add, or were confused about controllers locations.

Participants didn’t see the point in the original visual guides vision and complain about the lack of functionality of the feature.

Participants voiced their concerns for the very similar and limited templated that the product offered.

Mockups

Home - Before redesign

In this case, we can see the original design having many problems with the outdated look being the main one, while having basically no functionality on the screen beyond selecting the course you wanna edit/create.

The second big problem is the lack of use of horizontal space. Yeltic Editor is a desktop app and the use of horizontal space is a big plus for functionality at all times.

Home - After redesign

For the redesign I went for a more minimalist and cleaner look. The screen takes full advantage of being a desktop app by having a fixed sidebar with quick actions, making use of right click to unveil more functionality, like duplicate, share, rename, status, etc.

The content is a lot more discrete in size, color, and iconography. This screens connects with the Yeltic Learn mobile app to further customize it from the side bar.

Default canvas - Before redesign

Let’s ignore for a moment the overlapping buttons, as that’s something that was bound to be fixed.

What we can see here is a screen that lacks functionality and that overcomplicated many simple steps like editing text. We can also see how floating buttons like the close button is always present which is really distracting and makes everything look messy.

The thumbnails on the left provide no value other than showing what screen you’re in at the moment. If the user wants to edit something you would need to do it on the right panel which can be confusing if the user just wants to change the font size, or color, or font.

Default canvas - After redesign

After the whole design process, you can see a full revamp on the look of this screen for the default template.

Like I showed before, I decided to follow a multiple panel approach for the design. On the left panel on top we have the general info for the project, so the user never loses track of the objective of their training.

We also can observe the top bar so you can change the language of the training as well as some info. Below it, you have your general tools. This tools represent what you’re going to be using 90% of the time.

On the right panel you can see all the different templates (besides the default one) that the user can choose from. Finally, when you click on the Components button it will display all the things that make up the template, so even if the user deletes something, they can easily recover it.

3D canvas - Before redesign

The 3D canvas and template was definitely one of the hardest features to redesign due to its complexity. Just looking at the old design we can see that it needs big changes.

I will dive deeper about the following when talking about iteration, but after the first usability studies, participants didn’t see a lot of use in the visual guides, claiming them to be not that functional, so a full overhaul on the feature was necessary.

The redesign was also going to focus on making it easier for the user to understand what they are doing and how it will look on the app.

3D canvas - After redesign

The redesign was a success, while it can look a bit overwhelming at the beginning, I decided to take advantage of the horizontal space and vertical aspect ratio of the canvas to insert a third panel.

The main reason as to why I didn’t put it behind a tab is because I wanted the app to feel faster and accessible for all users, and hiding important panels for the sake of cleanliness wasn’t the best option in this case.

I fully reworked the idea of visual guides and came up with a solution that worked for the company and the end user. The original concept of visual guides became a button called “Shapes” that you can use on any kind of template. And to add the functionality that users wanted we created “Labels”

With labels you can highlight any part of your 3D model, video or image and insert any type of multimedia asset with complementary text so the user can make their training a lot more interactive and complete.

Library - Before redesign

The library was one of the most important screens in the app, and it desperately needed some love. The first thing that needed to be done is to get rid of the icons in the thumbnail, since the value they provide is negligible.

The idea for the library was to make it more functional and useful at first glance, so folders, most used, categories, previews and more features were added.

And just like the rest of the app, the colors were changed to be compliant with the WCAG’s AAA contrast accessibility standard.

Library - After redesign

This was the end result. We continue with the philosophy of having mainly 3 rows of panels. On the left you can see some primary actions like uploading media or creating folders; as well as your organization categories and most used folders.

In the middle there’s navigation arrows, search field, location path and all the content. Every asset has two icons; the first one indicates whether it is preloaded content or user uploaded content. The second icon indicates the type of asset it is (3D model, image, video, GIF…).

On the third panel, we can see a preview of the asset with important information and a primary CTA to import whatever asset the user chooses into their project.

Publish - Before redesign

The final important screen is the publish function. With this you can quickly export your project into the mobile app for your users to consume.

The main idea with this redesign was to make it feel more part of the bigger ecosystem that is Yeltic Learn.

More functionality was added, a fresh consistent look was implemented and we integrated it to the app’s content in order to make the experience a lot more tailored to every client.

Publish - After redesign

As you can see, the visual look was updated so it’s consistent with the rest of the design. The new features include the ability to schedule the release of the training, releasing it for specific departments, having a simple preview and more.

As for the integration with the app, the user will be able to publish it in the specific carousel/category inside the app that they want. This way it will always be located where the creators wants it.

Key mockups for the app

High fidelity prototype

We went through two different HF prototypes, the first one was used in a second round of usability studies to test the flow of more specific functions and information architecture. The second one was for development, so they can see every microinteraction, or action that it needs to d

Link to Hi-Fi prototype.

Usability studies: Round 2 (6 weeks into project)

Some participants commented the lack of visual consistency of certain elements.

For the library section, participants wanted to have access to their most used folders and a better organization system.

Participants express their desire to have the “preview” function have more functionality.

Iteration

General -

A lot of changes happened for the general layout of the app. All of this thanks to feedback of usability studies and SUS.

Add/Delete buttons were move to the same sections of the slides so it’s easier to understand their function and what they relate with.

The language function was moved to the very top of the screen, since it is not as used and it affects the whole project, and not only the current slide.

A shapes button was added to take the place of the visual guides.

‘See previous screen’ feature was removed due to participants of usability studies saying they didn’t find it useful. It was replaced with physical undo/redo buttons

Profile access was removed due to it not being as used as expected.

Minor changes:

Active state of slides were change so their icon fills when active.

Visual style of ‘Hover to edit’ was changed to further aligned with the design language that was established.

3D canvas

The 3D template screen was one of the biggest changes for the app since the removal of visual guides and introduction of labels. The main changes were:

Add label functionality was added to the 3D elements section.

World controllers section was moved to the right panel to further align the idea of having movement controllers on the right panel.

Visual guides section was removed and changed for labels. Labels are now located below the 3D elements section to magnify their correlation.

Minor changes:

Size of headings was reduced to make it less intrusive for the user.

Down arrows were added to showcase scrolling in certain sections.

Library

Library screen changed a fair amount, some changes due to the ever evolving product and needs. For example, instead of accessing a cloud library, now every asset comes preloaded in your library. Some other changes were:

Rearchitecture the files categories so everything is a lot more organized. We have three different categories (favorites, preloaded and my content), and these categories contain subcategories (all, images, videos, 3d models…).

Access to the user’s most used folders was also added. This makes it easier for the user to quickly navigate to the content that they use the most.

Minor changes:

Back/forward buttons were added.

We remove the download button and replaced it for the category icon that it belongs to.

Preview

The preview functionality was the screen that receive a total rehaul. It went from being one of the most simple functions to one that gives users valuable visual information.

Instead of only being able to preview the current screen, users will be able to preview every screen using the different navigation tools that are provided.

It will also allow the training creators to try their creations before publishing.

The screen can provide extra quick action, like deleting a slide, duplicate it or move it to the place they wish to.

Finally, it went from being just a phone on the screen to having a proper interface that people can interact with.

Publish

Publish screen was probably the feature that received the least changes. From the very start it did most of what the company wanted it to do, but this doesn’t mean that it never changed. Some of the changes were.

Type of content was removed and changed for “release for a specific department”.

Technologies in used was reworked into “Location in app” to give the user a lot more control on where to place the content inside the app.

“Location in app” now shows every section and categories inside the app. Users can also create a new section using the add button

Minor changes:

Visual changes were made to further align the whole design.

Quick preview of every screen was added instead of just seeing the first slide.

Component library

Accessibility considerations

Throughout the redesign process, prioritizing accessibility remained a constant concern. Our objective was to incorporate the most feasible accessibility considerations within the constraints of the team's timeline and resources.

The whole interface was thought out to be readable by ensuring AAA ratios of contrast and sans serif typography.

The iconography makes use of standard icons and when necessary is accompanied by text labels so it is always clear what’s happening.

Hints and tips are provided when hovering on many elements so the user don’t need to outright what everything means.

Takeaways

Impact

Yeltic Editor is a product that can make creating trainings a safer and painless process. The product was designed to be as simple and quick to use as possible while equipping as much functionality for a first MVP.

For the first MVP it offers a pretty robust experience while maintaining a modular design, so the product can keep growing and acquiring functionality organically.

What I learnt

This was such a rollercoaster of emotions. I needed to have a functional concept in two weeks for a demo, which really taught me to trust my experience and to research as efficiently as possible. After those 2 weeks, I had the opportunity to revisit the first idea, do proper research, correct everything that needed correction, and building upon those first ideas into something that not only makes sense, but fulfills the needs of the users and the wants of the company.

Next steps

After these 8 crazy weeks I wanna take a lot more time to keep analyzing the current design and see what can be improve.

Keep adding all the missing functionality and features for the next iteration of the product, and update the mobile app design in case it needs it so it aligns closer and closer with the desktop app.

MovieGo app