Project Background
Curriculum page is a crucial component of the Ross Learning System. It is a detailed front end presentation of the unique Ross Spiral Curriculum for faculty at Ross School to reference curriculum content, education standards and useful resources and documents. The nature of Ross Learning System as a combination of SIS and LMS made curriculum pages the fundamental core that connects all other components together.
I inherited this project from my predecessor with an existing design that had gone through the production process already. The existing version was not very well received due to it's poor UX design. In order to accommodate certain UI demands from a key stakeholder, a lot of user experience were sacrificed, making the site hard to navigate and the information in it difficult to access. My job was to rethink the entire UX experience and fix problems, with certain constraints on UI style. My role in this project is the UX designer, working with another UI designer and other stakeholders. Design has recently been approved and handed off to developer.
I inherited this project from my predecessor with an existing design that had gone through the production process already. The existing version was not very well received due to it's poor UX design. In order to accommodate certain UI demands from a key stakeholder, a lot of user experience were sacrificed, making the site hard to navigate and the information in it difficult to access. My job was to rethink the entire UX experience and fix problems, with certain constraints on UI style. My role in this project is the UX designer, working with another UI designer and other stakeholders. Design has recently been approved and handed off to developer.
Design Process
User Research
Key Questions
How long does it take for the users to find the information they need? |
Can the users clearly explain the structure of the Curriculum? |
Where are the traffic directed to most in the system? |
MethodologySince it is a redesign of an exiting product, I started this project with usability testing on the existing version to identify apparent UX problems. Ross School faculty were invited to participate in the tests. Testers were asked to find specific curriculum information from the pages, and the results were timed. Observations were conduct on users' thinking aloud when performing these tasks, and records were made. Longitudinal studies were also conducted on 2 groups to see if users can overcome the obstacles caused by UX design naturally over time. Separate interviews were conducted on the same group of users after a few testing sessions on the product, asking them to verbally describe or the structure of the curriculum as they understood it. When the team discovered that users were having difficulty explaining the structure, card sorting was conducted on testers to explore the cause of such difficulty.
|
User Testing Session
|
Key Findings
Too Many ClicksThe hidden layers in current design forced users to go through unnecessary clicks to retrieve desired information. |
Fragmented FlowSequence of components did not consider daily workflow, forcing users to jump back and forth between components. |
Forced CategoriesCategorization of components under tabs lacks unified logic, making it hard for users to form a schema of curriculum. |
Mixed PrioritiesExisting design attempted to address 2 audiences (faculty & outside reviewers) at the same time, but failed to excel in either. |
Implications
User testing results confirmed the complaints from school faculty that previous design of Curriculum pages caused frustrations on their part when performing routine tasks. Even though accumulated experiences in the pages ease such frustration, observations showed that the existing design is still causing a longer time and extensive amount of clicks than necessary for the uncomplicated tasks performed by faculty. Users' attempts to explain the structure during the interviews also indicated that current design caused confusions to form a correct mental model of such structure. All results above justified a redesign of the pages.
A few curriculum experts outside of Ross School had also conducted reviews on the curriculum through the exiting design after its launch. Their feedback on the platform was that even though they can see the design was attempting to help outsiders understand each component better by displaying definitions of the terms all over the place, such repetition was neither meaningful nor helpful. Such repetitive display of definition were even less helpful for faculty who work with these terms everyday. Such waste of valuable real-estate on the page is a crime in the opinion of design team.
None the less, user research confirmed our suspicion and helped identify critical problems.
A few curriculum experts outside of Ross School had also conducted reviews on the curriculum through the exiting design after its launch. Their feedback on the platform was that even though they can see the design was attempting to help outsiders understand each component better by displaying definitions of the terms all over the place, such repetition was neither meaningful nor helpful. Such repetitive display of definition were even less helpful for faculty who work with these terms everyday. Such waste of valuable real-estate on the page is a crime in the opinion of design team.
None the less, user research confirmed our suspicion and helped identify critical problems.
Challenges
Confusing NavigationUsers reported that the navigation and layout of pages were confusing and users were constantly uncertain of which level they were on when browsing. |
Buried InformationCurriculum content were buried too deep that users need too many clicks before accessing the info they need. Navigating between the two buried components was also a problem. |
Scarce Colors ChoicesColors are assigned to curriculum elements as visual indicator that few choices were left for general usage. Key stakeholder also demanded black background as anchor of UI. |
#1 Confusing NavigationThere are several problem with navigation in existing solution.
The curriculum has a three-layer (Course-Unit-Module) structure. On the course page, the nav bar contains several categories that are not supposed to be parallel to each other. Unit level and Module level nav bar remains visually similar to the one for the course page, with only minor differences that were hard to be noticed by users. Users found it hard to figure out which level he/she was currently on. (See images on the right for more details) Content were hard to find, as they are often embedded under a less intuitive tab. In other times, users found the naming of certain components confusing, such as the existence of "resources", "essential resources" and "additional recourses" at the same time, each under a different tab. |
Course Level Nav
Unit Level Nav
Module Level Nav
|
Course Page Existing Design is Scarce in Details
|
#2 Buried InformationIn order for the existing version to meet the UI requirement of the key stakeholder, a lot of UX were sacrificed. One example is the burial of details underneath the surface. Aside from overviews of each curriculum level, all other text-based information are hidden in overlays and are accessible only ofter clicks. This design philosophy made reading extremely difficult for everyday users. In addition to the inconvenience of extra clicks, the users could not compare two separate sections side by side, and had to jump in and out constantly. Lastly, there is a lack of indication on the front for what's actually buried underneath. One could click on Enduring Understandings and find Essential Question there as well, right next to the EUs; one could click the Learning Experiences and see parallel components - Assessments and Integrated Projects are both there in the same interface in separate tabs. This lack of predictable and convenient access to the information made users frustrated and less motivated in using the platform.
|
#3 Scarce Colors ChoicesAt Ross School, a unique color is used to represent each domain - Red is always Media Studies and Dark Green is always Cultural History. This visual language had become an instinct to any one who's been at Ross longer than a year. While this color coding is beneficial and boosts efficiency in delivering certain information, it also limits the color choices we have on the webpage. With the 8 domains and their colors present, it is very hard to choose a color that does not cause confusions to users. During the phase where high fidelity wires were being made, our UI designer suggests some colors (see secondary color section on the right). As you can see, many colors look very close to the domain colors on top. In fact, most of the visual elements in our final design had to be black and different shades of grey.
The choice of color black, though, was more of a requirement than a voluntary choice. Heavily influenced by the image gallery websites, a key stakeholder demanded that the pages should have a black background to highlight the art and artifact images embedded in the curriculum, despite the fact that it would make reading harder for certain users. |
Stylesheet Domain Colors vs. Primary/Secondary Colors
|
Redesign Process
Understanding the StructureThe structure of the curriculum was constantly changing during the time of development for the previous version. Quite a few fields had been added to the curriculum in order to "guide the completion of the curriculum", but there had been really no data to display and always showed "No Content" in the existing version. In order to fully understand the real structure, we dived into the database to see what we were dealing with. The team constructed a map to organize the components and relationship between them. Fortunately, the team had experience in the curriculum editor component earlier, and had to deal with the same curriculum structure. Such experience helped us a lot in this redesign project. Details of that project can be viewed here. Linked on the left is not part of my portfolio. My colleague Charlotte Li was the main designer who worked on the project. I was merely an advisor and constructive critic, and all credits goes to her.
|
Curriculum Structure Relationship Mapping
  Curriculum Curriculum Roll Up/Down Visual Illustration
