Christian Schaaf's Blog + Portfolio

Tag: user experience

Case Study: Designing WalletWize
Introduction

WalletWize is a financial education app designed to help Gen Z users understand and manage their personal finances. The goal of the app is to create a seamless and engaging user experience that makes learning about money feel intuitive, approachable, and empowering. To create WalletWize, our group followed the Design Sprint method developed at Google Ventures. This method is a five-day process that rapidly takes a product from idea to prototype to user testing.

For our project, we stretched the five-day Sprint into a five-week format, dedicating one week to each phase of the process. Our team collaborated virtually via Zoom and used Miro for digital whiteboarding and collaboration. What resulted was not just a prototype, but a deeper understanding of teamwork, design thinking, and problem-solving.

Design Sprint Overview

The Design Sprint is broken into five phases:

1. Map + Sketch: We defined our problem, conducted research on our target audience, set goals, and sketched potential solutions.

2. Decide + Storyboard: We used a series of voting techniques to narrow down our best ideas. From these, we created user flows and a storyboard.

3. Refine + Prototype: With our finalized storyboard, we divided tasks based on our individual strengths and built a functional prototype.

4. Test + Collect: We conducted remote user testing sessions with Gen Z participants. We gathered feedback on functionality, visual design, and user experience to determine what worked well and what could be improved.

5. Reflect + Report: We compiled our findings and insights into a final Design Sprint report and individual case studies, summarizing the project and sharing key takeaways.

Problem Statement and Research

The problem we focused on was the lack of accessible, engaging financial management tools for Gen Z. To guide our ideation process, we created the following “How Might We” questions:
- How might we engage Gen Z so they stay on our app instead of switching to another one?
- How might we make learning about money feel as addictive as scrolling through social media?
- How might we simplify complex financial concepts to make them easier and more engaging to learn?
- How might we encourage users to return and build lasting financial habits?
We also defined a long-term goal: In two years, WalletWize should help Gen Z form consistent money habits by making the app a daily or weekly routine.

To better understand our target audience, we conducted background research. We found that Gen Z:
- Relies heavily on parents for financial advice
- Consumes most content on mobile devices
- Faces increasing financial challenges including student debt and housing costs
- Spends a significant amount of time on social media
These insights shaped both our design decisions and our content strategy.

Sprint Activities

Phase 1: Map + Sketch

We began by naming the app and selecting a color scheme through voting with red dots. We chose “WalletWize” as our final name and adjusted our palette to include a bold royal blue and bright orange to appeal to Gen Z.

App Names and Color Scheme Ideas.

Next, we created a map that began with app onboarding and ended with our goal. The steps in between represented the key features and actions users would take to reach that goal, including navigating through course content, selecting topics, and engaging with rewards.

WalletWize’s User Journey Map.

We then conducted Lightning Demos. Each team member analyzed apps related to finance and education, collecting visual inspiration and discussing which features we might borrow or adapt.

Finally, we worked through the 4-Step Sketch process individually:
- Capturing notes and inspiration
- Generating quick ideas
- Exploring variations in Crazy 8s
- Creating refined solution sketches
4-Step Sketch: Part 1 (Notetaking) and Part 2 (Ideas).

4-Step Sketch: Part 3 (Crazy 8s) and Part 4 (Solution Sketches).

Phase 2: Decide + Storyboard

To narrow down ideas, we used Heat Map Voting to highlight the best elements of our sketches. Then we used Straw Poll and Supervote techniques to select our top concepts.

Each group member created a six-step user flow. We voted on the most promising user journey and then expanded it into an eight-step storyboard that showed the elements of each screen.

WalletWize’s User Flows and Storyboard.

Phase 3: Refine + Prototype

We divided responsibilities based on skillsets. Some focused on wireframes in Canva, while others built out high-fidelity prototypes in Figma. Our illustrator created visual assets, and our Stitcher ensured consistency and flow across the prototype. The prototype included interactive screens for onboarding, budgeting lessons, quizzes, and progress tracking.

WalletWize’s Wireframes created in Canva.

Final Prototype screens created in Figma. To view all final screens, click here.

Phase 4: Test + Collect

