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
Current Site Observations
From analyzing the site, I noted there was inconsistent use of colors, buttons, icons, and headings. There were also two different styles of navigation bars. The filters were lengthy and complex to use.
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.
Home Page
I created a “Quick Select” section to quickly see results from common activity categories. I included an icon for each category to make it easy to identify and supplement the text.
I used the extra page space to create a “Featured” section to highlight relevant classes.
Original Page:
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.
Original Page:
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.
Original Page:
