College and Career Readiness Solution Redesign
Redesigning a student solution for a new front end stack to provide a responsive UI foundation for a mobile generation.
Background
Challenge
How might we modernize the interface and structure of a student facing legacy college and career readiness solution without disrupting current client expectations?
The Skills Required
Prototyping
Design in Agile Teams
Interaction Design
UI Design
The Team
Product Manager
Contract Designer
UI Engineer
Backend Engineer
Software Architecture
Dev Ops
QA
The Timeline
Person 1
Person 2
Person 3
Outcomes
Increase the access to our product by students with mobile devices, especially smart phones - critical to students without a laptop style device at home.
Increase speed of value delivery by developing APIs, creating a modular React front end, and separating the front end front the back end.
Meet WCAG AA 2.0 standards to ensure all students had equal access to the college, career, and life readiness tools offered by our product.
Story
The world had changed a lot since the team behind our flagship had launched the original solution for students in the mid-2000s. It was time to update our product infrastructure to increase agility - and adapt the UI to a new group of students using smart phones as well as shared classroom devices.
Personas
We focused on inclusive student personas, including a first generation college student, low vision student, and twice exceptional student to help build empathy for the unique students needs targeted within the redesign and ongoing value creation efforts.
Additionally, we needed to consider counselor personas, who drive engagement with the platform and are the student’s go to human support for college, career, and life readiness.
4. Pivot to Infrastructure
Despite positive feedback, the business understandably wasn’t sold on the risk of change management that comes from reinventing an established flagship product. We put that prototype on the shelf and pivoted into a more infrastructural goal of decoupling backend and front end systems, standing up modern APIs, and converting the UI to a responsive design. This is where we brought in outside help from a contract team.
7. Accessibility
Following the launch of the new student platform we hired an outside company to audit the design for WCAG AA 2.0 compliance. This expert in their field provided a list of accessibility defects and recommendations that our internal team was able to prioritize and implement, rapidly increasing the overall accessibility of the student product and leading to an improved experience for everyone.
2. The Design Sprint
When the Product Leadership was pitching an overhaul of our student platform to our parent company, I led a Design Sprint - bringing together stakeholders across the business as experts, and a core team that included members of Product, UX, and data science. We defined the heart of our understanding of the business leveraging insights from research and the product cofounders, and defined a risky chat based prototype which we tested with some of our counselor users.
5. Pivot to Infrastructure
Despite positive feedback, the business understandably wasn’t sold on the risk of change management that comes from reinventing an established flagship product. We put that prototype on the shelf and pivoted into a more infrastructural goal of decoupling backend and front end systems, standing up modern APIs, and converting the UI to a responsive design. This is where we brought in outside help from a contract team.
8. The Launchpad for the Next Era
This entire effort served as the launchpad for continued efforts to transform our student platform into a modern, delightful, helpful experience for K-12 students.
3. Student Research
The chatbot based approach was outside of counselor’s comfort zone to coach on with their students so we made a pivot into an idea that felt much more like a reimagined curriculum offering. Partnering with research, we took this idea in middle school classrooms and gathered student feedback. The feedback was promising - students were excited about pathways that evolved with them and leveling up in our system.
6. Enhancing the UI
With our budget for UI changes limited we kept our changes to the student product minimal - doing what made sense to lay groundwork for the future and map basic UI standards to the new parent brand defined by our Marketing and Brand team. When we presented this to our leadership team, the reaction was clear - despite the desire to keep change limited, they were hoping for more innovation. I quickly worked with the contract designer to pitch alternative solutions, particularly with the student landing page. These needed to be achievable without changes to the institutional side of the platform - as this was out of scope.
Learnings
Take a Point of View (POV)
I could have taken a stronger POV about the design needs and process early on in this effort, saving the team from a pivot when executives saw the implementation of what they’d initially requested as the scope of the UI redesign. I should have established design principles that distilled our combined research knowledge and cross functional understanding of our clients, set up more regular reviews with our contract team designers and the internal product team, pushed back on the lack of user testing prior to beta, and given more opportunities for the contract designer to collaborate together with the in house team members. This was my one of my first efforts working with groups that were not in house and an early effort in my role as a Lead UX Designer.
Expert Reviews Can Remove Bias
Having an external expert evaluate your product’s accessibility is of huge value and gives you a strong list of actionable items to tackle as a product team.
Design Sprints can Create Energy Around a Vision
Although the business chose not to go forward with the greenfield type ideas from our design sprint, those ideas and the common understanding of the “heart of our product” got to stay in the archive for later. They became conversation points as we continued to drive the product forward after the initial redesign and rearchitecting of the product.
Student’s Access Devices Might Surprise You
A fun learning, some students access education products with Xboxes. Students complete tasks and activities on all kinds of devices and accounting for that is important to equity and access.
Design Across Classroom vs Home Contexts is an Interesting Challenge
Creating a product that can be embedded in classroom instruction within shared labs but also used at home on a small mobile device is quite the challenge. I’d love to consider what I might do now with it.