DevelopMe+ is a learning management system with core functionality of allowing users to access learning requirements and follow learning paths and for employers to provide mandated and suggested learning to users. The UI was 20-years-old and the UX role had been unfilled for years. As a Lead Designer I redesign the platform with new and modern UI and improved the UX by incorporating new flows and functionalities. The impact was a 2019-2021 SaaS growth of 133% and a 2020-2021 YoY revenue increase of 124%.

Position

Sr. UI/UX Designer

Year

2021

Team
  • 4 Developers
  • 1 PO
  • 2 QA Engeneers
  • 1 PM
My Contributions
  • Lead the redesign direction of the app.
  • Updated the user experience in key areas of the product.
  • Front-end Engineering (HTML, CSS, JS)
  • Accessibility and performance
  • Aided user research/interviews.
  • Created unique visuals for the app (illustrations, icons, etc.).
  • Shared various expertise with the team.
Client's feedback

"Lazo is one of the most professional people I've worked with so far - responsive, creative, punctual and with structured approach. He has fulfilled all the agreed assignments on time and he's work always brought added value. He's put extra effort to study the project and industry before starting with work and at the end we've received interactive designs with outputs in various formats. For developers it was simple to build on further from Lazo's designs."

Step 1

Problem statement

At a first place we faced a lot of user problems, finding it difficult to spot the problem, everything was really messed up, so the only and best solution was to start the process from beginning..

It's important for admins to access this service quickly and easily as currently, the communication between managers and users is extremely poor. For instance when checking to see if some course is relevant for a team member, managers have little or no information about that team member learning history.

Besides that, the UI was awful. There was a lot of inconsistency so I started the process with creating new and fresh style guide for the project, and I was upgrading it constantly.

Step 2

User Research

Me and PM conducted a series of interviews to better understand the problem this project was attepting to solve. My questions centered on understanding the user goals, the contents of use and what is their top priority focus.

Research Objectives

The intention of the interviews was to see how the users handle the old app on dialy basis.

  • Assess whether the terminology is understood by users and appropriate language is used
  • Determine whether the process flows in a logical way
  • Assess if users can effectively navigate through the process using the links and buttons
  • Assess whether the content adequately supports users
  • Analysis of how the design measures up against user goals, business goals, project intent, and system or technical constraints

Analyzing Data

With all of our data collected from the research and analyzing the feedback from the focused group, we created an affinity map of our findings. The affinity map helped us organize our thoughts and really find the most important problem

Defining the journey tree

After that we proceeded with defining a flowchart showing how the platform would be organized. The client had some features in mind so we made sure to discuss them and include them in the plan.

Step 3

Decide & Define

Once we knew what problem to solve, we focused on coming up with as many ideas to solve it. We went for quantity over quality and welcomed absurd ideas.

Firstly our focus was on home page/Dashboard. We were aiming to brought most important informations our users uses on daily and weekly basis, combine and compiled all into one place.

Step 4

Initial Wireframes & Prototypes

After we defined the flow and brought everything on table what our most important parts are we started working on wireframes.

I initially started drawing some low fidelity wireframes focusing on the flow we had already discussed in our workshops.

We built our prototype in Adobe XD and focused only on the screens required to explore the main issues raised so far. We also wanted to provide quantitative evidence to illustrate any measurable improvements to the experience of learners whilst using our solution and secure funding for the full project.

The Discovery

Usability testing

We tested the low-fi wireframes with couple of our loyal users. We guided them through the flow and gethered very useful feedback.

After this usability testing we created mid-fidelity wireframes, we added some more functionality and more visibility and clarity with the UI. And we condinued improving the the layout with Round 2 Usability tesing this phase.

The user testing took place with a group of new PWA customers that had just signed up for an in-person course. The insights gathered from this study were really positive but threw up a suprising observation for 2 out of the 5 test-subjects.

Final Phase

UI Process

I experimented with a multitude of different styles. I searched Dribbble and Behance for UI inspiration (with caution as to keep our accessibility intact). Finally, after a couple weeks of iterations, we landed on a style that we were comfortable with. We thought that this format could grow with Deal Room as we add more features and functionality. Here is the final design.

The Discovery

Responsive design

Along with the desktop version I was focused on providing perfect experience for the users that will use the app from their smartphones. According to our research, nearly 68% of the participiants in the interviews confirmed that they will use the app from their smartphones as well, so we had to be focused on the mobile version along with the desktop one. I was working on the screens very carefully and here is the final design.

Implementation

Along with the entire design process, I was also involved in the development phase. My duties were to set up semantic HTML structure at a first place and I was responsible to implement the design I previously did. Using semantic HTML and CSS/SASS code I made a perfect live app.