top of page
Course Catalog
Desktop Catalog Application
__________________________________________________________________________________________________
OVERVIEW
I began working on this project in 2024 and completed it over the course of a semester. It is a website for discovering and managing university courses and teaching assistant positions. The site was designed in Figma. Below you will find a preview of the finished product followed by the process used to create it. This process includes the problem & goals, as well as a chronological design procedure which addresses these goals along the way.
PREVIEW
Login Page
Sign-Up Page
Profile Page (Admin View)
Class Search Page (Student View)
Class Search Page (Admin View)
Application Page (Student View)
PROBLEM
The group of 5 was tasked with creating a course catalog that had student, admin, and teacher views using CSS, HTML, and Ruby On Rails. Students could search for courses and apply to work as teaching assistants for courses. Teachers would be able to manage student applications to their courses and create additional positions for students to apply for. Admins would act as a middle ground between students and teachers with the ability to confirm new accounts and match applications to open positions. They would also have the ability to manage courses and sections.
GOAL
The goal was to work together to create a website that had all the needed features and to do so in the given time frame of one semester.
This would be accomplished by breaking up the project into smaller tasks and delegating these tasks to each group member. Not only would this help distribute the workload among the group, but it would also limit the amount of time that group members waited on one another by planning out the timeline beforehand.
The roles in the project were 1 team lead, 2 visual designers/programmers, and 2 functional programmers. My individual role within the project was visual design and programming. This includes the designs seen on this page as well as their implementation which was performed in collaboration with the other visual programmer using CSS & HTML.
Features Table
STYLE GUIDE
To give the website an Ohio State theme, a dark red tone was chosen as the primary color that would be used across the entry pages and header text. The background color was white for readability as the site would have both students and faculty reading lots of information about courses that they are involved with.
Default Color Guide
Additionally, both the course cards and navigation bar were given red accent colors to match the Ohio State theme. The tags beneath the course details would display important information that students normally checked for within a class such as the number of credit hours and location. This information was highlighted because it was considered one of the most important aspects that students looked for before reading additional information about a course. Since the number of credits was deemed to be the most important information of all, it was highlighted even more with a red tag. By emphasizing these features in easy to see tags, students could quickly tell if a course was worth reading more about or not.
Example Course Card
The cards and input fields used many rounded edges, as did the red headings which used a rounded Lato font to match the school's style. However, a sharp typeface with multiple weights was used to help discern one set of information from another within the course cards which would be packed with lots of text. The main font was Lexend. A variation of capitalized and lowercase text was used as deemed necessary for changes between titles and paragraph blocks.
Lato (H1, Red) & Lexend Typefaces (H2-H5, Grey)
SETUP
To avoid finding out mistakes later in the design process, a low-fidelity prototype shows what the site layout will look like. Shapes with horizontal lines represent text and those without horizontal lines represent the location and general structure of any icon, button, or extra shape located within a page. This layout was created to give a rough idea of spacing and location.
Low-Fidelity Prototypes
CREATION
Once all features were laid out appropriately on the pages, next up was creating the finished version of the application. The login and sign-up pages were completed to prepare a general style and font family to base the main pages on. Then, in collaboration with the other designer on the team, the remaining pages were split between us, and we began working on them independently. It was important to make sure that we established a style guide before dividing up the pages so that we ensured that each page would have a consistent appearance despite being created by different people.
Finished Login & Sign-Up Pages
Empty space in the background of the student view would allow for the placement of editing buttons on the administrator's view. This would in turn let admins create or edit classes as the years develop which helps ensure the site's longevity.
Finished Class Search Pages
Another open section on the profile page would allow administrators to approve or deny new accounts that request higher-level access to the system. This would let them both edit their own profile as well as approve new profiles all from a singular page.
While the initial plan was to include an applications page to let teachers request teaching assistants, the course objectives were changed for time sake so the group adapted by implementing only the designed pages that would appear in the final deliverables and removing the applications page option from the top of the site. However, the initial design of the applications page can be seen in the second image below.
Finished Profile & Applications Pages
FINAL THOUGHTS
The project was successful by the end of the semester, and the group received a good grade. Upon reflection, however, the project could still have been improved. For example, in a real usage situation, it would have made more sense to allow users to change additional aspects of their accounts such as name and potentially even email as these are usually alterable in today's websites. As this was my first long-duration design project in which I worked in a large group, I thought it was a good experience to see how the design process was affected when collaborating with others. The most important thing that I learned from this change was to always be clear in my communication and to communicate often. It was also important to ask many questions if needed to clarify others' messages/words so that the group was always on the same page. Overall, it was an enjoyable project, and the team members were all great to work with!
bottom of page