Udemy Wireframe (Ironhack 2021 Chronicles)
Udemy was my first introduction to UX/UI design. For that, I am incredibly grateful for the platform and the Adobe Creative Cloud Suite courses by Daniel Walter Scott. Not only did the Udemy platform have a plethora of courses related to business and design, Udemy has courses for virtually any topic from health and fitness to art to business. In addition, the platform, both mobile and desktop version, is easy to navigate and answers the questions many student have before purchasing courses including course ratings, instructor ratings, course time length, and course descriptions. For this reason, I chose the Udemy app to convert into a wireframe for my Ironhack pre-work Exercise.
I decided to wireframe the flow from the landing page to viewing student comments and ratings. This is a common flow for users as many people value the experiences of others when making purchasing decisions. The primary task is to select a yoga class to purchase. The subtask include the following.
- See what courses are on my wishlist
- Select the health and fitness category
- Select a course with an appealing name and/or image
- Read through the course description
- View student comments and ratings
Make a decision based on the available ratings, comments, and course description
This user flow contains a number of repeated UI elements including buttons and icons. Although I attempted to use elements provided by Ironhack’s UI kit for Figma, I found detaching the main component in order to make edits to the component to be a tedious and time-consuming task. In most cases, I found recreating the component, then making a new component to be faster and easier. Because many of the elements on the Udemy platform are repeated, I did not have to constantly recreate elements once I created one.
As mentioned earlier, the Udemy course user flow to view student comments and ratings was fairly easy to wireframe due to its repetitive structure of course title, instructor title, rating then pricing. In addition, the platform used many of the same elements. However, I did find that the course description page included a lot of information that required users to scroll before reaching the student comments and ratings. This reverse user flow exercise has definitely challenged me to determine the most important details of a user flow. In particular, this exercise has taught me the importance of when to include text versus filler text.
