FIELD NOTES
Notes on
designing
for people.
Vol I 2025-2026
Janae Thomas
Learning Experience
Designer
UX Designer
UX Researcher
Systems Thinker
-
-
-
-
PROCESS
Understand → Map → Build → Iterate
VALUES
01
02
03
Accessibility is the brief, not a footnote.
If the user has to think twice, the design
didn't think enough.
Good research means listening to the people
the data forgot.
BY THE NUMBERS
6+
500+
3
years designing experiences
learners and users served
disciplines
k-12
·
higher ed
·
freelance
courses
·
digital assests
·
training
education
·
ID
·
UX
LEARNING DESIGN
UX RESEARCH
ACCESSIBILITY
SYSTEMS THINKING
COLLABORATION
accessibility
01
02
03
← Back to UX Design
UX Design Case Study
Nostalgic Reverie
Solo designer
Spring 2025 · UX Project
Figma | Adobe Illustrator
I was tasked with bringing Benguiat to life, so I created a Typeface Specimen App (TPS).
Problem
“How would Benguiat express itself if it were turned into a UX designer?”
That was the question I was tasked with answering. I had to apply design elements such as shape, form, color, and use of space to produce a prototype. Users should be able to open the typeface specimen app, Nostalgic Reverie, and view each letter or symbol in that typeface, one at a time. As the designer of this app, I had to create a fully functional keyboard so users could see each letter and special characters in that particular typeface.
However, being brand new to the field of UX, I found designing something as complex as a keyboard unattainable when I first started the project.
Outcome
My professor’s comments on the final submission: “Your prototype features motion and interactions that are consistently applied. The solution you have designed for your TPS app is creative, unique, and it embodies the personality of the chosen typeface. Your design considers and successfully uses AA accessible type sizes and background-to-font color ratios. Awesome work on the prototype and the visual design, it’s looking really polished!”
I received a score of 93/100 on the final prototype.
Context
Research Methods
No user research was required for this project; it was more of an introduction to using the tools themselves. However, I did have to contemplate Benguiat and what type of feelings and style that typeface is meant to convey. I researched the font and learned it was created by Ed Benguiat and released by ITC in 1977. It’s a serif font with a high x-height and low-contrast, uniform strokes. It was used on the covers of many of Stephen King’s early novels and is now closely associated with horror, mystery, and retro styles, e.g., Stranger Things, Star Trek, and the Smiths’ album Strangeways, Here We Come.
Process
For the sketches, I chose multiple formats, including different layouts of the buttons and the glyph window. Some of the designs incorporated experimental keyboard layouts; for example, one had half the keys on the left side of the glyph screen and the other half on the right. Another allowed users to completely hide the keyboard, transitioning into a full-screen mode. Ultimately, I took a more traditional route, with a static keyboard at the bottom of the screen and customization buttons and dropdown menus at the top. I went with this design because I felt it was the most intuitive; users already expect a keyboard at the bottom of a screen, so they could start typing without having to learn a new layout. Considering the app’s main purpose is to view Benguiat glyphs at a large scale, I think the final design achieves that purpose efficiently and cohesively.
As illustrated in the picture, I used Figma to build the entire app. For the keyboard, each key was a component with a conditional interaction that instructed which letter should appear when the key was pressed. There were four different keyboards: lowercase, uppercase, Special 1, and Special 2, each navigable via conditionals I set for the shift key. When a key was pressed, the glyph window displayed the character. The keyboard was definitely the hardest part to get working. I had to essentially give myself a “crash course” on Figma while also learning the complexity (but usefulness!) of conditional prototype interactions.
The final TPS app has a functional character display screen. Users can use the keyboard to display each character, which appears along with the cap-height, x-height, and baseline guides. I used the guides because they connected back to my research on Benguiat. Users can also use the dropdown menu to adjust the weight. Additionally, the “Free Type” setting allows users to string together multiple characters; it works as an open-ended note and typing space without the guides.
Key Decisions
Sketching on paper. I initially sketched on my iPad. When I showed my professor some of my sketches, he suggested I try paper next time. Sketches are meant to be quick, the beginning of an idea rather than the final, and he wanted us to recognize that our designs would change many times throughout the process. Paper allows for quicker ideation, and I felt less attached to designs that took less of my time, and I eventually switched to a notebook.
Combining iterations. After completing my sketches and low-fidelity wireframes, I combined elements from my strongest iterations into a high-fidelity design and, eventually, a functional prototype. I prioritized the layout choices that applied Gestalt principles and felt most natural.
A vintage palette over horror. I wanted the app to be inviting while still conveying the font's style. A horror-themed or more "thrilling" color scheme and layout might have felt intimidating or made some users uncomfortable, so I gave the app a vintage, classic typewriter feel. The browns and beiges I chose still accurately depict Benguiat's style and evoke its timeless quality.
Usability Testing
This project didn’t include usability testing. If I were to continue it, I would test whether users find the keyboard as intuitive as I intended, whether the shift-key navigation between the four keyboards is discoverable, and whether the Free Type setting is clear without the guides.
Accessibility
Per my instructor’s assessment, the design “considers and successfully uses AA accessible type sizes and background-to-font color ratios.”
High-contrast keyboard: beige characters on black keys, at over 15:1
Readable controls and glyphs: black text on the medium brown keys and glyph window, meeting the 4.5:1 AA minimum
Distinct interactive elements: keys and buttons stand out from the background above the 3:1 minimum for UI components
Touch-friendly keys: 35 × 40px, above the 24 × 24px minimum target size
Reflection
This was my first time using Figma, and I struggled with the tool at first. Things clicked once I realized how much it has in common with Adobe Illustrator; drawing on a tool I already knew made the learning curve much easier.
The high-fidelity phase was the most daunting, but it was also where the project came together. Because I built the key elements and interactions there, including the letter display, the text input box with its blinking cursor, and the typewriter-style keyboard, translating them into the final prototype went smoothly. The real challenge was prototyping the screens themselves; making sure each one appeared and responded correctly took extra time and attention.
When I started this project, designing a fully functional keyboard felt unattainable. I now understand the complexity and the usefulness of conditional prototype interactions, and I have the knowledge to build similar products in the future.
What I Learned
This project taught me a lot about layout and what makes for good design, especially through applying the Gestalt principles we discussed that semester. It also challenged me to think critically about prototyping. At the time, I had an idea of what prototyping meant, but I didn’t fully understand it. By the end, I understood what a prototype is, how fidelity levels differ, and why prototyping matters.
This intense introduction also accelerated my skills with design tools. I quickly learned that many of them mirror one another; seeing how similar their layouts and interfaces were, because they share common design conventions, made every new tool easier to pick up.
This project marks the moment I went from an anxious beginner to a designer with greater trust in my abilities.
← Back to UX Design