We prepared a script and conducted five remote user interviews. The sessions were recorded via Zoom. One person led the interview while others took notes.

We created pre- and post-surveys to collect demographic and usability feedback. The pre-survey gathered background information, while the post-survey measured user satisfaction and experience.

Phase 5: Reflect + Report

In our final week, we divided responsibilities to create our final Design Sprint report and individual case studies. We reflected on our learning, analyzed our data, and finalized our deliverables.

To view our group’s final report, click here.

Results and Outcomes

Our final clickable prototype of WalletWize received positive feedback from users. Participants appreciated the modern design, friendly illustrations, clear navigation, and overall user experience.

One area for improvement identified during testing was the content tab. Several users were unsure how to navigate it. A suggestion to add a FAQ button to the home screen was also noted and would be implemented in future iterations.

Overall, user feedback affirmed that our design choices were intuitive and engaging. The app met its primary goal of helping Gen Z users feel more confident in managing their money.

Pie charts based on user testing feedback.

Learnings and Reflection

The Design Sprint was an exciting challenge. It taught us how to work quickly, think strategically, and communicate clearly. We learned how to facilitate discussions, manage tasks virtually, and design with the user in mind.

Each member of our group brought unique strengths to the project, and we built a workflow that allowed us to support one another and stay organized. Conducting the Sprint virtually had its challenges, but we navigated them well using tools like Miro and Zoom.

Beyond the technical skills, we learned how to stay adaptable. Whether it was a user who couldn’t complete a task or a design that needed to be reworked, we stayed open to change and focused on improvement.

Conclusion and Next Steps

The Design Sprint was more than just a framework; it was a powerful learning experience. From problem definition to user testing, we moved through each phase with purpose and creativity. WalletWize is the result of thoughtful collaboration, honest feedback, and user-centered design.

As we look to the future, we are excited about the potential of WalletWize. With further development, we hope it becomes a trusted tool for Gen Z users who want to improve their financial literacy. The lessons we learned in this Sprint will continue to inform our approach to product design and collaboration in our future careers.
July 5, 2025
Back to Basics: Exploring Paper Prototyping for Mobile Design
An image of paper prototyping from unsplash.com.

In a world dominated by cutting-edge tools, sleek interfaces, and ever-evolving technology, it might sound odd to say this – but sometimes, the best ideas start with nothing more than a pencil and a piece of paper. Before Figma and Adobe XD, before clickable mockups and developer handoff tools, designers relied on sketching to bring their visions to life. And even now, when the digital world changes at the speed of light, there’s something refreshing, even powerful, about going back to the basics.

That’s where paper prototyping comes in. It’s low-tech, low-cost, and surprisingly high-impact. Whether you’re a seasoned designer or someone exploring UX for the first time, paper prototyping can help you unlock creative ideas and map out user experiences – without ever touching a screen.

What is Paper Prototyping?

An image of a designer creating prototypes from pixabay.com.

“Paper Prototyping: The 10-Minute Practical Guide” offers a great introduction to the concept. At its core, paper prototyping is the process of sketching out user interfaces and workflows by hand, often using simple materials like printer paper, sticky notes, and markers. Each sketch represents a screen or interaction in your digital project, giving you a clear, tangible way to map out how a user might move through your app or website.

These prototypes are considered low fidelity, meaning they aren’t functional or polished. But that’s the beauty of it – they’re fast, flexible, and easy to change. A single screen might take just five to ten minutes to draw, making it easy to explore different layouts or user flows without committing to any one direction too early. They’re also cost-effective, spark creativity, and come with a minimal learning curve, making them accessible to anyone, not just seasoned designers.

Ultimately, paper prototypes help you plan before you build. And the more solid your plan, the faster and more effectively you can move on to wireframes, digital mockups, and functional prototypes.

How to Prototype on Paper

Getting started is simple. All you need are a few household materials – paper, pens, markers, sticky notes, scissors – and your imagination.

Begin by sketching your key screens. These could include your home page, menu, or contact form. Each piece of paper becomes a screen, and you can arrange them in sequence to visualize the user journey. Think about how someone would move from screen to screen, and simulate that flow by swapping one sketch for the next, just as a user would tap through an app.

Ben Coleman’s “How to Make Paper Prototypes” suggests thinking intentionally about a few key areas:

Devices

Before sketching, identify what device you’re designing for. For my project, I focused on smartphones, which meant my sketches had a portrait orientation and dimensions that mimicked a mobile screen. It’s important to design within the constraints of your chosen device to ensure your prototypes feel realistic.

Elements

Think about how users interact with your screen elements – buttons, links, search bars, etc. In my prototypes, I highlighted all interactive elements in green colored pencil. This made it easy to identify what was tappable and where users might go next, even if the prototype wasn’t interactive in the digital sense.

Messages and Pop-up Boxes

Sometimes, your app might show a confirmation message or a pop-up. Sticky notes work great here and can be easily added or removed based on user actions. For example, when simulating a report submission, you could use a sticky note that reads “Thank you! Your issue has been submitted,” which you could place over the screen to represent the interaction.

Mobile Navigation Techniques

An example of mobile navigation from dribbble.com.

When designing for mobile, navigation is everything. It’s not just about helping users move from one page to another; it’s about making that movement feel intuitive. According to “Mobile Navigation: Patterns and Examples,” great navigation reduces friction and helps users find what they need without feeling lost.

Here are some common mobile navigation approaches:
- Top-Level Navigation: This includes hamburger menus (those three horizontal lines hiding a larger menu), floating action buttons, or tab menus at the top or bottom of the screen. Tabs are great for organizing equally important sections of your app. Top tabs are typically used for swiping between sections, while bottom tabs are often fixed and include icons for quick access.
- Card-Based Navigation: Cards display main content areas right on the home screen. They’re touch-friendly and help prioritize information visually.
- Sub-navigation: This includes dropdowns or sequential menus. When a user selects a main category, they see a submenu in its place. Good sub-navigation includes clearly labeled buttons, consistent iconography, and an easily accessible “back” option. Legible fonts and thoughtful spacing also make a big difference in usability.
All of these patterns aim to strike the right balance between simplicity and functionality, getting users where they want to go without overwhelming them.

My Project: Designing for Schuylkill Township

My paper prototype for the home screen of Schuylkill Township’s app.

For the past few weeks, I’ve been developing a companion mobile app for Schuylkill Township’s website. The goal? Make township information and services easier to access for residents on the go.

I began by creating a site map to define the app’s structure, which I updated weekly based on feedback and user needs. From there, I mapped user flows – how a person might go from opening the app to reporting a streetlight outage, checking upcoming events, or finding township contact info.

Paper prototyping was my next step. As I started sketching, I considered how users would navigate through the app and chose the following strategies:
- At the top of every screen, I included a navigation bar with two options: Home and Search. These appear consistently to help users reset or find content at any time.
- The main card-based navigation includes five core buttons: News & Alerts, Events, Township Services, Report an Issue, and About. These act as the backbone of the app, giving users direct access to essential information.
- A footer navigation offers quick access to social media, online payments, contact details, and settings.
To bring it all together, I identified four common tasks a user might complete in the app, and then created full sets of screens to show how each task unfolds – from start to finish – using nothing but pencil, paper, and a little green colored pencil.

Here’s an example of three screens for a user wanting to search for an upcoming event:

Prototypes representing the first three steps of searching for an event.

You can view my full set of paper prototypes here.

Final Thoughts

Paper prototyping may seem simple, but its power lies in that simplicity. It allows you to think deeply about user experience without the distractions of pixel-perfect design or technical constraints. By mapping out screens and interactions on paper, you’re building the foundation for a thoughtful, user-first app experience.

So, if you’ve got an idea brewing, don’t wait for the perfect tool or software update. Grab a pencil, some paper, and just start sketching. It’s easy, fun, and one of the most effective ways to bring your ideas to life.
April 13, 2025
Navigating the Flow: The Art of Crafting User Flowcharts
An example of a visual roadmap from Kelly Sikkema on unsplash.com.

Have you ever opened an app with a specific goal in mind, only to find yourself lost in a maze of menus and options? Imagine needing to quickly pay a bill through your bank’s mobile app. You expect a straightforward process, but instead, you’re met with unclear labels, hidden menus, and redundant steps. Frustrated, you either spend more time than anticipated or abandon the task altogether. Such experiences are not uncommon and highlight the critical importance of intuitive design in digital products.

These moments of frustration underscore the significance of user flowcharts in the design process. By thoughtfully designing these flows, we can create seamless experiences that guide users effortlessly toward their goals.

What Is a User Flowchart?

An example of a user flowchart from uxdesign.com.

A user flowchart is a diagram that illustrates the path a user follows to accomplish a specific task within a system. It outlines each step and decision point, providing a clear picture of the user’s journey. This tool is invaluable for designers aiming to create intuitive and efficient user experiences.

Steps to Create an Effective User Flowchart

Drawing inspiration from Camren Browne’s “How to Create a User Flow: A Step-by-Step Guide,” these are key steps to consider when creating a user flowchart:

Understand Your User

To design an effective user flow, you must first deeply understand your users. Ask questions like:
- What are the users’ needs and goals?
- What challenges do they face?
- Which features are most important to them?
- What initial questions will they have about the product?
- What is the most important information that you can provide so the user can easily interact with your product?
By answering these questions, you can identify key pathways that guide the user through your site or app in the most direct manner. Pinpointing these pathways will create user flow seamlessly.

Outline the User Flow

Browne suggests breaking the flowchart into three main stages:
- Entry Point: An entry point is where the user accesses the product initially. Websites often have multiple entry points while apps usually have limited entry points.
- Steps to Completion: Steps to completion encompasses a majority of the flow chart. These steps include login or signup screens, a home screen, and any other screen that the user passes through to complete their intended task. The goal is to keep it simple (Browne, 2022). It is important to only outline the steps needed for the user to achieve their goal.
- Final Step: This step signifies the completion of the user’s task.
Keeping this structure simple ensures clarity and ease of navigation.

Define Flowchart Elements

When creating flowcharts, designers should use different shapes and colors to represent various interface elements (Browne, 2022). Each shape illustrates an interaction and provides the reader with more information about what each step entails. Some of the most common shapes include:
- Rectangles: Rectangles usually represent a page or display screen.
- Circles: Circles are usually used for displaying an action.
- Diamonds: Coined as a “decision diamond,” this shape asks a question where the user needs to make a decision.
- Arrows: Lines with arrows indicate the direction of the user’s journey.
Refine the Outline

The strategy for designing an interface is similar to designing a UX flowchart. Browne (2022) suggests to make labels meaningful. Labels will accurately and efficiently describe exactly what the user is doing in each step of the user flow. Other tips include avoiding the use of capital letters to maintain readability and to carefully select colors for each step of the user flowchart. Color should be used as a coding system rather than for styling. Including a key or legend helps in understanding the symbols used in a user flowchart (Browne, 2022).

Applying User Flowcharts: A Practical Example

Recently, I worked on developing a companion app for Schuylkill Township’s website, aiming to centralize township information and services. After creating a site map for the website and companion app, I further explored the companion app, identifying the purpose, functions, target audience, and designing the app’s user flowcharts.

Schuylkill Hub Overview

The Schuylkill Township Logo

Purpose

The purpose of the Schuylkill Hub companion app is to provide residents with easy access to township news, events, and services, fostering community engagement. The goal is to create a space where the Schuylkill Township community can connect and find easily accessible information on the go.

Functions

The functions of the Schuylkill Hub app include:
- Make online payments.
- View the township’s most recent and past news stories.
- Check and RSVP to upcoming events.
- Request township services.
- Report issues.
- Access a directory of township contacts.
- Connect with other residents via social media.
Target Audience

The target audience for this app is residents of Schuylkill Township, particularly those frequently visiting the township’s website. This app will offer them easy access to important township-related information. The demographic data of Schuylkill Township residents are as follows as outlined by the Census Reporter:
- About 8,800 residents.
- The median age is 42, with the most populated age groups of 50-59 (19%) and 10-19 (17%).
- 51% Female and 49% Male.
- 90% White.
This app will meet the needs of its users because Schuylkill Township residents will be more informed about township events, feel more connected with their community and township leadership, access township-related information in an easily accessible and user-friendly way, make payments efficiently, and receive help when needed.

User Example Scenarios

Using the demographic information above, I crafted four user scenarios of potential Schuylkill Township residents that could use this app for different purposes.

To view all four scenarios with their respective user flowcharts, click here. Below is an example of one user scenario.

Emma’s Story and Scenario

An image of a student in a library from unsplash.com.

User Story

As a high school AP Government student in Schuylkill Township, I am about to vote in my first election and want to find local political events to get involved in. I also want to contact local elected officials.

User Scenario

Emma, 18, is a high school senior who recently enrolled in AP Government and Politics. This class has piqued her interest in politics, and she wants to learn more and become involved in her local political landscape. Yearning to gain knowledge before participating in her first election, she wants to get information about Schuylkill Township’s upcoming political events and also reach out to elected officials to establish connections. She wants to make a positive impact in her community.

Use Cases

Option 1
1. Emma opens the Schuylkill Hub app.
2. The welcome screen displays options like “Events” and “Directory.”
3. She selects “Directory.”
4. The Directory Tab appears with options.
5. Within the directory, she chooses “Elected Officials.”
6. Emma browses the list and finds contact information.
7. She uses the provided details to reach out to an official.
8. Satisfied, Emma closes the app.
Option 2
1. Emma opens the Schuylkill Hub app.
2. The welcome screen displays options like “Events” and “Directory.”
3. Emma selects the “Events” tab from the welcome screen.
4. She filters events by category and chooses “Politics.”
5. Emma browses upcoming political events.
6. She selects an event.
7. She views the event details.
8. She registers for an event of interest.
9. Emma closes the app, having achieved her goal.
Option 3
1. Emma opens the Schuylkill Hub app.
2. The welcome screen displays options.
3. Emma selects the “Events” tab.
4. She does not filter events and looks through the events calendar manually.
5. Emma clicks through monthly events.
6. She selects an event.
7. She views the event details.
8. She registers for an event of interest.
9. Emma closes the app, achieving her goal.
This structured approach ensures that Emma’s experience is straightforward and aligns with her objectives.

User Flowchart

The above flowchart depicts Emma’s journey to achieving her desired goals of attending upcoming political events and contacting local elected officials. Following Browne’s suggestions, I used these elements throughout my flowchart.
- Rounded Rectangle: Start / End
- Rectangle: Page
- Circle: Action
- Diamond: Decision
- Dotted line with arrow to show direction.
Final Thoughts

Creating user flowcharts is more than just plotting paths on a diagram; it’s about stepping into the user’s shoes and understanding their journey. By focusing on the user’s perspective, designers can craft experiences that are not only functional but also engaging and intuitive.

Reflecting on this process, I realized the importance of empathy in design. When we prioritize the user’s needs and anticipate their actions, we create pathways that feel natural and effortless. This not only enhances user satisfaction but also fosters trust and loyalty. Designing with clear user flows ensures that our digital products offer meaningful and seamless experiences.
April 6, 2025
Designing a Companion App: Putting User Experience First
Background Image of Pickering Valley Golf Course

How many apps do you use per day? Now, think about the ones you use most often. Why do you keep coming back to them? Chances are, they’re intuitive, easy to navigate, and provide the information you need without frustration. On the flip side, if an app is cluttered, confusing, or just plain frustrating, you probably close it and move on.

Designing an app isn’t just about making something look good – it’s about creating a user-centric experience where every feature and piece of content is carefully chosen. That was my challenge this week: designing a companion app for the Schuylkill Township website that balances functionality, accessibility, and ease of use.

Choosing the Right Content for an App

Not all website content needs to be included in an app. In fact, trying to squeeze too much information into an app can backfire, making navigation overwhelming. So, I started by asking myself two key questions:
1. Should all website content be available on the app?
  No. Overloading an app with too much content can create clutter and unnecessary complexity.
2. What information would be most useful to users?
  As I researched municipal apps and user behavior, I found that residents primarily use these apps to stay informed and access services quickly. The most sought-after features include news and alerts, event updates, service requests, and contact information (civiclive.com; civicplus.com; townweb.com). My goal was to strike a balance between offering essential information and keeping navigation streamlined.
Key Features of the Companion App

