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, one through line
k-12
·
higher ed
·
freelance
courses
·
digital assests
·
training
education
·
ID
·
UX
LEARNING DESIGN
ux research
accessibility
accessibility
accessibility
accessibility
01
02
03
← Back to UX Design
UX Design Case Study
Nostalgic Reverie
Solo designer
Spring 2025 · UX Program
Figma | Adobe Illustrator
Designing a typeface specimen app (TPS)
Problem
To provide a brief description of the assignment, we were tasked with designing a typeface specimen app (TPS) based on a typeface we selected. In my case, I chose ITC Benguiat. We had to apply the design principles we learned throughout the semester, such as shape, form, color, and the use of space, to produce a prototype. Users should be able to open your TPS and view each letter or symbol in that typeface, one at a time. Therefore, as designers of our apps, we had to create a fully functional keyboard so users could see each letter in that particular typeface.
However, being brand new to the program, I found designing something as complex as a fully functional keyboard very unattainable when I first started the project.
Outcome
After submitting the final prototype, I received a score of 93/100 on the project. This was a significant increase over my first microsite icon project in the course, which I scored 83/100 on.
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!”
Context
Research Methods
None — with this particular project, no research was required; it was more of an introduction to using the tools themselves.
Process
GIT 540 Typeface Persona initial sketches, each with a different layout and design. As observed, some designs incorporated design principles more prominently than others.
GIT 540 Typeface Persona high-fidelity design elements. As illustrated in the picture, the keyboard utilized conditional interactions to replicate that true keyboard responsiveness.
GIT 540 Typeface Persona final, functional prototype character display screen. Users can use the keyboard to display each character, and the dropdown menu to adjust the weight. Additionally, users can use the "Free Type" setting to string together multiple characters simultaneously.
Key Decisions
While working on these sketches, I initially did them on my iPad. I remember a discussion with my professor in which I showed him some of my sketches, and he advised me that, when it comes to sketching, I might consider doing them on paper next time. He explained that, especially in this particular project, he was trying to help us recognize that, even though we use sketches to build on the design as we continue, our design would change many times throughout the process.
After I had completed the sketches and low-fidelity wireframes, I had to choose one to translate into high-fidelity wireframes and eventually into a functional prototype. I ultimately combined elements from my strongest iterations into the fully fleshed-out design, prioritizing the layout choices that applied Gestalt principles and felt most natural to users.
I was very intentional about using a vintage, classic typewriter-type feel in my app design. That is why I chose certain browns and beiges to evoke a timeless quality in Benguiat.
Usability Testing
Accessibility
Per the instructor's assessment, the design “considers and successfully uses AA accessible type sizes and background-to-font color ratios.”
Reflection
After completing my sketches, I had to translate them into low-fidelity wireframes, and this was my first experience ever using Figma. In the beginning, I struggled to understand this new tool and its various layouts, but eventually I realized it has many elements in common with Adobe. Once I realized that much of it is essentially like Adobe Illustrator, it was much easier for me to go through and design these low-fidelity wireframes.
Although I had begun to understand how to use Figma tools effectively after completing my low-fidelity wireframes, my high-fidelity wireframes still proved daunting. During this phase, I created the basic layouts for each app screen so I could easily translate them into my final prototype when necessary. In addition, I created all the design elements, such as the letter display portion of the screen, the text input box, and the cursor blink interaction in the text box, among other key design elements. I also prototyped the keyboard and designed its layout; I aimed to give it a typewriter feel and prototyped the app itself so that every time a user taps a letter or character, it appears in the letter display.
After completing my high-fidelity wireframes, the final step in my design process was creating my fully functional prototype. Because I had designed all the key elements and interactive pieces during my high-fidelity wireframing, it was seamless to translate these elements into the finished functional prototype. Where I ran into a wall was in prototyping my screens correctly, but that took a bit more time and attention to ensure the screens appeared correctly and the interactions responded correctly within the app.
What I Learned
Through this experience, I learned a lot about design layouts and what makes for good design, especially by applying the Gestalt principles we discussed throughout that semester. Additionally, it really challenged me to think critically about prototyping within Figma. At this point, I did not have a clear understanding of what prototyping meant; I had an idea, but I didn't fully understand what people meant by it. However, through this experience, I learned what a prototype is, the difference in fidelity levels, and the importance of prototyping.
This intense introduction really catapulted my skills with design tools, as I quickly learned that many of the tools mirrored one another. Seeing the through line across all these tools, and how similar their layouts and interfaces were to one another (due to the mental models we have as designers) really helped me in my educational career.
This project marks the moment when I went from an anxious beginner to a knowledgeable designer with greater trust in my abilities.
← Back to UX Design