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.
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.
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.
The app welcomes the student with an animated logo that expands and fades out into the app's Home Screen.
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.
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.
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.
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 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.
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.
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.