The process started with a content audit to understand the current system and see what was outdated, redundant, and/or trivial. The content audit went three pages deep in navigational streams. The findings were documented and presented back to the client to have a common understanding of the problem space. Some of the key problems were bare pages, outdated and inconsistent information, repetition of content, and poor visual hierarchy. All of these issues affected their brand-trust and image, number of calls to customer care, site abandonment, and enrollment in their classes.
In tandem with the content audit, the team and I ran a day workshop engaging key employees from varying departments within the IIC. We fostered group work and a diversity of cross-department collaboration.
Key take aways from workshop:
1. Defined agreed-upon vision.
2. Identify possible personas and journeys as a launching pad for research.
3. Create a unified roadmap and KPI's including limitations of feasibility and technology.
4. Identify and prioritize content.
Strategic outcomes:
Metrics for success:
1. Increased sale of courses
2. Increased event attendance
3. Decreased calls to customer service
Vision Statement:
"To enable people employed in the financial services business to achieve their performance potential and maximize their intellectual development."
Research done after kickoff and workshops:
1. Stakeholder interviews - completed with 10 participants to understand executive goals for the website redesign.
2. User interviews - completed with 20 participants, gathering qualitative insights on emotions.
3. Open card sort - completed by 45 participants to understand users' mental models and how people think about information.
Research outcomes:
.png)
The Solution:
Before wireframes began, I performed a closed card sort with a total of 60 participants, testing in both French and English to make sure there were consistent mental models and that the translated titles we used were appropriate. The English success rate was above 80% but the Frech success rate was slightly lower due to some confusion around the language used around enrollment. Based on the findings, changes were made to the information architecture. This then informed the navigation in our next phase, wireframing.
Over 100 different wireframes were created that mostly covered the flows of course enrollment, events, grade checking, and account information updates. Templated page designs were emphasized to keep the information displayed consistently in design from chapter to chapter within the organization.
Sixty of these wireframes were strung together in a prototype and a remote, moderated, formative usability test was conducted. This was important to test our designs before investing time in the visual and UI design of the web pages and components. The wireframes had no visual distractions, so the results generated directly informed the success of our information hierarchy and navigation.
In the study, the following metrics were recorded: time on task, task completion rate, and overall satisfaction of performing the defined tasks in the protocol (this was measured with a System Usability Scale). The satisfaction rate for the low fidelity prototype was 87%, which is very strong considering no visual design elements were present. Knowing this number, we felt very confident entering the next stage of visual design. I worked with a visual and UI designer to come up with the final prototyped mockup.