Laze Apostolski

DevelopMe+

Learning Management app

Project Overview

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. There is team and manager functionality to assist managers in supporting their team and to set learning paths and targets.

My Contributions

I was the only designer on the project so everything you see I created myself. I was in direct dialy basis communication with the rest of my team and was involved in everything from user research, defining the flow and personas, creating prototypes and wireframes, all the way to creating final UI designs and working on HTML/CSS in development phase.

Role

Lead Designer

Timeline

September 2020 - December 2021

Tools
  • Adobe XD
  • Figma
  • VueJS
Team
  • 1 Product Owner
  • 1 Product Manager
  • 7 Developers
  • 2 QA Engeneers

The Discovery

Problem statement

Problem statements help us understand constraints. We want to know what's keeping users from getting their needs met.

Problem statements help us understand constraints. We want to know what's keeping users from getting their needs met.
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.

The Old app

Solution

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.

Ideation

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.

The Discovery

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.