|
Wireframes
Low fidelity wireframes were first created as an attempt to solve the problems identified from user research. Below are a few examples of design teams' effort to improve the UX on the site.
NAVIGATION BAR
A 2-layer nav bar was proposed for the curriculum pages new design. The first layer will function as tabs, so that a long page can be broken into several. The second layer serves as floating navigational "table of content" that scroll users to appropriate sections on the page upon clicking and remains omnipresent in the same position. Breadcrumbs were added to provide an additional sense of direction when browsing.
Existing Design Header & Navigation
|
New Design Header & 2-Layer Navigation
|
GRADE LEVEL CONTEXT
Text and images are displayed on the same screen to solve the "buried information" problem. Users can navigate between different information without leaving the page or triggering any overlays.
Existing Design Grade Level Info
(Hidden in Lightbox)
|
New Design Grade Level Info
|
CURRICULUM ELEMETNS
Smaller fonts are used on list items to save real-estate. The lists are no longer hidden inside overlays so that users can quickly reference back and forth through scrolling. Components frequently referenced together are put in closer proximities.
Existing Design Curriculum Components
|
New Design Curriculum Components
|
ACCESSING UNITS AND MODULES FROM COURSE PAGE
Units live in its own tab and are quickly accessible through the first layer nav bar. This provides to user a method of going directly to units when entering a course. Previously they need to scroll down for 10 seconds before accessing units.
Cards and Drawers are used to make detailed unit info, including a list of modules of the unit, accessible on the course level without entering a specific unit. Switching between units are made easy through such quick looks as well.
Cards and Drawers are used to make detailed unit info, including a list of modules of the unit, accessible on the course level without entering a specific unit. Switching between units are made easy through such quick looks as well.
Existing Design Unit Listing
|
New Design Unit Listing & Details
|
IDENTICAL UNIT & MODULE PAGE
The once identical unit and module pages are now made easy to differentiate. Unique visual elements were added to module pages in the new design. Please mouse over the module pages below to see highlights.
Existing Design Unit Page
|
Existing Design Module Page (Mouseover Image for Details)
|
|
New Design Unit Page
|
New Design Module Page (Mouseover Image for Details)
|
Testing Round 1
Low-fidelity wireframes were linked together in InVision to conduct user testing. Moderated user testing were conducted on stakeholders to ensure that they were comfortable with the user testing platform and functionalities. Stakeholders were able to confirm that the major problems were solved through the redesign. However, they also expressed that without real data from the curriculum, they couldn't be 100% sure that the design would accommodate faculty's daily needs.
Hi-fidelity Wireframes & Prototypes
Working with the UI designer, the team created high fidelity wireframes with real data to push forward the user testing. Domain specific colors were used for decoration purposes, and white, grey and black were used as the main color of the rest of the elements on the pages.
Testing Round 2
A usability testing was conducted among faculty with high-fidelity prototype. While feedback were generally positive on the redesign effort, I realized that very few users were using the second level navigation menu to quick jump to the section of the page they are looking for. Instead, users were still scrolling down with mouse and trackpad.
The cause could possibaly be the lack of animation possibilities inside inVision. The design intent was that font boldness would shift dynamically as the user scrolls, but such effects were impossible to achieve in inVision. But, the result also showed that such design was not intuitive enough, as web pages scroll vertically, while the layout of the second level nav elements were horizontal.
The cause could possibaly be the lack of animation possibilities inside inVision. The design intent was that font boldness would shift dynamically as the user scrolls, but such effects were impossible to achieve in inVision. But, the result also showed that such design was not intuitive enough, as web pages scroll vertically, while the layout of the second level nav elements were horizontal.
Static Second Level Nav Bar Meant for In-page Navigation
Testing Round 3
To find out if my hypothesis was correct, I created a new prototype in Principle with micro-animations described above. I also created a different version without the second level nav, but instead a floating vertical table of content of the page. An A/B test was conducted on the user, and results showed that vertical table of content still received more attention and interaction, while animated nav bar witnessed an increase of interaction rate compared to previous prototype as well.
Horizontal Nav Bar Version
|
Vertical Table of Content Version
|
At the point, the design was facing a dilemma: a horizontal nav bar is more visually pleasing to the users, while vertical table of content promotes user experience during interaction. A preference test was conducted with stakeholders and faculty members, asking them about their preferences with 3 options:1) the less obvious interactive nav bar, 2) the less visually pleasing and floating table of content, or 3) no nav bar and table of content at all, leaving the users with scrolls only. Testing results indicated that 75% users preferred option 1, claiming that the nav bar is more visually pleasing, the animation is making its hidden functionality inviting enough, and users should be able to pick up the hint overtime. The team had a vote and eventually went with the horizontal nav bar.
Handoff
To DeveloperAnnotated hi-fi wires were delivered to developers along with the prototype when design work was wrapped up. A style guide was delivered along with the wireframes. A walkthrough meeting was held upon handoff. A few quick Q&A sessions were conducted afterwards. It is now pending development. Ideally, further testings would be conducted after the product launches, but development backlog made it not possible at the moment.
|
To UserNew design is currently waiting for developer. Further adjustments will be made to the design once the product is out and faculty start testing it. Will update this section once it's more feedback is collected and analyzed.
|
Reflection
Lessons Learned
Unlike most other components I worked on, this one is a complete redesign of the existing solution. There are lessons learned both from the mistakes previously made, and from the process I went through.
- Huge resources were wasted on the existing solution, as it's now irrelevant. Previously, the design process was driven by a key stakeholder with visual and graphic design expertise but without a web design background. User experiences were largely overlooked and/or sacrificed. A beautiful design on a zoomed-out artboard does not guarantee best user experience.
- Previous design jumped directly into high fidelity wireframe before fundamental questions can be answered. Design critiques mainly focused on the visuals rather than user interactions on the pages. Such process failed to collect important user feedback before development.
- Less is more. Squeezing a large amount of functionalities into one screen increases users' cognitive load and discourages users from learning to master the tool. Designer should be able to not only synthesize but also simplify complex business processes.
- Making fixes on an existing product is easier than starting from scratch. Even though there were a lot of criticism on existing design, being able to visualize what a product can be, even if it's not on its optimal state, is easier for designers to make reasonable improvements. An agile design process is extremely important to save time and thus reduce cost on a project.
- At times, there will be pressure from stakeholders asking designers to adjust certain aspects of the product. Sometimes these are valid concerns; other times. a designer should not take every line of feedback too literally - there might be deeper needs buried under the words. There will even be times when feedbacks from different stakeholders are conflicts of each other. It takes a lot of patience and determination for a designer to resolve situations like this, and it is important to remember that everyone is on the same team and wants the projects to succeed. Open communication and finding common grounds are extremely useful in this type of situations.
Tools Used
Other Projects
|
Senior ProjectA web app design to improve the workflow between mentors and students on Senior Projects at Ross School. Responsibility in the team: UX designer.
|
Other RLS ComponentsA bird eye view of other RLS components I had worked on in 2018 as UX designer.
|
Professional DevelopmentA custom designed online learning platform to accommodate special need of Ross School for its Professional Development and Certificate program. Responsibility in the team: lead instructional designer, UX designer.
|
Evolution of ConsciousnessAn example course produced under Professional Development project that consists interactive and innovative activities that facilitates learning. Responsibility in the team: lead instructional designer, UX designer.
|
Interactive GlossaryAn interactive glossary that facilitates the learning in Professional Courses and highlights the connections between related concepts in the same contest. Responsibility in the team: UX designer.
|
GMAT All in OneGMAT courses completely redesigned for E-learning environment and online community. A complete commercial project with full and successful implementation. More than 5,000 students enrolled up to Dec, 2018. Responsibility in the team: instructor, instructional designer, content developer, UX designer.
|
Step-by-Step ExerciseBuilt from scratch, this application is designed specifically to help Chinese GMAT test takers prepare and practice Reading Comprehension, and in the meantime, facilitate students from All in One courses to internalize what's been taught in class. Single-handedly designed and developed the application. Responsibilities include: data tidying, system architect, UX designer, developer.
|
|