As an introduction to React, University of Wisconsin's UX/UI design course had us develop a course search and enroll web application. Over a span of four weeks, the application went through four iterations.
See collapsed sections for demo videos, github repos, and project details.
(Note: These web applications were not built to accomodate mobile screens.)
This assignment is meant to introduce more features of JavaScript, along with showing how a React project works. Additionally, this will introduce different features of React, e.g. states, props, more modularized components etc.
This project is the first of a two part React project in which the course management application is extended. This application uses a limited quantity of modified data from the UW Madison course information database.
For more information, see a full writeup of assignment deliverables.
In this section, the goal was to analyze our pre-existing course search and enrollment application, with the goal of finding room for improvement in its design.
After the analysis, the goal was to construct wireframes for a redesign. This was to be done using a design software (such as FIGMA.)
Once the wireframes were completed, it was time to refine the details of the redesign (i.e. selecting a color palette, icons, and fonts)
The final step was meant to be the creation of a mockup for our redesign. Instead, I chose to try implementing the redesign, including a revamp of my React component hierarchy.
Note: Due to the limited time available (as an implementation was going beyond assignment scope), a bug persisted in that sections/subsections for a course can't be viewed within the Cart.
This model is more akin to a multi-level model (see image below), with Course Directory Main and Course Cart being the two fully connected components. They each have subcomponents only connected amongst themselves.
Sidebar for ease of navigation through a large list of courses, either in the directory or in your cart.
From eyeballing it, I'd hope the layout matches the golden rule. I've got an inverted L shape on the left side of the screen with a bit more sparsity on the bottom right.
I'm primarily using a grid, with three main rows: Header, Search, Content.
Fonts: Roboto Condensed (default), Saira SemiCondensed (bolded text).
The intent was to go with a font that felt a bit modern. I have some concerns about Saira SemiCondensed, as I'm afraid it seems too 'gimmicky', but a decision needed to be made. The Roboto family I'm fond of, though.
Colors: Coolors palette: FFFFFF, F5F3F4, D3D3D3, B1A7A6, E5383B, BA181B, A4161A, 660708, 161A1D, 0B090A.
Intent was to utilize the color palette of the school. There was a mistake, in that Add to Cart and View Cart are supposed to have the same fill color, whether it's the off-white of Add to Cart or the pure-white of View Cart.
Icons: I plan to make use of a cart icon in the upper right corner. Not sure what I'll use in the same place on the views from the Cart context to lead back to the catalog.
Size: Used to draw attention to different components. The primary column on the right has larger text than the list of cards on the left. The title of any component is larger than the body text, etc.
Demos: See demo video to watch a brief clip of the implementation, or go to the live demo to try it out yourself.
Redesign Summary: I was able to get a mostly-functional implementation of my redesign working. Viewing sections/subsections in the cart is the only thing that's broken as far as I'm aware. The assignment was only wanting a mockup, not a functional implementation, so I was working with limited time.
This assignment is meant to introduce features of React. This is the second functionality assignment in which the features of a course guide application are extended. This application uses a limited quantity of modified data from the UW-Madison course information database. With this assignment, the features of Course Enroll - Week 01 will be extended to create a course recommendation system.
This project is the first of a two part React project in which the course management application is extended. This application uses a limited quantity of modified data from the UW Madison course information database.
This project was bootstrapped (by TAs) with Create React App
For more information, see a full writeup of assignment deliverables.
Note: When going to the live demo, click the top left tab to get started. The app launching without a tab in view was an oversight at the time of writing the program.
Image Source: UX Collective
These heuristics are what we will be evaluating our components against.
In this step, the Week 03 Course Catalog iteration will be analyzed with the goal of finding 3-5 "components" that are highly consequential for user experience.
From the Assignment Specs: In real life, your application might have hundreds of components, screens, or pages, and you will have to focus your efforts on a limited set that will make the most difference in terms of effectiveness and user experience.
React Component: Course
Justification: These two views showcase the primary functionality of the course enrollment application. That primary functionality is built upon Course components.
React Component: CompletedCourse
Justification: Given that the Completed Courses Tab view is one of four views in our app, and that it's necessary in generating recommended courses, its building blocks (CompletedCourse components) are worth analyzing.
Relevant Views: Recommended Courses Tab
React Component: RecommendedCourse
Justification: Given that the Recommended Courses Tab view is one of four views in our app, its building blocks (RecommendedCourse components) are worth analyzing.
Note: Violation 05 was poorly described at the time of this assignment. It can be either disregarded, or instead, let it represent minor styling issues.
| Violation # | Recommendation | Feasibility(Yes/No) | Severity |
|---|---|---|---|
| 03 | Provide an FAQ or site documentation page to offer guidance on app’s services. | Yes | Medium |
| 03 | Provide a Contact section in order to give the user access to some live staff that can help them with their issue. | No | Medium |
| 06, 08 | Implement the View Section, Add to Section, Remove from Section functionality on the RecommendedCourse component. | Yes | Medium |
| (Extra Violation) | Inability to undo a “remove course” when in the Cart view. Implement this functionality. | Yes | Medium |
| 01 | Provide a visual indication of whether a course is added or not (without having to click view sections.) | Yes | Low |
| 02 | Provide a visual indication that courses can be added (without having to click view sections). | Yes | Low |
| 04, 07 | Customize the cards in Course RecommendedCourse and CompletedCourse to be more uniform in their representation of data. | Yes | Low |
| 05 | Style and/or add headers to each page describing the page’s functionality. | Yes | Low |
In this step, at least three "feasible" recommendations from the previous step were to be implemented.
Summary of Heuristic Evaluation Outcome:
Note: One major oversight was that the application opens on an empty screen, requiring the user to click one of the top tabs in order to present functionality. This was unintended and needs to be fixed.
Recognition vs. Recall: Informative headers added to aid with user guidance.
Task Status Visibility: Each course that is added is denoted by a green checkmark and darker background in order to set it apart from un-added courses.
Consistency: Various components had their styling changed in order to better match one another.
Final Thoughts: These easy updates only took me around two hours to implement, which is very reasonable in the grand scheme of a large project.
Updates:
Updates:
Updates:
Helper Text When Empty
Updates:
Helper Text When Empty
Note: In hindsight, I should've added "To add courses to your cart, go to the Course Selection tab."
