Redesign for Innovation Projects
Overview
This page showcases my Redesign for Innovation projects, where I reimagined existing digital experiences to enhance usability, accessibility, and overall user satisfaction. Through these redesigns, I applied UX principles, user-centered design strategies, and iterative thinking to create more intuitive and engaging interfaces.
Timeline
Sep 2024 - Dec 2024
Tools
Figma
Canva
WPS
Disclaimer
These project are not endorsed by the related organizations, and they doesn’t reflect the views of anyone working within PeoplePowered and University of North Carolina at Chapel Hill. Example image and video content used in this project belong to their original authors. I don’t take personal credit for any third party content used within this project.c 2024
Project 1: Course Search Screen Redesign
Introduction
As a UNC student, I understand how important it is to have a smooth and efficient course search and enrollment experience. However, the current ConnectCarolina interface can sometimes feel confusing and difficult to navigate, making it harder for students to find and register for classes.
What to do?
For this project, I took on the challenge of redesigning the course search screen, focusing on improving search functionality and navigation. My goal was to create a more intuitive and user-friendly interface, ensuring that students can quickly and easily access the courses they need each semester.
Screen Redesign
Original Page
Redesign Page
(Version A)
Redesign Page
(Version B)
Process
Step 1: Research course selection pages
Instead of jumping to the redesign page directly, I first did some research on how other institutions designed their course selection pages:
1. I analyzed the course selection interfaces of 7 universities (Arizona State, Stanford, Indiana, Carnegie Mellon, Wisconsin, Yale, and NC State) and 1 course management platform (Coursicle).
2. I identified student-friendly design elements and documented them using wireframes to capture the best practices in course. search and enrollment.
Step 2: Analyze UNC's existing design
After gathering inspiration from various institutions, I shifted my focus to UNC’s existing course selection system to evaluate its design and functionality.
1. I evaluated UNC’s current course selection page, identifying both its strengths and areas for improvement.
2. I extracted the color board and UI elements from the existing design to maintain some familiarity while enhancing usability.
Step 3: Identify core functionalities needed
With insights from both my research and UNC’s current design, I refined the core functionalities that my redesign should prioritize. I identified the essential functionalities by comparing UNC’s system with other institutions and assessing what worked well and what was missing.Based on this analysis, I finalized the following key features to improve the student experience:
1. Search functionality (Basic & Advanced)
2. Course selection process for seamless enrollment
3. Calendar view for scheduling visualization
4. Course catalog for easy browsing
5. Detailed course information display to help students make informed choices
Step 4: Design the new interface
Using insights from my research and analysis, I created two versions of new layouts with Figma.
Redesign Page
(Version A)
Redesign Page
(Version B)
Figma Low-fidelity Prototype
Project 2: 404 Eerror Page Redesign
Introduction
PeoplePowered is a platform dedicated to participatory democracy and civic engagement, but I noticed that its 404 error page could be improved to create a smoother and more engaging user experience.
What to do?
The original design included overlapping functions, an uneven layout, and a large amount of text, which might make it a bit overwhelming for users encountering an error. This inspired me to explore ways to simplify the page, making it more intuitive, visually cohesive, and aligned with the platform’s style.
Therefore, my goal was to refine the design so that users could navigate the page more easily while still having access to the key features they might need.
Original Page V.S. Redesigned Page
Original Page
Redesign Page
The original page contained multiple links to return to the homepage, which could be confusing, so the options are consolidated into two clear buttons to enhance usability.
The redesign simplifies the error message by replacing excessive text with a visual representation (emoji-based "404" graphic) that conveys the concept more effectively.
Also, I adjusted the proportions of the header, middle section, and footer to create a more visually balanced layout.
The search bar is enlarged and centered, making it more noticeable and accessible for users who want to search for content directly.
For the footer section: Unnecessary options were removed, while essential information, such as the "Email Us" button and contact details, was retained for accessibility.
Conclusion
Through this redesign process, I gained valuable insights into the challenges of improving an existing design while preserving its original identity. I learned that redesigning is not just about creating something new—it’s about refining what already exists by continuously iterating from the user’s perspective. Balancing functionality with simplicity reinforced the idea that sometimes, less is more, and that a cleaner, more intuitive design can often be more effective than adding excessive features.
Additionally, I realized the importance of research and inspiration when facing design roadblocks. Looking at other well-designed systems and learning from best practices helped me refine my ideas and apply creativity in a way that serves real user needs. This experience strengthened my ability to analyze, adapt, and innovate—key skills that I will carry forward into future design projects.
