DataShop: Reviving the UI of a Learning Science Repository
Role
Designer
Team
Design Mentor: Bill Guo
Dev: Cindy Tipper
Timeline
Jan 2024 (1 month)
What is DataShop?
DataShop provides learning science researchers with data analysis and visualization tools. The site is managed by CMU's LearnLab.
DataShop is the "world's largest bank of ed-tech data" — featuring 705k data points across 1.4k datasets.
MY ROLE
I conducted a comprehensive UI/UX facelift of the site, while rapidly learning advanced Figma techniques and the formal handoff process.
Why Redesign the Site?
While other prominent research tools have modernized their webpages, DataShop is still stuck in the past. The outdated UI lowers credibility and security.
Datashop now vs research sites from ~20 years ago
The site looked outdated, but it was still functional and useful. My goal was to show researchers this is true by modernizing DataShop's UI.
How might we preserve familiarity for existing users, while improving visual credibility to maintain and increase users?
The Design Solution
Design System: Why Primer?
[1] Familiarity
Primer's primary colors are white and blue, which maintain DataShop's existing primary colors.
[2] Credibility
Primer's minimal, modern look is instantly recognizable and trustworthy.
Home Page
In addition to UI changes, I utilized tooltips to ensure all users understood the purpose of potentially confusing dataset icons.
old home
new home
Login Page
To quicken the login experience for users, I added a Google sign-in option and combined two InCommon sign-in methods into one.
old login
new login
News Page
To ensure users can easily browse all DataShop release notes, I added accordion icons to minimize/maximize each "note".
old "news"
new "News"
Dataset Page
Since DataShop offers many features for users to conduct dataset analysis, it's important that interface is organized. To uphold this, I combined separate minimize/maximize buttons into one up/down chevron icon among other UX tweaks.
old Dataset
new Dataset
Wrapping Up: Handoff & Takeaways
impact
After months of dev work, the new and improved DataShop went live! Cindy (lead dev) mentioned there were many positive remarks about the redesign from users.
What i learned
Presenting your design is just as important as the design itself.
This was the first time I had to present my design in front of stakeholders. I had to learn how to cater my content for a non-designer audience, and advocate for myself as a designer.
