Challenge
Helping college administrators and IT teams to share and extend data across platforms and departments saves costs and minimizes disruption, so that more time can be spent supporting students and helping them to be successful.
Solution
While working with Ellucian, a software and services provider for higher education, we set out to create a cloud-based responsive web application that quickly and easily allows a technical administrator to add, edit and manage data models needed for their college systems and databases and to utilize current, up-to-date student data that can be shared more efficiently.
My Role
I was the UX lead and manager, working closely with the product owner, development team and UX teammates to establish a product vision and to produce design assets for implementation.
I directly contributed to deliverables, including: User research, leading team ideation workshops, workflow and wireframe development, and visual design and prototyping.
User Research
Our UX team conducted a series of contextual interviews and usability studies over the discovery phase of the project.
Typical users range from being application developers and analysts to being managers and directors of developers and database administrators.
These users consider themselves functional technologists, or “funky techs” meaning that they handle a wide range of technology skills and responsibilities, from occasionally writing code to managing a team of developers. This group doesn’t have a lot of time to learn something new, they juggle multiple responsibilities.
This research was essential in focusing our design concepts on user needs and not on our assumptions.
Process
After defining user flows, our UX team began concept ideation. Below are the thumbnail sketches I created that focus on a user entering the app, viewing data models and creating and editing a new data model. We designed with a mobile-first approach.
Myself and the other two UX designers on my team each created wireframes with a slightly different approach to content and navigation. Below are the mobile and desktop wireframes I created that represent a user entering the app and adding a property to the Persons data model. My focus was on providing contextual help and guidance to the user as seen on the first screen and within a data model. Through our user research we learned that most users would not be daily users of the tool and would benefit from having help easily accessible.
We conducted 3 rounds of qualitative usability tests, iterating on each wireframe from the feedback and insights we received. Tests were conducted in 1:1 sessions, remotely. In each round, we tested with 5-7 participants. In each test, we had participants go through workflows represented in mobile and desktop-sized screens. Testing in this way allowed us to work efficiently with minimal cost.
With each usability test, we utilized a method known as “RITE” Rapid Iterative Testing and Evaluation. Immediately following each test, our UX team met to evaluate what we observed and annotate our wireframes that we had placed in Mural, a remote-collaboration tool. Working this way allowed to quickly make design changes and improvements.
My team produced a final set of wirefames that represented the major workflows in the application. This gave a foundation of mapping the front-end UI components for the development team to begin implementation while the designers could continue to work on the high-fidelity visual designs.
This project made use of and extended upon a design system that the UX team had previously made. I contributed to the creation of the design system, which was an effort to standardize all Ellucian product interfaces and UI patterns.
Properties within a data model can support several layers of nesting. We created an easy drag-and-drop ability to allow the creation, editing and nesting of properties within a data model. Below is a snippet of the interaction guidelines I created that show this feature.
One of the primary goals of the data model editing app was to make editing less technically challenging so that a wider audience could use it. However, it was still important to provide a more technical view for advanced users who wanted to see the JSON display of the data model and compare changes with their edits. Below is the JSON view of the data model and the ability to compare differences.
Final mobile and desktop designs below showing the data model editing app.
