Learning Management app
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.
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.
September 2020 - December 2021
- Adobe XD
- 1 Product Owner
- 1 Product Manager
- 7 Developers
- 2 QA Engeneers
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
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
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.
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
With all of our data collected from the research and analyzing
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.
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.
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.
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.
- 5 out of the 5 testers would almost certainly pay for supplementary training that could be undertaken in preparation of an in-person course.
- 3 out of the 5 testers said that they would take an online course instead of an in person course if it were available.
- 2 out of the 5 testers said that they prefer consultation with line manager before start some online training.
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.
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.
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.