uI design
Classlist is an app that empowers students to build a thriving community and professional network by discovering and connecting with other classmates all within a few taps.

During a workshop in my Interaction Design class, I was tasked with elevating a medium-fidelity wireframe to a high-fidelity prototype by integrating typography, color schemes, and imagery into the user interface. This project granted me the creative freedom to refine interaction concepts as depicted in the provided wireframes, ultimately culminating in the development of an interactive prototype. The primary emphasis of this assignment is on the transformation of the given design, with a lesser focus on conducting UX research processes.

User Interface Designer
Interaction Designer
1 Week
User Need Statement

An Art and Design student has many classes with different peers in each class. They would like to get to know their peers better for current community and social aspects as well as for building a professional network for future employment needs.

User Task

The student visit the “Classlist” app and has a menu of their current courses. They select a specific course to view the other students currently enrolled. They pick a peer to see their name with pronouns and listen to the correct pronunciation of the peer’s name. They can see more details about this peer and even connect to their Linkedin profile.

Medium-Fidelity Wireframe. The class instructor provided four med-fi wireframes and the corresponding user gestures per frame.
Key App Interactions & Features
Welcome to Classlist

The app welcomes the student with an animated logo that expands and fades out into the app's Home Screen.

Tailored Greetings for Every Student

As soon as the student opens the app, they are greeted with a message tailored to the time of day, setting a friendly and engaging tone right from the start. This feature doesn't just make the student feel at home—it also keeps them informed by displaying critical information about their next class, including the time and location.

Plus, the student can add a personal touch to their Home Screen by customizing it with their favorite profile photo or avatar. It’s all about making the academic journey feel more connected and directly suited to their needs.

Effortless Organization at a Glance

The students' schedules are seamlessly organized into a visually appealing stack of cards. At a glance, students can see minimized essential information, including their name, photo, and major, neatly displayed at the top of their screen. With a simple tap on the stack or by selecting the "Courses" tab, the cards explode into a vertical scroll, revealing a comprehensive view of the entire class schedule and detailed information about each course.

The Anatomy of a Class Card

This design allows students to quickly browse their list of courses without needing to expand each card, providing essential details in a glanceable format. It's an intuitive and efficient way for students to manage their academic life, ensuring they stay informed and organized with minimal effort.

Quick Connections,
Deep Insights

With just a tap on a peer's photo in the peer list view, a pop-up Quickview profile appears, offering essential details at a glance. Students will see their peer's name with pronunciation, preferred pronouns, major, and class year—all aimed at fostering an equitable and respectful learning environment.

Plus, a handy link directs them to their complete profile for more in-depth information. Peer Quickview is the perfect tool for quick introductions and building a supportive academic network, making every interaction more personalized and meaningful

Peer Profile: Discover more than just schedules

Peer Profile view enhances students' academic journey by connecting them with peers beyond the classroom.

Access LinkedIn profiles, personal portfolios, and social media links, all in one place. Learn about shared interests, backgrounds, and future goals through detailed bios.

Fostering Connections & Collaboration

The chat feature allows students to quickly discuss class details, coordinate study groups, or clarify assignments with peers. It also provides a platform for real-time interaction, fostering a sense of community and support among users.

High-Fidelity Wireframes
BEYOND THE APP. I enjoyed the creative freedom I have in this workshop. I was able to include an app launch screen and a dynamic home screen, expand the functionality of the list of classes by adding glanceable information, and, lastly, the chat feature which turned Classlist from a simple productivity app to a social one.
Walkthrough Video and Interactive Prototype

For your viewing convenience, I recorded a video to show my prototype in action. You can also test the interactive Figma prototype embedded along with it.


Working on this workshop to kickstart my Interaction Design class was a lot of fun. I had a chance to play around with Figma and explore its features used for interaction and prototyping. I believe that I went beyond what was asked for this activity by incorporating new app features that are not originally in the given wireframes. This quickly turned the scope of this workshop into something larger than what I thought it'd be.

There were numerous parts in the process when I needed to decide which design solution would work best or which features to include. This made me realize that no matter how exciting a User Interface or Interaction Design project is, conducting user research and user experience exploration is equally vital to figure out what features or functions an app does or doesn't need based on the expected type of users, context of use, and organizational goals.