Problem statement
As the UX design industry continues to evolve, aspiring and current UX professionals and users alike are faced with the constraints of having to search far and wide for resources and ways to learn more about UX Research terms.
Reasons for this is because:
- An all-encompassing glossary platform doesn’t exist
- The industry is still fairly new
- The current terms can be confusing
- A number of those terms have been borrowed from other domains
- The industry has yet to find a common voice
- Different people from the industry use UX Research terms differently
proposed Solution
Problem Framing
How might we design a friendly, interactive prototype for novice UXers and users, while still having the formal and professional look and feel for the more advanced?
The overall goal of this project is to provide a comprehensive tool to help fellow UXers and UX professionals build a stronger UX vocabulary.
For the next 4 months, my team and I would join a community of 80+ UX Professionals and enthusiasts from all over the world in a crowdsourcing effort to address and combat these issues. By conducting generative and evaluative research, we were able to take it several steps farther to inform and design beta versions of an all-encompassing UX glossary website.
Process & Approach
There were 9 UX methods that were explored altogether:
Card sorting*
1:1 interviews*
Secondary research
Competitive analysis
Participatory design
Email surveys
Concept testing
Desirability testing
Storytelling
*Among the 9, I will be focusing on the highlighted UX methods
Card Sorting
The team and I utilized ourselves for this exercise. As a team of 4, we sifted through a large Google spreadsheet of UX terms, selected over 100+ that we were most familiar with, wrote them onto cards, organized them into categories that made sense, and gave them labels. Once we exchanged images of our final groupings, we then decided upon the most common/closely related labels we thought of for our different categories. Below are images of my final groupings:
VIEW
VIEW
Some of my Card Sorting results
1:1 Interviews
We each interviewed over 15+ UX professionals, aspiring and experienced, throughout the entire process and from all over the world — the United States, China, the UK, and even South Africa! Time difference was our greatest constraint but getting to interview, test and receive feedback on our MVPs with persons from such different backgrounds and personal journeys was truly an amazing and unforgettable experience.
Some of my awesome interviewees!
main objective
When asked what were the most common qualities people look for when searching for UX terms, these were the responses from our users:
- Credibility
- Simplicity
- Interactivity
- Visuals
My team and I went straight to work; producing the following 3 MVPs of what we think such qualities may look like based on those findings:
Wireframes
Sidenote:
For this iteration, my team and I initially produced a variety of platforms (app, website and iPad design) to get an idea of user preference. But later narrowed our focus to solely building Website MVPs.
Iteration #1
MOCK V1 - APP
This MVP focuses on the gamification aspect of the learning experience. Users can take a multiple-choice quiz to test how well they know and retain UX glossary terms. The format is designed to encourage engagement, motivate participation, and provide a reason for users to revisit the product. User retention is key!
VIEW
Iteration #1
MOCK V2 - WEBSITE
This MVP is a basic search form with the ability to filter by category type or to browse alphabetically. Table results could then be sorted according to however many columns there were, and “Used In” would be a visual cue for areas where the term is used (planning, metrics, testing, etc.). The focus here was on giving the user just the meat-and potatoes of a glossary — especially if they already have ideas of what they’re looking for
VIEW
Iteration #1
MOCK V3 - IPAD (CONCEPT & DESIGN BY ME)
This MVP focuses on the engagement, learning and retention of glossary terms. It incorporates a “Word of the Day” (W.O.D) feature to present a randomized term per daily visit, a “Flashcards” feature to test users’ knowledge, as well as a “Starred” feature to save and revisit challenging and/or favorited terms.
VIEW
Key learnings - Iteration 1
- Users loved the interactivity and visuals; wanted even more
- The pronunciation feature was a “sweet bonus”
- Being able to “favorite” terms was deemed favorable
- There was a divide between flashcards or quizzes
Iteration #2
MOCK V1
This MVP is a frankensteined product of its previous iteration and mock 3’s (my previous version) to further provide the gamification requests and positive feedback we received from our users
VIEW
Iteration #2
MOCK V2
This MVP is also frankensteined with previous versions 1 and 3 since users responded well to the learning aspect — we incorporated both Word of the Day (W.O.D) and Quiz section. An added playful approach to words and phrases was also introduced such as “Word Lookup” and “Test Yourself”
VIEW
Iteration #2
MOCK V3 (CONCEPT & DESIGN BY ME)
This MVP introduces another minimalistic approach. The Google-inspired search box placement becomes the main focus while incorporating filters as stand-alone modules. The W.O.D and flashcards are also separated into their own individual pages for users to choose whenever desired. “Dark mode” is also introduced as an A/B testing strategy
VIEW
Key learnings - Iteration 2
- Filters can be very challenging depending on the design
- Users want to see "last updated" for terms
- The search bar has to stand out and be easily accessible
- People found it difficult to label themselves by expertise level
Iteration #3
MOCK V1
This MVP focuses on fleshing out the key positive features from previous iterations and its visual aesthetics. These would include the gamification aspects, filtering, word pronunciation and favorites page, and everything in between!
VIEW
Iteration #3
MOCK V2 (CONCEPT &
DESIGN BY ME)
We had decided a keep the “dark mode” version around once again for A/B testing purposes as it was favored by a good amount of our testers during the last round of interviews. The focus was also upon fleshing out the key learning features and details with hopes of receiving an even more narrow outcome of feedback results between both mocks!
VIEW
Key learnings - Iteration 3
- “Dark mode” can be perceived as uninviting to some
- Filters are still a challenging, questionable feature to build
- The narrower the prototypes, the stricter the divide between beginner vs expert levels
- “Shortcuts” are only well received when there are few
Iteration #4
Mock v1 with visual markups
Iteration #4
Mock v2 with visual markups (Designed by me)
Key learnings - Iteration 4
- An “about page” was definitely favored
- Users loved the guided contexts and CTAs
- The divide between beginner vs expert level views persisted
- Frankensteining was highly recommended
Final Key User Insight
It remains evident that the problem that we had hoped to solve persists — experts preferred a professional look with less interactivity whereas beginners preferred a more fun and engaging gamified look. And it will take a bit more iteration, concept testing and desirability testing beyond the scope of the project duration to figure out the solution. But with my final prototypes below, I hope to get us closer.
Iteration #5
Home page
- 1. Frankensteining of both mocks to give approachable yet minimalist look and feel with hopes to attract all levels of expertise.
- 2. An about page was added since it was highly recommended.
- 3. Both “Word of the Day” & “Flashcards” are minimized upon entry; as experts. found it unnecessary.
- 4. The search bar is centered and remains the focal point.
- 5. The words were kept to add context with a few changes to the central heading.
- 6. Displayed are the expanded views of both Word of the Day & Flashcards.
- 7. CTAs provided as shortcuts to visit both pages from Home Page
Iteration #5
glossary page
- 1. Both mocks were combined with an added minimalist touch that the users favored.
- 2. This filter was kept since it provided the key subjects.
- 3. As the search autotypes, the definitions filter down until it reaches the result. Results for “A” is currently shown.
- 4. The bar listing is shown along with the options to sort. This also takes the “definition preview” approach, similar to google inbox.
- 5. The alphabet tab was kept to easily access terms by letter (incase the autotype functionality doesn’t meet the MVP standards).
Iteration #5
Word of the day page
- 1. This page also was designed with minimalism in mind; frankensteining both mocks.
- 2. The audio was kept for pronunciation of terms.
- 3. The related and interchangeable terms, last updated, category type & contributor were all grouped for a more clean, organized look.
- 4. An option to upload a photo to the related term allows participants to contribute to the crowdsourcing efforts.
- 5. Only the definition is visible as it is the focal point of looking up a term while the others are minimized.
- 6. There are options to expand individually or all at once for usability.
- 7. The “Used in a sentence” is expanded for viewing purposes.
- 8. Here the user has the option to look at another term if desired.
Iteration #5
FLASHCARDS page
- 1. The previous version was revisited as users liked the look & feel.
- 2. This category allows users to filter cards that they would like to view.
- 3. Adds context to which set of cards the user is currently viewing.
- 4. A descriptive CTA that allows users to flip card interactively.
- 5. Adds context in informing the users how far they are and how much they have left to go.
- 6. Directs users to the current term’s page (Word Of The Day model).
- 7. Allows users to be directed to the previous or next flashcard. If on the first or last card, the buttons are disabled accordingly.
Iteration #5
ABOUT page
- 1. This page allows for users to read the backstory of how this glossary came about, and to also send feedback and inquiries.
- 2. Contributors are listed by name and occupation and can be viewed by anyone visiting the site. This list can only be updated on the backend to avoid persons who haven’t contributed from adding their names.
- 3. This form allows users to send their questions and inquiries in a formal way if ever they need to.
Where are you now UX Glossary?
[A-Z] UX Glossary is still going strong and doing great things in the UX world. It has even been given an official name — UX Lexicon. It has since been presented in London at the Quirks conference in February 2020 before the pandemic. And on February 1st, 2021, will be launching its first version at the Qualitative Research Consultants Association (QRCA) Virtual Conference!
Retrospective
This project was definitely an unforgettable experience; in more ways than one. And overall, I'm truly grateful to have been along for the end-to-end process — even if, at the time for me, the challenges outside of this one were many. Being able to learn, connect, and evolve with such amazing minds in such a short amount of time was truly inspiring; and has taught me a lot of lessons in my personal UX journey as well.
My team and I, along with the other amazing UXers, were able to join forces in a effort to make learning about UX Design and UX Research a simple, useful and valuable experience for all. And although our time with the project had sunsetted, my next steps would've been to:
- Add a color scheme to my final hi-fi wires (as we were instructed to keep them black & white for usability testing purposes)
- Create a clickable prototype experience to inform the user flow and to better tell the story
- To explore the options of interactivity for the flow
