Case Study: The Dome

As the design lead, I was responsible for both strategic and creative aspects of the project, including user experience strategy, site architecture, interaction design, art direction, and visual design.

Close collaboration — I worked closely with each member of the team to define the product within the project's scope and constraints. A strong partnership and additional collaboration with the client facilitated progress.

User research and product definition — I conducted usability analysis, site traffic analysis, and usability testing which identified strengths and opportunities for improvement. I defined personas, scenarios, and requirements which helped communicate user needs and behaviors, as well as product qualities and constraints.

Strategy and vision — I developed a complete content inventory for the intranet and performed card sorting exercises which informed a new site information architecture. I drafted and presented this new IA to the team and stakeholders, and tested and refined it through usability testing.

Design execution — I created annotated wireframes, UI kits, style guides, and detailed design concepts to visualize solutions, communicate ideas and gain consensus.

This project was both a redesign and a rebuild.

• Strategy, Research — Considerable time was devoted to strategy and research, which provided a better understanding of user behavior patterns and helped drive better decisions.
• Design — The design phase was collaborative and iterative, with ideas first represented by low-fidelity sketches and wireframes, then fleshed out into high-fidelity mockups. User feedback helped refine and validate concepts.
• Technology — The new Dome would be re-built on Drupal, the same CMS as the college’s public website. Sharing the same infrastructure allowed for better integration between the two systems and easier content authoring. Integration with third party systems and offering SSO for users was also a critical piece in the project plan.

The discovery phase began with thorough documentation and gaining intimate knowledge of the Dome's current state, including all of its content, functionality, and site structure. I researched other student portals to inform design decisions.

The Dome needed to be enticing, informational, and usable. Therefore, I also conducted an expert review of the intranet's current usability and site traffic and presented my findings to the team and the client. This helped identify strengths and opportunities for improvement, and underpinned strategy, planning and design decisions throughout the span of the project.

In addition, I outlined critical and secondary user tasks, segmented by audience type. This helped inform the creation of our personas as well as new site structure and user permissions.

Defining personas

We were unable to gather extensive research on students due to budget constraints. However, we were able to easily segment users into three provisional personas based on audience groups and available evidence — online students, on-campus students, and alumni.

The personas were greatly beneficial in understanding and communicating differentiations in user behavior and informational needs. They acted as a lens from which the team could view the intranet through, and greatly facilitated scenario and requirements development.

Extracting requirements from scenarios

As I created scenarios and translated them into requirements, I measured them against our personas and business goals. We used the requirements to identify and prioritize user needs alongside stakeholder expectations. They were also a critical resource as I moved into framework definition.

It was clear the Dome's existing information architecture needed improvement, and helping users find information quickly and easily was a critical goal. To achieve it, we needed to break down the Dome's current structural design and rebuild it, keeping in mind that content would be 'dynamic' — tailored to the needs of which segment of the audience was using the system. Alumni would not receive access to the same information as an online student, etc.

The project manager and I began by cataloging a content inventory of the current state of the Dome. We ourselves performed card sorting exercises to organize, structure, and label a new IA that would improve usability and findability of information for each persona type. We ended up with two site maps, one for online and on-campus students, and the other for alumni. This helped communicate hierarchy and content strategy to our stakeholders, and became the starting point for further refinement and validation. Ultimately, the system would determine, upon login, which content to display based on which type of user the person was.

After we formed our IA hypothesis, we tested it with Treejack, a third party tool. This tool allowed us to input our site hierarchy, set up tasks, recruit actual RMCAD students, and gain insight into how well student users would be able to find information.

We recruited seven participants for the usability test and asked them to answer a pre-test questionnaire as well as perform seven tasks. The tree-test findings helped us further improve the clarity of our new IA's labeling, such as renaming 'Directory' to 'Campus Directory'. It also helped us improve our content strategy by providing insight into opportunities for contextual cross-referencing, such as providing a link to 'Forms + Documents' on the 'Helpful Links + Articles' page.

The pre-test questionnaire also provided valuable insight, including the fact that almost all the students specified they used the Dome to access their student account. With this information we adjusted the student dashboard to include a highly visible link for it near the top of the page. This would allow for easy access to a frequent destination.

With my research and requirements in hand, I began defining the design framework with sketches and low-fidelity wireframes on the whiteboard. This allowed me to quickly refine my ideas for key pages and receive input from the team. This approach was particularly useful during collaboration on the dashboard design, which needed to be modular and allow for future drag-and-drop customization by the user (a feature outside this release’s scope). We needed to quickly get into alignment on both the direction for the visual solution and back-end functionality before investing a lot of time on detailed design mocks.

Annotated wireframes created in OmniGraffle were used to document key screens and evolve the interaction design. These wireframes went through several rounds of internal revisions and then external presentations until finalized.

When designing the navigation for The Dome, I wanted to take a 'Content First' approach in which navigation took a backseat role and allowed the content to shine. To help accomplish this, I designed the behavior of the top navigation bar to reveal itself when the user scrolled up. This allowed for a full canvas of content for the user, getting navigation out of the way, but still within easy reach if needed.

Mega menus were used for large device navigation and were designed to facilitate the quick location of information several levels deep. Upon hover, primary nav items revealed secondary level items in a slide out panel. Subtitles helped give clarity to select section labels, while imagery further illustrated the type of content found within that area. This design pattern was largely inspired by Amazon's mega menus and could be easily translated for mobile navigation.

Mobile navigation was designed to be as close to large device navigation functionality as possible. This was accomplished by using off-canvas menus that allowed users to dive in two levels deep. Twirl-down sub-menus, which were only used in the mobile nav, helped reduce visual complexity while still allowing access to deeper content.

Because the Dome was extending the look and feel of RMCAD.edu, the visual system didn't need to be defined from scratch. However, new components and design elements existed and were documented for developers through a UI kit and style guide. Together with annotated wires and detailed design mocks, these documents were utilized by the developers to execute the design.

With thoughtful consideration for each audience's needs, RMCAD's student intranet now gave both online students and on-campus attendees the resources and answers they needed using a single set of credentials. Alumni can stay connected with continued access and an experience tailored to their needs.

The redesigned Dome brought student resources, account access, and college updates into a responsive intranet, with tailored experiences for students and alumni. Student feedback informed clearer navigation labels, contextual links between related resources, and prominent access to student accounts.

The shared infrastructure between The Dome and RMCAD.edu also streamlined content publishing, making it easier for administrators to maintain and publish information across both sites.

Site traffic increased following the redesign, as reported by the client.