After considering these factors, I structured the app around a home screen and five main sections, each designed to improve user experience and efficiency:

1. Home Screen

The home screen serves as the app’s hub, featuring:
- A header with the township logo, search bar, settings for language preferences, and a ‘Make a Payment’ button.
- A background image of the township for a welcoming, familiar touch.
2. News & Alerts
- Displays recent news articles and important alerts.
- A search function to find specific articles.
- A ‘Read More’ option linking to the full website for further details.
3. Events
- A calendar view of upcoming township events.
- Ability to filter events by category (e.g., community meetings, recreational activities).
- Option to set reminders or add events to a personal calendar.
4. Township Services

This section provides quick access to essential services:
- Public Safety (police, fire department, emergency contacts).
- Trash & Recycling Schedule.
- Permits & Licensing.
- Tax Information.
5. Report an Issue
- Residents can report problems like potholes, streetlight outages, or stormwater issues.
- A category for “Other” issues, where users can write about their issue and upload an optional photo.
6. Township Directory
- Contact details for township offices, emergency services, and elected officials.
7. More
- Links to the township’s website and social media pages to encourage community engagement.
My proposed companion app for Schuylkill Township.

Click here to read more about my companion app creation.

Bridging the Gap Between Website & App

This companion app isn’t meant to replace the website – it’s designed to complement it. The website remains the primary source for comprehensive township information, while the app focuses on real-time updates and quick access to services. By strategically selecting what content to include, I ensured that the app remains lightweight, user-friendly, and functional.

Lessons Learned in App Information Architecture

This project reinforced some important lessons in mobile UX design and information architecture:
1. Simplicity is key – Overloading an app with content leads to confusion; prioritization is crucial.
2. User behavior should guide design – Understanding why residents visit municipal sites helped shape the app’s structure.
3. Navigation should be effortless – A clear, well-organized layout enhances usability and efficiency.
4. Consistency between web and app experiences matters – While the app offers streamlined content, it still aligns with the website’s overall branding and structure.
Final Thoughts

Creating this app was a fascinating dive into the balance between accessibility, usability, and design. It challenged me to think critically about how users interact with information and how to optimize their experience. By focusing on essential content, intuitive navigation, and quick access to vital services, this app aims to make township information more accessible than ever.
March 30, 2025
Building a Website is Like Building a House: The Role of Information Architecture
Image of a floor plan from pixabay.com

Imagine building a home. You carefully plan the rooms, decide how they connect, and ensure the layout makes sense. A strong foundation is key – without it, the house won’t function properly. The same applies to websites and apps. Behind every intuitive digital experience lies a well-structured system known as information architecture (IA), the backbone that keeps everything organized and accessible.

What is Information Architecture?

Information architecture is an evolving and ever-changing field that focuses on structuring and organizing content effectively within a website or app. Dan Brown, in his article 8 Principles of Information Architecture, describes key IA concepts:
- Objects: Objects on a site have discrete sets of behaviors. The content on a site is living with a recognizable structure.
- Choices: It is important to offer meaningful choices to users.
- Disclosure: Since the human brain can only process so much information at once, it is essential to practice progressive disclosure, a user interface technique that only shows the needed information first and reveals more as the user interacts with the page.
- Exemplars: Show examples of content in categories.
- Front Doors: It is important to understand that 50 perfect of site visitors will come through a different page than the home page. Take the user where they want to go but also show other related content found on the site.
- Multiple Classification: Utilize classification schemes to label site content. Don’t provide too many classifications, which can easily overwhelm the user.
- Focused Navigation: Use different navigation bars to structure content on a site, including topic navigation, timely navigation, sign post navigation, and marketing navigation.
- Growth: Design a website in anticipation of growth.
These above principles help create logical, user-friendly experiences.

At its core, information architecture defines the relationships between all areas of a site. This week, I explored two essential components of IA: site maps and navigation. While they are related, they serve different purposes:
- Site Maps: A blueprint of a website, listing all pages and their hierarchical structure.
- Navigation: The links and pathways that guide users from one page to another.
Going back to the house analogy: a site map is like a blueprint, outlining all rooms and their connections, while navigation is the hallways and doors that allow movement between them. Both are critical for a seamless user experience.

