Maryland Instructor Certification Review Board
Website design for a statewide organization managed by Maryland Fire and Rescue Institute.
Overview.
Context
As the tech-age continues, companies and organizations are increasingly finding themselves having to “catch up” to the current trends and expectations of modern interfaces. Some platforms lack cohesion to user experiences and behaviors of today, therefore reaching out to experienced designers in order to implement a modern interface while maintaining their target users and organizational purpose. design for a statewide organization that Maryland Fire and Rescue Institute manages: the Maryland Instructor Certification Review Board (MICRB).
Timeline
January - May 2022 (16 weeks)
Roles
Victoria Ha - UI/UX Designer & Researcher, Project Manager
Matthew Schwartz - Outreach Coordinator
Stephen Dziwura - Video Recorder
Reines Maliksi - Value Leader
Oluwatobiloba Odebo - Tech Support
Jia Li - Tech Support
Tools
Figma, Miro, Trello
The Problem.
“The MICRB site is information thrown onto a domain, it is unreadable and currently not user friendly”
The MICRB is a website primarily used by instructors and sponsors of Fire and Rescue Institutions of Maryland. It holds information such as applications for instructors to certify or recertify, specific certification standards instructors must follow, and scheduled meetings for the board to meet. However, it’s latest design predates 2010, and therefore it’s interface is both difficult to navigate information quickly and visually unappealing. Furthermore, all the information on the MICRB site is critical for it’s users, so it was of our utmost importance to emphasize a more efficient and seamless user experience.
Solution Breakdown.
Enhance Partnerships & Branding
Expanding upon MFRI’s affiliation with UMD through UMD resources as well as imagery, color, and typography.
Improve Readability
Increase User Interactivity
Making users more enthusiastic about using the site and increasing retention by providing two flows of navigation: through the navigation bar or a traditional scroll.
Distinguishing a clear vertical information hierarchy, so that users will be able to consume information faster and easier.
Team Values.
Forming A Schedule.
Alongside emphasizing an equal understanding of one another, we shared schedules in order to create a schedule that would be consistent throughout the course of the project to decrease the risks of external obligations interfering with the success of our work.
To do this effectively, we created a work breakdown structure (WBS) excel sheet which includes the deliverables expected as artifacts, the corresponding date in which each artifact was due, and any dependencies the artifact had that may interrupt the assigned deadline. The WBS was an extremely helpful tool throughout our project as it was a guideline of managing our time and reminded us of our next steps.
Our Approach.
04. Evaluate
02. Research
01. Define
03. Design
Understanding Problem Space
Defining Project Goals
Defining Team Values
Forming a Schedule
Stakeholder Interviews
User interviews
SWOT Analysis
Initial Concept Sketches
Wireframes
Lo-Fi Prototype
User Testing
Hi-Fi Prototype
Expert Evaluation
Research.
Stakeholder Interview
We divided our interview questions into 4 main categories to conduct a refined discovery of their expectations of the redesign, the common behaviors of their users, and background context of the organization as a whole.
Organizational
Technical
Clarifying Non-Technical
- What are the values of your organization?
- What beliefs drive the everyday work environment of the organization?
- Are there certain directives/messages that your organization wants to broadcast to your users?
- What specific tasks do you want the new site to be able to accomplish that the current site does not?
- What specific features would you like to see on the website?
- What is the overarching mission of this new site? What is its purpose?
- Is there currently a site where you have seen something similar to what you are looking for?
Communication
- How often are you looking to be updated on this project?
- Are there any previous employees/developers we need to contact?
By doing so, we were able to determine potential client pain points, build a sense of reliability and accountability between the team and client, and furthermore generate a requirements document that summarized our findings from our requirements interview and acted as a basis for our project plan.
User Interviews
To understand the needs of the instructors that would be utilizing this site, we asked our users qualitative questions regarding the visual appearance, common tasks and actions on the current site, and if they could visualize the sponsorship of MFRI through the MICRB site.
What they saw.
What we heard.
“Visually, it’s a LOT! The text is huge, I feel like everything could be smaller.”
“There's no order or hierarchy of information, so I usually use the drop down bars to find the forms I need.”
“I wish I could spend less than 5 minutes on the site when I visit, but it often turns out to be 10-15.”
“There is definitely a red theme going on, but didn’t know that it resembled MFRI.”
SWOT Analysis
In order to encapsulate our findings and transform them into actionable results, we produced a SWOT analysis to identify the strengths, weaknesses, opportunities, and threats relative to our design decisions.
- Clear mission statement: To plan, research, develop, and deliver quality programs to prepare agencies and individuals to protect life, property and the environment.
- Provides up-to-date information
- Emphasizing community inclusivity through seminars
Strengths
- Lack of information provided to students and surrounding area, not many students and citizens in the College Park area know about MFRI or MICRB and the ways both entities help the community
- Too many resources under different tabs such as Students and Training programs
- Font size is quite big
- Use of color may be difficult to navigate
Weaknesses
Opportunities
- Provide more text and resources
- Format page in order to include multiple sections with various information
- Expand MFRI relationship with other State Law and Enforcement entities
- Some target audience may not have access to smartphones/computer in order to navigate the benefits of MFRI
- Accessibility issues with typography, color, alignment and formatting
Threats
Design.
Concept Sketches
Taking into consideration our research, client needs, as well as the needs of our users we held 5 minute brainstorming sessions where we individually sketched some initial concepts for the redesign:
After reviewing each other's sketches, there was a clear agreement for a vertical information hierarchy in which the site would be navigated by a scrolling method, with the most relevant information at the top.
Wireframe to Lo-Fi Prototype
From our concept sketches to lo-fidelity, it was extremely difficult to contact our client for any feedback. So, we had to primarily rely on what we knew about our users to guide the creation of our wireframe and lo-fi prototype.
We translated the vertical hierarchy from our concept sketches.
Wanted to use 'nodes' or 'buttons' that signified an instantaneous download of common forms and applications.
We also wanted to include image strips that highlighted UMD affiliation.
We adhered to UMD's official typography and color palette to highlight UMD affiliation.
We constructed a design for our application 'buttons'.
We divided drop down menus specifically for instructors and sponsors so that resources are differentiated clearlyfor each user.
Opted for a sliding resource gallery for user interactivity and organization.
Usability Testing
With our lo-fi, we conducted usability testing with 6 current instructors based on 2 high-functioning priorities we defined during our user interviews that highlighted the 3 solutions we wanted to provide: improving readability, enhance Partnerships & Branding, and improving user experience.
Task 02
Download Instructor Certification / Recertification Application.
Task 01
Use navigation bar to locate upcoming speakers in the Events Schedule.
From our user testing we found that all users were able to conduct Task 02 with ease and were able to locate and download the applications efficiently at a much faster rate than what was stated during our initial user interviews. However, over 50% of our users struggled with Task 01 due to the terminology of 'important dates' and 'meeting information' in the drop down menus. Alerted by the high volume of user difficulty with Task 01, we simplified 'Important Dates' to 'Schedule' in the final prototype.
What we found.
The Final Screens.
Hi-Fi Prototype
Reflections & Takeaways.
What I’ve learned and would do differently
-
Be adaptable. The most important lesson I learned from this project was navigating a relationship and communicating with the client. Our team unfortunately was not able to communicate with our client as much as we had hoped to, due to workload conflicts on the client’s end. Therefore, we faced roadblocks of guiding ourselves throughout the project and proceeding through deliverables solely based on our own judgment. What I learned from this experience specifically, and furthermore what I wish our team had done differently, is get a 2nd, 3rd or 4th way of contact.
-
Be a voice for others. A sticky situation, calls for an uncomfortable but necessary response. It was my first time in a team setting where the internal dynamic was off, as there was a problem where the team had to come together to evaluate a “power imbalance” that was occurring. As group leader I held 1-on-1 sessions with each member to discuss how that was impacting our work, our comfort in the space we had created, and what we could do to ensure an equal platform for all members. We were able to resolve the problem quickly and all work thereafter was much more enjoyable and successful.