The Dome
In 2013, Rocky Mountain College of Art + Design sought to better serve its students, faculty, and alumni by giving its intranet, The Dome, a complete revamp. This is the story of how I re-designed The Dome and supported a ‘community of creatives’ through better access to information.
My Role
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 validated 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.
The Challenge
Create a world-class intranet
The purpose of The Dome was to provide RMCAD student’s, faculty, and alumni with useful information tailored to their specific needs. However, it had become disenchanting and cumbersome to use, causing students and alumni to instead turn to the college’s public site, not The Dome, for information. RMCAD needed an information hub that created a seamless, unified digital experience and delivered compelling interaction that would drive continuous use by students and alumni.
The Approach
A collaborative partnership
This project was both a re-design and a re-build. From the out-set, we involved the client and their input, treating the relationship as a partnership. Frequent sharing of ideas and regular check-ins helped build trust and ensured alignment of expectations throughout the project.
Strategy, Research
Considerable time was devoted to strategy and research, which provided a better understanding of user behavior patterns and helped drive better decisions throughout the span of the project.
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
Because the college’s public website was built on Drupal, the new Dome would be re-built on this CMS. Sharing the same infrastructure allowed for better integration between the two systems and easier content authoring. Integration with third party systems and moving towards SSO for users was also a critical piece in the project plan.
The Discovery
Conducting research and analysis
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.
Documentation of usability analysis report.
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.
Documentation of critical and secondary user tasks.
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 personas based on the distinct audiences that existed and used the Dome–online students, on-campus students, and alumni.
Looking back, these personas shouldn’t have incorporated features into them, but they were still extremely beneficial in understanding and communicating differentiations in user behavior and informational needs. They each provided a distinct lens from which the team could view the intranet through, making sure we kept on track. They also greatly facilitated scenario and requirements development.
User personas of The Dome.
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 ensure we defined all our users’ needs and that our product definition was on track with stakeholder expectations. They were also a critical resource as I moved into framework definition.
Documentation of requirements for each persona.
Solving site navigation issues
It was clear the Dome’s existing information architecture needed improvement, and helping users find information quickly and easily was a critical goal for this project. 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 persona 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 then performed card sorting exercises to organize, structure, and label a new IA that would improve usability and fundability of information for each of our personas. 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.
Site maps for students and alumni. Pages accessed only by specific personas are color coded.
The Framework
How we got there
Validating IA with Treejack
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 users would be able to find information.
We recruited 7 participants for the usability test and asked them to answer a pre-test questionnaire as well as perform 7 tasks. The results from this test 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.
One major insight we uncovered with the pre-test questionnaire was the fact that almost all the students specified they used the Dome to access their student account. With this information we adjusted the 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.
‘My Account’ CTA on student dashboard.
Developing ideas through whiteboard sketches
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 (deemed out of scope for this round). 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.
Whiteboard sketches and drawings.
Evolving the interaction design
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 presentations to the client until they were finalized.
Screenshot of omnigraffle wireframes. The student dashboard was built upon a 5 column modular grid.
Detailed Design
Defining the visual system
Designing the navigation system
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 in an accessible location 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.
Mobile navigation wireframes with annotations.
Detailed design of mobile navigation interface.
Communicating design
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.
UI kit and typography style guide with design specs.
The Dome
Finals designs
With thoughtful consideration for each audience’s needs, RMCAD’s student intranet gives both online students and on-campus attendees the resources and answers they need through one convenient log in. Alumni can stay connected with continued access and an experience tailored to their needs.
Dashboard
The dashboard was designed to balance clear aesthetics with simple usability to allow students easy access to important information– things like email, google calendar, class schedule, grades, etc. A card-like structure helped further emphasize organization and clarity, and was ideal for translating to a mobile experience. Because the dashboard acted as an entry point for online students, the Dome’s primary user, quick access to their online learning environment was important. Feeds from various apps, such as the RMCAD news feed, instagram and twitter, encouraged more interaction with the college’s social outlets.
Desktop Screens
Mobile Screens
The Outcome
Project Impact
Increased visitor duration
Increased site traffic
The usability, design, and technology improvements of this project allowed RMCAD to provide its students an intranet they could turn to for easy access to information and a seamless user experience tailored to their needs. It also streamlined the content publishing process for The Dome and RMCAD.edu. By having both sites share the same database, admins could more easily and quickly get content approved and published, further supporting the RMCAD community with the info they need.