Mijn RadarVertige
Overview
Challenge
RadarVertige is an organization for training courses, learning trajectories, and interventions. For more than 30 years they’ve been sharing their knowledge and expertise in the social domain. They do this together with freelance experts; trainers and actors.
For these freelancers, RadarVertige has developed a website portal where they can do specific administrative tasks:
Check their planning overview, indicate their availability, send invoices, edit personal information, etc.
Even though their feedback showed us that it’s a step in the right direction, it also shows there are still a lot of usability issues. Now it’s my challenge to take the old design to a new level. By conducting user- and stakeholder research, I can find this portal's actual needs and potential. This will be the foundation for the redesign.
Tools
Adobe XD, Adobe Illustrator, Miro, Zoom, Teams, UserZoom GO, Maze
Role
UX/UI Design
(research, interaction design, user testing, visual design)
Team
Self-directed, with feedback from the stakeholders
Goals
Research the usability, expectations, and goals for the users and stakeholders on mijn.radarvertige.nl
Redesign the portal based on research results while giving priority to the most important features
Research
Research Plan
To create a good user experience it is highly necessary to conduct good user research. Since the first design of this portal is mainly based on assumptions by the stakeholders we would like to discover if these assumptions are valid or not. Also, I‘d like to discover more about the user and their context of working. The best research methods are interviews and usability tests in this case. Later, I will do some usability- and guerrilla testing as well.
Finally, I will conduct research within RadarVertige using a survey since this portal also has a lot of benefits for the stakeholders.
Research goals
Define the beneficial opportunities for RadarVertige with mijn.radarvertige.nl
Define the beneficial opportunities for the user with mijn.radarvertige.nl
Define what works fine and what could be improved according to the user using the first design of mijn.radarvertige.nl
Research methods
User Interviews (users)
Guerrilla Testing (users)
Usability Testing (users)
Surveys (stakeholders)
Assumptions
Users think it’s convenient to send invoices via the portal
Users think it’s convenient to indicate their availability via the portal
Users think it’s convenient to download their own planning overview via the portal
Users think it’s convenient to edit their own personal information via the portal
Results
The gathered data from the interviews and the usability tests have been analyzed using an ‘Affinity Diagram’. This method helps to find patterns and categories that lead to useful insights. As a result, the following could be said about the stated assumptions:
Users think it’s convenient to send invoices via the portal:
4/5 agree with this statement, but also say that there is a lot of room for improvement.Users think it’s convenient to indicate their availability via the portal:
5/5 users agree with this statement.Users think it’s convenient to download their own planning overview via the portal:
0/5 users agree with this statement. They would like to see their planning instantly without downloading it first!Users think it’s convenient to edit their own personal information via the portal
5/5 users agree with this statement.
Stakeholder
The surveys gave me insight into how we can make this portal more beneficial for RadarVertige. The answers came from stakeholders with each having a different role within the organization. Subsequently, we used these insights immediately to create the ‘Product Feature Map’ you can find in the next chapter.
User Persona
Representation of a key user
Scope
Brainstorming session
Based on the acquired insights, I planned a brainstorming session. The goal of this session is to find possible solutions that would help the user. Next, these solutions were then firstly validated with the stakeholders and after that, we were ready to create a product feature map: An effective method to prioritize design mandates.
Product Feature Map
To get a clear view of what design mandates are the most important to implement I’ve used a product feature map. I score the importance and the feasibility/viability of a solution using this diagram below. The result is a clear priority overview of the design mandates:
Must have
B. A new (planning) overview that contains all the necessary information per training
G. Giving the freelancer access to all the evaluation results of their training
N. Sending monthly reminders to the freelancers for availability, invoices, and planning
A. Implementing an ‘Add to Calendar’ button (iCal, Outlook, Google)
Good to have
M. Implementing a loading screen
J. Make the entire website more intuitive, design better visual feedback for performed actions, and make the UI more modern
E. Add a ‘Newsletter’ column to the dashboard
L. Shorten the loading time of the entire website
P. Preview the planning overview and invoices instead of downloading them first
C. Remove unnecessary information and typing errors from invoices
For later
K. Adding a ‘Help’ screen with instructions
I. Adding an online attendance list tool
F. Adding an evaluation tool to feedback on fellow trainers and actors
O. Make training material available online for the trainer and actor
H. Create a database with standard corporate identity materials trainers and actors could download
D. Download and process invoices sooner than the planning allows trainers and actors to do it now
Design
Sketches
Now that the scope is clear, it is time to lift the previous design to the next level!
Guerilla testing
During the sketching phase, I created multiple versions of the same page. Subsequently, I tested these sketches out with randomly selected people. I asked them for their opinion and their preferences for each page. The results are implemented in the lo-fi design.
Low-fidelity wireframes
Usability testing
Once the lo-fi design was ready I created a prototype version. Next, the prototype and the software 'UserZoom Go' were used to do some usability testing. I created tasks for the user. After each task, the user could provide us with feedback. This tool clearly shows me what tasks the user struggled with. Finally, the results were analyzed, I iterated the design and created the hi-fi design.
High-fidelity design
Current versus new design
Login page
We made the login page a bit more simplistic to guide the user’s eye to the input fields faster.
Previous design
New design
Homepage
The previous home page had nothing but a download button for a manual ‘how to use this portal’. The new design makes sure that everything is intuitive and that the user won’t need a manual in order to use the portal. We’re showing the most actual planning information for quick access, an assigned place for the newsletters and updates, and a small dashboard for the evaluation results of their training sessions.
Previous design
New design
Availability
This is the page where the freelancer can communicate their availability over a period to RadarVertige. According to the user, they have to click every day of the month if they want to set themselves to available for a whole month - which happens often. We changed this in the new design. The freelancer has the option to set itself to ‘available’ for that whole month, or delete all available dates in that month. Also, we added a legend to show the user what the different colors mean. Lastly, the page saves automatically instead of manually and gives the user visual feedback that it does so.
Previous design
New design
Planning
On this page, the user can see exactly when they are booked for a training session. However, in the previous design, they had to select a year and a month to finally download a PDF file in order to see their planning schedule. To do this for each month and each time something changes is very impractical. The new design makes sure the user has all the necessary information on one screen. Also, they have the possibility to subscribe to this planning schedule and synchronize it with their own agenda.
Previous design
New design
Invoicing
The user can send their invoices via this page and has an overview of the previously sent invoices. In the previous design, it was not so easy to open an invoice since you couldn’t click on the whole card. The user had to click the little icon in the top left of the card to open it. Also, the terminology was a bit too “financial” for them. We changed this by naming the categories in a more accessible way.
Previous design
New design
Evaluation results
This page had no content on it yet. However, according to the stakeholders, they will show the evaluation results from each training session to the user after it has been completed. This page shows those results and has the same lay-out as the planning tab to make it familiar and easy to use for the user.
Previous design
New design
Personal and business details
This final page was not using the space optimally. The user had to scroll to see all the information, some fields were named wrong, and also this had to be saved manually. The new design fixed these problems and shows all the information neatly on one screen.
Previous design
New design
Conclusion
Final thoughts
In this redesign I implemented the most important design mandates based on research. The next step is development.
However, there are still a lot of other design mandates that are important to the user but we didn’t implement in this phase. It would be a wise decision to take this into consideration for a next redesign. Also, it would be good to keep testing and iterating the new designs. New solutions should be further tested to see if more depth could be added. Iteration and testing brings the user experience design to the next level!
Lessons learned
This was a big and fun project to work on. I have put a lot of hours and energy into it and can’t wait to work on the iterations. Also, I have learned a lot from this project. I have been focussing on my work process and sometimes had to take a step back to get a good overview. This showed me that I could work more efficiently and effectively in a lot of areas. I adapted these reflections immediately and noticed improvement right away. Reflecting on your own work is something I believe every designer should do to keep pushing themselves to create the very best experience.
Would you like to know more about how UX can help your business?
Let’s talk!