Design Critique with Jesse James Garrett’s 5 Elements of UX: a case of Cambly Website
Jesse James Garrett’s 5 Elements of UX
To clarify the terms during the design process, Jesse James Garrett proposed a framework to help designers understand the abstract concepts of the experience of websites. He defined the five elements: Strategy, Scope, Structure, Skeleton, and Surface.
To understand more about how these elements help designers improve products, I choose Cambly, a website aim to help user to improve their English speaking skills, as my target produce to analyze.
What is Cambly?
Cambly is a platform help users get one-to-one tutoring in English by native English speakers.
Plane 1: The Strategy Plane
On this plane, designers care about two things:
- User needs
- Product objectives
First, let’s talk about the user needs. In this case, the needs for Cambly users are very clear. They want to find a method to improve their English.
User Segmentation:
To more fit the user’s needs, Cambly separates the users into two groups: kids and adults. And designs different specialized curriculum and plans for each group.
And, for the service provider, they want to create a product to assist users to learn and practice English efficiently.
User Research:
But how to make sure the teaching quality of each tutor? In Cambly, users will ask to answer a 5-point Likert scale questionnaire at the end of each class. The data help other users have a basis to get a better learning experience.
Designers consider both the user needs and product objectives can help the product have a strong foundation for the next plane: Scope.
Plane 2: The Scope Plane
On this plane, designers need to define requirements. Know what functions should build and should not build. As an education platform, Cambly does a good job. The entire website only focuses on the three main aspects: picking tutors, picking courses, and review personal progress. There do not exist other irrelevant functions on the page such as flashcards or spelling games that may relate to learning English but not help in English speaking skills.
Plane 3: The Structure Plane
The structure of Cambly is simply, just the 3 main aspects I mentioned above.
However, these three functions may not totally independent at the same level. The courses user choose may affect by which tutor he/she has picked. But in this structure, it may be a problem when the user picks a tutor on one page and then pick courses on the other page separately. For example, when the user chooses a grammar course first and then tries to pick a grammar teacher. But when no grammar teacher is available, the user needs to change the course which teachers are available such as business conversation.
Plane 4: The Skeleton Plane
On the skeleton plane, designers care about the relationship of the individual components. Therefore, the functions on the navigation bar will now be highlighted. As the screenshot above, the main features of Cambly are all shown as buttons on the navigation bar. It helps wherever the page user is located, it is easy for the user to find a link to jump to the desired page.
However, the supporting button goes in a different way. Although this button is shown on the navigation bar as well, the reaction when click it is totally different. The page will show in the new tab page unexpectedly. Moreover, on the supporting page, clicking the same logo on the top of the page can not bring the user back to the previous home page.
Plane 5: The Surface Plane
Finally, on the surface level, designers focus on the user’s attention. Therefore, using grids, color palettes, typography, or logo to create contrast can highlight the essential aspects of the product.
The layout of the Cambly pages is also very simple and clear. They only display in two kinds of grids: 3 columns and 2 columns. Which helps users get and understand the content of the website easily. And in Cambly, the color palettes are just included yellow and green, and some black and white tones. I can easy to distinguish the color palettes in a short time because they are so simple and comfortable.
However, some items’ colors may conflict with my personal conceptual model. For example, the section of each tutor includes two buttons: Profile and Call. The light gray color of the “profile” button makes me confused and feel it is unclickable.
To sum up, a good UX design includes too many aspects we need to figure out. With the assist of the 5 elements, I can not only review each aspect separately without mass all concepts together and stuck in the concept maze. But also apply it to my future design. I can’t wait to do it :)
