1Cademy - Dashboard UI design and design system management

1cademy thumbnail

My Role

UI/UX Designer

Duration

Jul – Dec 2022

People

Chia-Ying Hsieh
Ember Shan
Hilda Wang
Kexin Li
Tiffany Chen

As a UI/UX design intern at 1Cademy, I helped design a new instructor dashboard for the educational platform's expansion to instructors and students. Our goal was to create an intuitive and streamlined platform that allows instructors to easily manage their courses and personalize the learning experience for each student. In addition, I also played a role in maintaining the design system and creating product documentation to ensure the platform's sustainability and scalability for future updates.

Background

1Cademy is an educational platform that enables users to visualize and organize their learning. Originally designed as a self-paced learning tool, we are now expanding its capabilities to support structured courses.

Moreover, because the old website worked inefficiently, 1Cademy had a big website revision. In addition to improving the speed, we also build our design system and incorporate the old design into the new system.

The following are the goals of the teams and what I did correspondingly.

Create a consistent standard for all designs

⬇

Documented specifications
Maintained and updated the style library

Release the course-related feature by spring 2023

⬇

I designed a new dashboard and profile pages for the new user roles: instructors and students.

Sitemap

To improve communication within the team, I created a sitemap for our large and complex website structure. With pages constantly evolving, team members were struggling to keep track of specific pages and navigate the site. To address this, I added screenshots and comments to help everyone match page names to their corresponding content.

Design

Instructor Dashboard

How might we effectively present student performance and let instructors manage course settings easily?

Iteration1: feature selection and layout brainstorming

Take the homepage for example

1. Navbar: 4 subpages
     (1)Home: display the overview of student performance
     (2) Students: show the student information
     (3) Questions: [stakeholder request/future feature] set up quiz questions
     (4) Search

2. Blocks of graphs and charts

🤔 Why does it differ from the commonly seen black and white wireframe?
‍
✨ Our design process incorporates the participatory approach, allowing us to involve stakeholders and users in the process. As a result, these sketches reflect the perspectives and ideas of those involved and use colors to enhance communication.

Iteration2: Content and layout rearrangement

Iteration3: Final Design

User Profile

1. Basic Information:
This section includes the essential details about the user such as their name, profile picture, and bio. It provides a quick overview of who the user is.

2. Activity:
This section showcases the user's recent activities on the platform. It provides insights into their level of engagement and helps other users understand what the user is interested in.

The iteration of activity heatmap

I redesigned the heatmap to resemble a calendar based on feedback from a usability test. The original design, a long rectangular heatmap, was found to be less intuitive by 3 out of 5 users. The new calendar-style design received positive feedback from all users.

3. Posts:
This section displays the user's posts and updates. It provides a comprehensive view of the user's content and allows other users to see what they have been sharing on the platform.

Design System

Style Guide

Style Guide

By Ember Shan

Component Library

component library

We chose to adapt the Material Design system as the foundation for our design, as it provided a well-established and recognized design system that could be easily implemented while maintaining a consistent user experience.

While referencing its structure and style, we customized and adjusted it to reflect the brand identity of 1Cademy.

As the 1Cademy library of components grew, designers and developers faced challenges in identifying and distinguishing between the various component variants with different properties.

To overcome this obstacle, I implemented a labeling system for components that simplified the management process and made it easier for our team to find and use the components they needed.

To ensure that our design vision was accurately translated into the final product, I created detailed UI specifications that provided developers with a clear understanding of the design details.

I completed dark/light mode for the 1Cademy components, providing users with a personalized and visually comfortable user experience.

Component showcase

Conclusion

As a UI/UX design intern at 1Cademy, I helped design a new instructor dashboard for the educational platform's expansion to instructors and students. Our goal was to create an intuitive and streamlined platform that allows instructors to easily manage their courses and personalize the learning experience for each student. In addition, I also played a role in maintaining the design system and creating product documentation to ensure the platform's sustainability and scalability for future updates.

To achieve this, we utilized the Material Design system as a foundation for our design and customized it to reflect the brand identity of 1Cademy. Additionally, I reorganized the sitemap to improve communication and navigation within the team, and implemented a labeling system for components that simplified the management process. Overall, my efforts contributed to the development of a user-friendly platform that is well-equipped to support structured courses and personalized learning experiences.

More projects

Worldiff screens

Worldiff

App Design

#UX Design #Mobile App #Online forum

Prototype a social-media-like app for new foreign residents to share their cultural-related experiences as posts, aiming to help foreigners to understand the local culture.

i-corps project thumbnail

NSF I-Corps Hub: Great Lakes Region

Need Assessment & Usability Testing

#UX Research #Client-based #Website

Evaluated and synthesized users’ needs by conducting interviews, survey, heuristic evaluations, and usability tests.Offered recommendations to improve the usability.