Active - SaaS Redesign
For this project, I redesigned Active, the software program MSCR utilizes for class enrollment. I aimed to enhance the user experience by creating a more user-friendly and intuitive design. For this redesign, I utilized the Rayna UI design system to create a clean and consistent look. I made it easier to browse and filter classes by reorganizing the filters and reducing the number of clicks it takes to search.
Skills
UI/UX Process: User Personas, Site Map, Wireframing, Utilizing UI Design System
Programs
Figma, Rayna UI
Prototype
Figma Prototype
Rayna UI Design System
For this redesign I used the Rayna UI Design System in Figma. I used typography, colors, and icons from this design system to create a stylesheet.
Activity Search
I created a subcategory for each activity to narrow results from within the categories.
I moved the filters to the left to be visible while you see the results. The results will automatically refresh as you include filters. I also simplified some of the filters. For example, rather than having every location listed I divided up a map to have sections. You can click into a section to see all the locations included. I also changed the starting “Sort By” from “Name” to “Date”.
I added images to the class details. This gives an indication of what the class will look like and makes it more appealing.
Class Details
On the class details page I included the image as the focal point.
I created easily visible buttons for “enroll now” and “add to cart”. Once you click a button a pop-up will appear to login. On the original page you must be signed-in to see these buttons.
I added the cost of the class, and details for fee assistance.
I added a section at the bottom for other suggested courses in the same category.