Analyzing & Reworking a Township Website

With this knowledge in mind, I analyzed the information architecture of my own township’s website – Schuylkill Township. My goal? To evaluate the current structure, identify areas of improvement, and propose a new, streamlined site map.

Step 1: Mapping the Current Site

To start, I explored the main navigation bar, footer, and subpages, taking note of structure, cohesion, and ease of access. I then created a visual site map in Canva, categorizing pages with different colors to denote their role in the hierarchy:
- Home Page
- Sections
- Pages & Subpages
- External Links
- Pages with Internal Links
The current site map for Schuylkill Township, Pennsylvania.

Step 2: Identifying Strengths & Areas for Improvement

While analyzing the site, I found aspects that worked well: easily accessible footer links and a secondary navigation bar with quick links.

However, there were also areas that could enhance the user experience:
- Sticky Secondary Navigation Bar: I proposed making the secondary navigation bar a sticky bar, meaning it remains visible as users scroll. This makes important links more accessible without excessive scrolling.
- Reworking the Government Section: The current “Government” section houses both general information about the township and official government-related content. To reduce clutter, I separated “About” into its own category, making both sections clearer.
- Adding a “News & Events” Section: Currently, news is located near the bottom of the home page, requiring users to scroll down to see updates. Many other municipal sites include “News & Events” in the main navigation menu, so I followed this best practice to improve visibility.
- Renaming and Merging Subpages: Some subpages had unclear or overly complex names. For instance, I changed “Recollections of Our Past” to “Historic Resources” to better reflect the page’s content. I also merged pages with minimal content to simplify navigation.
My proposed site map for Schuylkill Township, Pennsylvania.

Click here to see the current site map and proposed site map in more depth.

Lessons Learned from this Experience

Working on this project gave me a newfound appreciation for the complexity of website structure. At first glance, a website might seem straightforward, but behind the scenes, there are countless decisions shaping how users find and interact with content. Here are some of my key takeaways:
1. Clear organization enhances usability – A well-structured site helps users find what they need quickly and easily.
2. Naming matters – Concise, descriptive labels improve navigation and comprehension.
3. Navigation should be intuitive – If users struggle to find information, the design needs rethinking.
4. Hierarchy should be logical – Content should be arranged in a way that makes sense, both structurally and contextually.
5. Adaptability is crucial – As technology and user needs evolve, websites must be flexible enough to grow and change.
Final Thoughts

This deep dive into information architecture was both exciting and meticulous. Before this project, I had never closely examined a website’s structure or considered how sections, placement, and navigation impact user experience. By researching various municipal websites and reworking Schuylkill Township’s site map, I gained valuable insight into making digital spaces more accessible, navigable, and clear.

A well-structured website is like a well-built house – it needs a strong foundation and a layout that makes sense. By applying the principles of information architecture, we can create digital experiences that are not only functional but also intuitive and user-friendly.
March 30, 2025
Week 6: User Interface Animation
For Week 6 of Motion Across Media, I am reading about the animation process in Liz Blazer’s Animated Storytelling: Simple Steps for Creating Animation & Motion Graphics.

Reading & Writing

Chapter 10: Animate! in Liz Blazer’s Animated Storytelling focuses on bringing a story to life through movement, emphasizing the importance of intentional animation choices. In this chapter, Blazer brings together all the tips that were taught throughout the beginning sections of her book: storyboards, color scripts, soundtracks, and more. Before starting to piece together your animation, she suggests to create a production calendar to track progress and ensure deadlines are met. She states to print out a calendar, fill it in backwards starting with the final delivery date, and then work back through post-production, production, and pre-production. This will help create a realistic timeline for the project. Once this is created, the information can be easily transferred to a digital calendar that can be shared with creative partners.

Blazer highlights a few more important steps when starting an animation project, including making sure your tech equipment is up-to-date, creating simple file names to stay organized, and backing up your work consistently. Once these steps are complete, she suggests to start with the easy shots to gain confidence with the project. Since animation is a time-consuming endeavor, it is important to strategically plan out all shots before starting to avoid cutting any shots during the production phase.

