Commencing my first official UX project, I took on the challenge of developing a digital solution for the education sector.
The challenge was to enable students to conveniently purchase full bundles (or kits) of products and services necessary to conduct activities in their academic semester. This task was made of two aspects:
For faculty to efficiently collate items into kits, and
For students to receive this information and make purchases conveniently
Introducing ClassKit: The Concept
Inspired to build a feature extending from Amazon.com's foundations, I coined the working title as Amazon ClassKit – inspired by their naming convention for features such as Amazon Prime Now.
Amazon ClassKit was imagined to be a one-stop procurement platform for education users (faculty, staff, and students). Administrators can tap on the extensive library of products and services on the largest marketplace in the United States to provide for students' needs in class.
It would allow educators to create collections of products, known as kits, with an all-in-one page to understand fundamental datasets such as products, costs, logistics, and, most importantly, their students.
Understanding the User: Persona and Storyboards
Legend: Blue – College Professor (David), Orange – Student (Matt)
Beginning from the research data, I crafted two sets of personas – each depicting one segment of the user channel – and produced storyboards to highlight the user's needs and goals and their ideal user experience.
Open feedback with the class helped guide on improving the personas and works. Early feedback had raised some concerns, particularly about the disconnect of emotions in the first persona draft (versus the data) and suggestions to add more details into the storyboard.
Each of these was valid comments and helpful in creating a better scope for the end-user, where the design story, task flows, and interface itself would come together to serve the users' needs and goals.
Brainstorm the Product: Design Story
The next step was forwarding the idea. I imagined the product with the end in mind and continually listed ideas of what a product like ClassKit could do to cater to its users' needs and wants.
Of course, no initial idea is perfect. And generating the design story took some "thinking loops" to eliminate "stories" that were less relevant and add those that would create a more coherent experience for both educators and students.
Yet, crafting the design story was the start of a connected process, where some features came to fruition along later stages of the design process. For example, the user group feature within a product kit was a late but significant addition that arrived when the initial UI sketches began to pan out.
In my design idea, much of the product concept would remain unchanged for both users (educators and students). However, educators are positioned to have more administrative control over kits and the items within. Likewise, students were centered on being receivers of this information, with the ability to purchase and enquire about items with their instructor.
Finding the Path: Task Flows
The first set of task flows drafts were focused on the key use cases derived from the challenge and the design stories. It was a more two-way process than I'd initially expected as I often referred to the design story to confirm if an expected use-case was present or evaluate if a user path was efficient.
Working on task flows with focus effectively scoped the user journey path before the visual design process. It helped tighten down loose ends in the design story, which validated the placement and availability of functions (use cases) in the list.
Viewing at the plan from a bigger picture, then more in-depth into the process (repeatedly), allowed me to sift out areas that can be improved, which led to a more refined task flow and a more coherent set of design stories.
Drafting the Interface: User Interface (UI) Sketches
Alas, the visual workflow began with UI Sketches. Though extremely basic in its form, it was an exciting experience to translate an idea from a list of information to more a visual form.
There were undoubtedly difficulties along the way, thinking about "the best way" to place objects within the screen, evaluating if it fits well with the task and design story. This tied back to my initial two processes, where I found myself moving back-and-forth to consider what was planned before and re-evaluate if I wanted to rethink the design story's position and flow.
I never expected these three to be closely connected processes, despite seemingly different and unique on its own. Yet, they complemented one another in helping me assess if a particular user path was logical as visualizations are often much more simplistic than the complexities of reality.
That was a term that bore much weight in the later stages.
Analyzing the Information: Metadata on the Platform
Data is a crucial part of every design workflow, and a part of design planning comes from thinking about what data goes into the different components that bring the product together.
For Amazon ClassKit, I had envisioned the primary dataset consisting of kit groups. Each kit then contains a subset of data related to products and invited users.
The former carries information about products, while the latter allows educators to discover difficulties in students' purchase of items. Breaking down the metadata along each group was important, especially in the design of this product. It was a basis of clarity on which information would be relevant and vital to the users during their journey on the platform.
Analyzing the Journey: Consequences
In the second part of the information analysis, I took the primary feature of Amazon ClassKit (Kit Groups) and broke it down to discover the consequences in the design. It was personally hard to objectively consider negative aspects of a growing idea, not in the sense of downplaying an issue but identifying what could go wrong.
However, I discovered that it could be essential in uncovering critical design flaws that could affect the user experience in the long term.
For example, in consideration of kit quantities, I realized that designing one kit for every section would likely result in a high volume of kits for educators teaching multiple courses, let alone across numerous semesters (which was quite apparent based on research). This, in turn, could make it challenging to keep track of each kits' products and users (as user groups are a deeper level function), which ultimately defeats the purpose of convenience.
Understanding consequences in a design is an opportunity to identify failures before moving forward with a product. This attempt uncovered a critical problem which allowed me to refine my product workflow (design story, task flow, and UI drafts) and think of a different way to address the need.
Again, a connected process.
Refining the Look: UI Digital Wireframes
Bringing it all together, the combined insights from the design stories, task flows, and information analysis came to provide for the skeletal screens of Amazon ClassKit.
Moving back-and-forth again with the other design processes challenged me to constantly evaluate the information hierarchy and the journey (flow) a user is expected to take on the actual product. It also pushed me to relook what I had drafted in the initial sketches to consider whether the placement of individual elements and components was still viable and how I can make it better.
Given this design stage affords deeper understanding, thinking with complexity becomes increasingly crucial in connecting the design with the previous stages. For example, when a user creates an account for the first time, what do they see? Is it any different than a typical user? Are there any steps in between that were not considered?
Thus, I decided to add more screens to highlight the expected look of certain states (e.g., new kit/empty state), especially for new users, which would come to order in the user flow.
Working with more refined details was undoubtedly beneficial to the understanding of the product design. It gradually brought me closer to the complexities involved in each process, which I reviewed alongside prior task flows and design stories.
Evaluating the Idea: Usability Testing
Moving closer to the end, I prepared for the usability test to evaluate the effectiveness of the product design. With the thought of having a user try the concept for the first time, there were two minor changes I had to make to the prototyping environment versus the wireframes.
A) Creating Focus on the Program With the Amazon UI being familiar to many, I wanted to keep the user's visual focus on what's new (ClassKit) without the distraction of other seemingly different or new-looking components.
This was why I opted to change my previously sketched navigation menu to the exact version on the current site, given that there was no intended revision with ClassKit.
B) The Experience, Not the Visual To add to the design focus, I also wanted to ensure that the user's attention was placed on usability and experience, rather than the visual appearance of components and elements. Hence, I kept all objects in greyscale and the design as wireframes to maintain this balance for a usability test.
Usability Test: The Objectives
The usability test goal stemmed from creating a focus as above, ultimately to evaluate the efficacy for the primary user (an educator) to fulfill their need of creating a bundle of items – the kit itself then adding the items.
This stage of ClassKit's function was the most important before subsequent steps. The failure of which would impact other deep-level functions, including sharing kits, applying to multiple courses/sections, or even purchasing kits (for students).
It was this interaction (Task Flow A) that I wanted to test, and I wanted to ensure this "introductory" stage was in order before moving to sub-level interactions.
Usability Test: The Environment
The fundamentals of the wireframes remained mostly unchanged in this prototype, albeit changes to create focus. Still, I made additional states for filling and selecting information (empty then filled) to provide a closer representation of likely complexities and to prompt the user to view each input along the way realistically.
Doing so benefited testing as multiple users conscientiously read each data field before moving on to the next stage. I had initially thought that they had some difficulty with the terms. However, upon probing, almost all mentioned that they were reading what was in each input and field.
Building realism wasn't always perfect, and one flaw that came was users' build on the complexity of the prototype – attempting to select all three settings in the kit creation (visibility, ship to, and method of sale) even though I had only catered for one. This was a learning experience that I could apply for future design projects.
Amazon ClassKits Prototype
Prototype Powered by Adobe XD
Try out the digital prototype here.
Usability Test: Outcomes
I ran a total of four usability tests for this task, and thankfully it raised some errors that I had not spotted. Besides gathering views about things that worked and things that did not, it allowed me to observe patterns of "failures" in the initial prototype and determine the priority of resolution before moving on to the next development stage.
As a designer, what I learned here was the power of "external awakening," where patterns of observations by another stakeholder not involved in the development help break the desensitization in our mental models.
This short usability study showed me how different my mental model was versus my users', even as I tried to bridge this gap during ideation. Understandably, it's never perfect the first try, and it allowed me to observe closer about how my users interpret the information and how I can make it easier for them – the goal of UX.
Post-Test Design Revisions
Based on the usability test results, I concluded on some key areas that were to be revised:
Create Kit – Administrative Options
Here, users reported during the test to be confused by what each of the accordion headers meant. Thus, I adjusted the headers' phrasing and added more specific descriptors to signify its use case and context better.
Dashboard (Empty State) – Utility Buttons
Another common observation was the utility functions such as "Edit" and "Filter" on the user dashboard. In both scenarios, the user was confused by the function in the heading, on each kit card versus the settings icon on the upper right. Another observation was the redundant appearance of "Edit" and "Filter" when no kits were present.
Thus, I decided to remove the button in the heading while omitting these two when no kits are on the dashboard to resolve this confusion.
Kit Page (Empty State) – Add New Items Buttons
One mistake I made in the design was not defining the difference between the terms "kit" and "list." As a result, almost all users had thought it had a different meaning. This also made them unsure if the button and the placeholder card had the same function, and it was only after trying that they had an aha moment. Thus, I clarified the language to signify that both led to the same function of adding new items into the kit.
Learning Experience
Working on Amazon ClassKit was my first proper user experience design process in my years of creative work. Traditionally, it is often thought that creating a new product or feature was as simple as doing something new or different. But that is a fallacy.
This project taught me to be more critical in design thinking and think more in-depth into the different facets that make up the user experience: the user, data (and metadata), processes, and systems. One cannot work without the other, and it is fundamental as a designer to connect the dots to strike a balance between what's possible, what's novel, and what's most meaningful to the user's need at the time.
The past couple of weeks allowed me to understand how design is truly an iterative process. I had thought after one step is over, we'd move on to the next. However, every step is connected, and working back and forth is quite like looking at things from both a micro and macro view to see that the product is growing in a meaningful way.
We all want to create the best product there is or the next game-changer in the market. Yet, how the user feels benefit and meaning is the fundamental key in making this determination. I have found myself a tad more confident in this design process and will certainly look forward to being more efficient in time to come.
Lessons For The Future
If there's anything I could do better in the next round, it would be to refine my thought around complexities in the task flow and work to be more coherent and efficient in the design thinking process before wireframing and prototyping.
Comments