Blazer also stresses the importance of strategic movement in animation. She asserts to always anticipate and follow through to help illustrate the physics of gravity on weight and movement. Composing directional movement, such as horizontal, vertical, diagonal, or circular movement, will create consistency throughout an animation. In addition, Blazer offers tips to create a visually compelling animation:
- Don’t put the subject in the center of the frame too often.
- Mix up shot lengths. Use a mix of close-up shots, medium shots, and long shots.
- Mix up shot timing. This will create different paces in your animation.
- Add blur and grain, grunge, or vignettes.
- Be flexible with the soundtrack. This could change during the production phase.
- Mute the soundtrack to check that your animation is expressive without the music or sound effects.
By reinforcing the idea that animation is storytelling in motion, Blazer guides animators to make thoughtful, impactful choices that enhance their projects.

Research to Inform

This UI GIF caught my attention because of the bright colors used in the design. I also think this showcases excellent UI design because as one section opens, the other closes. This allows the user to view the entirety of each section on the screen without scrolling.

I liked that this graphic showcases good and bad UI design. Being a beginner in UI design, it was interesting to see how little changes in movement can impact user experience. The panel on the left shows different elements moving in the same direction, while the one on the right depicts movements from many directions. It is important to be consistent in movements and not overcomplicate user interface designs.

I chose this GIF because I like the switch from blue to black. I also like the simplicity of this design. I also like that the “X” is fully animated when the blue object passes through it. This is a very intentional UI design.

I love how the paper airplane is shot off into the distance. This animation also uses the “anticipation” principle of animation by the page dragging down and then flinging up to release the paper airplane. I also like the bounce that is created after the paper airplane flies. This adds to the realism of this animation.

This animation inspired the one that I created this week. I liked the animation switching from 4 to 5 and how the 5 started upside down until the new page appeared. I also like that the envelope is static. With the paper and number both animating, adding another animation would maybe make this GIF a little too busy. The still envelope contrasts well with the movement in the rest of the GIF.

I love the morphing of the circle in this GIF. It almost creates a water-like animation where droplets of water are breaking off the big circle. I also think using the blue color adds to this effect. I also like that the three smaller circles go back into the larger circle in reverse order. This creates a nice loop in the design.

This one is definitely a more complex UI design. but I enjoyed the flow from screen to screen. I like how the animations are consistent from screen to screen, creating a cohesive user interface design. I also like the contrast of the still elements with the moving screens.

I think this UI animation does a great job of capturing a geometric theme. Each animation created in this design morphs into some geometric shape – circles, hexagons, lines, etc. Creating consistency and a theme are both important elements of UI design.

Create

User Interface Animation: Notification Bell

Above are my User Interface Animation video and GIF. I first started in Adobe Illustrator and used the pen tool to design a bell. I imported the design into Adobe After Effects and then used the ellipse tool to create the circles. I wanted to change the size of the circle for when the person “clicked” on it and used the scale tool to achieve this.

I then worked on animating the bell, and I moved the Anchor Point to the top of the bell to hopefully create a realistic back-and-forth motion of a bell. When changing the size of the bell with the scale tool, I copied the layer and moved the anchor point to the center of the bell to ensure that the size of it changed from that anchor point. It was a little tricky having two different anchor points, but with some experimentation, I think we figured it out!

For the blue notification circle, I wanted the “1” to mimic the motion of the bell to create a cohesive design. I matched the angles that the bell was moving with the “1” to achieve this effect. I also wanted to practice creating a mockup, so I grabbed an image from unsplash.com and put the animation on a phone screen.

In terms of sound effects, I used a click noise to emulate the person clicking on the icon, a ringing bell sound to showcase the bell moving back-and-forth, and a “pop” sound for when the “1” disappears. These sound effects are from pixabay.com. I also added in some happy and higher-energy background music to illustrate the excitement of getting a notification.

Overall, I thought this was a challenging project. I don’t have any prior experience with UI design, and I think I have to train my mind to think like a UI Designer. The hardest part for me was coming up with an idea for the project. I was inspired to choose this notification animation because I was looking through all the notifications on my phone, and I thought it would be a fun animation to design. I am happy with how it turned out and I’m looking forward to practicing more user interface animations in the future.
March 2, 2025