Christian Schaaf's Blog + Portfolio

Author: cschaaf933

  • Setting the Pace: How to Gear Up for a Successful Design Sprint

    Setting the Pace: How to Gear Up for a Successful Design Sprint

    In my last post, I explored how using tools like Miro and intentional introductions can help build camaraderie before your Design Sprint begins. Think of that phase as stretching before a relay race. You’ve sized up the course, you’ve met your teammates, and you’re lacing up your shoes. Now, you might be wondering: what comes next?

    Much like running an actual race, you wouldn’t step up to the starting line without knowing the course, having the right gear, and understanding who’s handing off to who. In a Design Sprint, preparation is your pre-race routine. It’s not just a warm-up; it’s what prepares your team for innovation at full speed.

    Let’s take a deeper dive into what proper preparation looks like and why it’s a game changer.

    Why Preparation Matters: The Competitive Edge

    In The Sprint Handbook: A Step-by-Step Guide to Running Innovative Sprints, Pattie Belle Hastings outlines the many benefits of preparing for a Design Sprint:

    • Efficiency & Effectiveness: A prepared team accomplishes more in less time, produces higher-quality work, and minimizes delays. Preparation leads to better output because everyone comes ready to contribute.
    • Team Dynamics: Clarity with roles and goals boosts morale. When everyone understands the playbook, collaboration flows naturally.
    • Stakeholder Relations: Early engagement builds trust and ensures stakeholders feel heard. Their input is built into the process, not added as an afterthought.
    • Risk Mitigation: Preparation allows for early problem identification and helps set predefined metrics, so you’re solving the right problems more effectively.
    • Long-Term Value: Well-prepared sprints become easier to replicate, scale, and refine. Your team develops a rhythm and learns from each iteration.

    The takeaway? Preparation isn’t just about making things run smoothly; it’s about unlocking the full potential of your team and your process.

    Building Your Dream Team

    Jake Knapp, John Zeratsky, and Braden Kowitz, authors of Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days, describe the role of a Sprint team:

    “A sprint resembles that perfectly orchestrated heist. You and your team put your talents, time, and energy to their best use, taking on an overwhelming challenge and using your wits to overcome every obstacle that crosses your path.”

    To pull off this “heist,” you need the right crew. A sprint team should be small but mighty with seven members or fewer. Each person should bring a unique skillset and perspective. Here are some key roles to fill:

    • Decider: The final call-maker. Often a CEO, product manager, or team lead.
    • Finance Expert: Knows the budget and where resources come from.
    • Marketing Expert: Shapes messaging and brand voice.
    • Customer Expert: Brings the user’s voice to the table.
    • Tech Expert: Understands feasibility and builds logistics.
    • Design Expert: Brings ideas to life through visuals.

    Most importantly, ensure everyone knows their role. A well-rounded, cross-functional team makes for a powerful and efficient sprint.

    Creating Structure: Rules, Schedules, and Space

    Once your team is set, establish a few ground rules. One suggestion? A “No Devices” policy. Encouraging participants to silence phones and limit distractions can help keep focus sharp. If everyone agrees on expectations, it’s easier to stay on track.

    Next, block off time. Design Sprints require energy, and fragmented schedules create barriers for momentum. As the authors of Sprint emphasize:

    “Sprints require energy and focus, but the team won’t be able to give that effort if they’re stressed out or fatigued.” – Knapp, Zeratsky, & Kowitz

    Dedicate six focused hours a day for five consecutive days. This window keeps energy levels high and decision-making tight. A time-boxed format also reduces the chance of getting stuck in the weeds.

    Supplies & Tools: Your Sprint-Day Kit

    Whether you’re sprinting in-person or virtually, having the right tools is crucial. Hastings and Knapp both recommend purchasing whiteboards, which are great for mapping and collaboration. Securing sticky notes and using colors to sort ideas is a fun and effective way to organize ideas. Who doesn’t love color coding? Timers will keep everyone accountable and help team members stay on track, and moveable furniture encourages physical collaboration and flexibility. Also, don’t forget some healthy snacks to help fuel the brain!

    Conducting a virtual Sprint? Platforms like Miro and Google Docs allow participants to edit documents simultaneously, helping the team visualize their work and make decisions in real time. Using quick capture video tools like Loom or Descript will create more visual aids and supercharge productivity.

    These tools might seem small, but they support a smooth, distraction-free environment where your team can focus on creating solutions.

    Final Prep Steps: Checklists and Communication

    Want to know one of the best tips from Hastings? Create a checklist to confirm the essentials:

    • Who is the Decider and will make the final decisions?
    • What’s the topic or challenge?
    • Where and when will the Sprint happen?
    • Who’s participating?

    Also, don’t overlook the power of communication. As Hastings writes:

    “Effective pre-Sprint communication sets the stage for successful outcomes. Your team will appreciate clear, engaging, and informative communication before the Sprint begins…you’ll build a well-organized, focused, and engaged team that’s ready to tackle the challenges ahead.”

    Set up a shared, collaborative document with background research, the schedule, and access to all necessary tools. Before the Sprint, hold a debrief meeting to go over expectations, answer questions, and align the team.

    What This Looked Like For Me

    My group’s shared Miro board outlining our Design Sprint rules.

    This week, my team and I had our first virtual meeting in preparation for our Design Sprint challenge. We’re new to this process, so there were a few hiccups, but that’s okay.

    We shared backgrounds and skillsets, identified our roles, and created a shared Google Doc and Miro board. These spaces helped us capture ideas, questions, and progress. Most importantly, we fostered an open environment where everyone felt heard. We experimented with templates, asked questions, and embraced the learning process.

    Perfect? No. Productive? Absolutely. And that’s the point! Don’t get discouraged if your first session isn’t “perfect.” Buckle up, embrace the imperfect, and enjoy the ride.

    Final Thoughts

    Here’s your final reminder: Prep. Prep. And more prep. Design Sprints move quickly. If you invest time upfront and choose the right people, set clear expectations, and gather tools, you’ll create an environment for a smooth, creative, and productive experience.

    Your Design Sprint is about to begin. Are you ready?

    Stick around as I continue documenting this journey. Next up, we take off sprinting!

  • Ready, Set, Sprint! A Guide to Preparing for a Design Sprint

    Ready, Set, Sprint! A Guide to Preparing for a Design Sprint

    Lining up at the start of a race, shoes double-knotted, heart racing, playlist queued. You’ve trained, fueled, hydrated, and mentally prepped. Everything’s ready because you know that when the sprint begins, there’s no time to second-guess. As a runner, I’ve learned that success doesn’t come from the starting gun. It comes from the work you put in beforehand.

    And that’s exactly how a Design Sprint works. No sneakers required.

    Just like a real sprint, preparing for a Design Sprint takes intention, strategy, and teamwork. Without proper preparation, the five-day process can feel chaotic instead of creative. With the right foundation, it’s a fast and focused way to solve big problems, prototype solutions, and gain meaningful feedback before investing time and money into full execution.

    Before we dive into how to prepare, let’s make sure we’re clear on what a Design Sprint actually is.

    So, What is a Design Sprint?

    Originally developed at Google Ventures, a Design Sprint is a five-day, structured process created to rapidly ideate, prototype, and test ideas. In Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days, Jake Knapp, John Zeratsky, and Braden Kowitz break down this method:

    • Day 1: Understand and Define – Identify your long-term goal and clarify the problem to solve.
    • Day 2: Diverge – Sketch ideas individually before sharing with the group.
    • Day 3: Decide – Narrow down ideas and storyboard the best ones.
    • Day 4: Prototype – Build a quick, realistic version of the solution.
    • Day 5: Test – Gather feedback from real users to inform next steps.

    Pattie Belle Hastings, in The Sprint Handbook: A Step-by-Step Guide to Planning and Running Innovation Sprints, describes the Design Sprints as:

    “A human-centered approach to problem-solving that inherently promotes experimentation, embraces failures as learning opportunities, and encourages a deep understanding of ambiguity.”

    Design Sprints help you move quickly while staying focused, efficient, and user-centered, but they only work if you’re properly prepared.

    How do you set the stage for a successful and productive sprint?
    (Hint: it starts before Day 1.)

    Assembling the Right Team

    Just like a relay team needs a strong mix of speed, endurance, and strategy, your sprint team needs a balance of skills and perspectives. According to Knapp, every sprint should include:

    • The Decider – the final decision-maker.
    • The Facilitator – keeps the team on track and energized.
    • The Designer – visualizes and prototypes ideas.
    • The Voice of the Customer – represents the user’s perspective.

    A good way to match people to these roles? Try building a Personal User Manual.

    “Personal User Manuals are most effective when they are short, succinct, and scannable. Ideally they should fit on a single page and the text should be active and engaging.” – Anna Brown

    In her article “What is a Personal User Manual?,” Anna Brown explains that these one-pagers include your background, working style, communication preferences, strengths, and even what frustrates you. It’s a powerful tool for fostering empathy and building psychological safety on a team, which are both crucial for Design Sprints to thrive.

    In “A Personal User Manual for Working With Me,” Luke Thomas adds that user manuals help accelerate relationship building with your team while reducing ambiguity at work. Not sure where to start? Try Thomas’s suggested prompts like:

    • “An ideal day at work is…”
    • “My superpower is…”
    • “How I like to give and receive feedback…”

    For inspiration, take a look at a section of my personal user manual below that I created on Miro.

    Choosing the Right Challenge

    Once your team is in place, the next step is defining the challenge. And no, it shouldn’t be a safe or easy one. Knapp encourages teams to “go after their most important problem…don’t go for the small win” (Knapp, 2016, p. 27).

    Design Sprints are built to tackle tough questions: the ones that carry risk and reward. Think of it like choosing to run a marathon instead of a 5K. The stakes are higher, but so are the breakthroughs.

    Focus on the problem that will make the biggest impact, even if it feels daunting. The structure of the sprint gives your team the support to take bold leaps.

    Why Sprint?

    Still wondering why you’d take the time for a Design Sprint? Hastings outlines several benefits:

    • Speeds up product development
    • Builds collaboration across teams
    • Surfaces user feedback early and often
    • Drives better decision-making
    • Boosts morale and creativity

    Design Sprints encourage experimentation without fear. They give you a playground to test ideas and fail forward before stakes get too high.

    Final Thoughts

    Design Sprints might not require running shoes, but they do require preparation and a strong sense of direction. Much like training for a real race, the goal is to do the groundwork before the big event, so that once you start, you can focus on performance, not uncertainty.

    So lace up (figuratively), build your team, write your user manuals, identify your mountain to climb, and when you’re ready…sprint.

  • Bringing Ideas to Life: The Power of High-Fidelity Prototyping

    Bringing Ideas to Life: The Power of High-Fidelity Prototyping

    Low- and high-fidelity prototyping from The Product Manager.

    Have you ever looked at a mobile app and thought, “How did someone design this?” Behind every polished interface is a long journey of research, ideation, testing, and lots of prototyping. During my recent experience designing a companion app for Schuylkill Township’s website, I discovered how high-fidelity prototyping transforms concepts into tangible, testable designs. Let’s walk through what I learned and why fidelity in prototyping matters more than you might think.

    Understanding Prototype Fidelity: Low vs. High

    Not all prototypes serve the same purpose. When I first started this project, I didn’t realize that “prototyping” could look so different depending on the stage of design. In her article Low-Fidelity vs. High-Fidelity Prototyping: Key Differences Explained, Iulia Sorodoc describes that fidelity in prototyping is measured across three levels: low, medium, and high.

    Low-Fidelity Prototypes

    Low-fidelity prototypes are simple, often hand-drawn sketches. They focus on layout and flow rather than visuals or interactivity, making them perfect for early-stage brainstorming. Low-fidelity prototypes are quick and inexpensive to produce, making them ideal for early-stage design. However, they have some drawbacks: they offer limited interactivity, don’t closely resemble the final product, and can make it harder to gather meaningful user feedback.

    An example of low-fidelity prototyping from my project.

    Medium-Fidelity Prototypes

    Medium-fidelity prototypes offer more accurate layouts, include some user interface (UI) elements, and may have basic interactive components. They strike a balance between realism and flexibility.

    An example of medium-fidelity prototyping from mentormate.

    High-Fidelity Prototypes

    High-fidelity prototypes, on the other hand, are polished and realistic. They replicate the final product as closely as possible with detailed visuals, real content, and full interactivity. They take longer to build, but the payoff is in their ability to simulate the real user experience.

    An example of a high-fidelity prototype from my project.

    The level of fidelity you choose depends on where you are in the process and what kind of feedback you’re looking for. In the early stages, rough sketches suffice. But as you move closer to development, a more refined prototype is key to gathering accurate user feedback.

    Prototyping Tools for UX Designers

    When it comes to choosing the right prototyping tool, there’s no one-size-fits-all answer. As Fahim Bin Omar outlines in his article Best Prototyping Tools for UI/UX Designers – How to Choose The Right One?, your ideal tool depends on a few important factors, including your design goals, the complexity of the project, the level of fidelity you need, how well the tool supports collaboration and feedback, its compatibility with other software you use, and device support and accessibility.

    Popular Prototyping Tools to Consider

    There are many programs that UX/UI designers use to create interactive prototypes. Some of the best include:

    • Figma: A cloud-based favorite among teams for its real-time collaboration features and comprehensive prototyping tools.
    • Marvel App: Known for its user-friendly interface and ease of turning static designs into interactive prototypes.
    • Adobe XD: Great for those already in the Adobe ecosystem, offering seamless integration with other Creative Cloud tools.
    • Sketch: A powerful Mac-based design tool with an intuitive interface and a wide range of plugins.
    • Proto.io: Lets you create realistic, code-free prototypes right in your browser with a simple drag-and-drop interface.
    • Webflow: A unique option for those who want to build responsive web prototypes with real HTML, CSS, and JavaScript output.

    Whatever you choose, make sure it aligns with your needs. Remember: The user always comes first. The right tool should help you design for clarity, accessibility, and ease of use.

    My High-Fidelity Prototypes

    For this project, I used Adobe Creative Suite to design the visual elements of my prototype and then brought it to life interactively using the Marvel App. Since I already had a subscription to Adobe and was familiar with both tools, I was able to focus more on creating a seamless and user-centered experience.

    While I explored several platforms, Adobe and Marvel gave me the flexibility and control I needed to produce a highly usable and visually engaging prototype. View the video below as I walk through each prototype I created for the Schuylkill Hub app.

    Changes from Low- to High-Fidelity Prototypes

    Once I began user testing last week, it became clear that a few areas of my prototypes needed improvement. One of the most notable pieces of feedback was confusion between the “Contact” and “Township Services” sections. Users weren’t sure where to go for help.

    To fix this, I combined both into a single, clearly labeled section: Contact Township. This new layout provides an easy-to-navigate overview of township services along with direct contact options for each department, improving both clarity and accessibility.

    I also made several updates to the footer navigation based on additional user feedback:

    • Added “My Account” and “Settings” so users could access personal information and preferences quickly.
    • Included labels beneath icons to make navigation more intuitive.

    In the News & Alerts section, I implemented several new features:

    • A top bar for urgent alerts.
    • A personalized “Suggested for You” section.
    • An “Archived Articles” button for past content.

    To make the prototype feel authentic to the township, I included local events and headlines, and built out supporting features such as a search bar, an ‘About’ section, and a ‘My Account’ page.

    Click here to view each step of the process of creating the Schuylkill Hub app.

    Reflection

    If there’s one thing I’ve learned from this project, it’s that prototyping is where ideas truly start to take shape. From low-fidelity sketches to interactive high-fidelity designs, each version helped me refine my app’s user experience through iteration and feedback.

    In the early stages, my low-fidelity prototypes were just simple outlines that mapped out the app’s basic structure and flow. These were invaluable for quick brainstorming and helped me think through how users would navigate the app. Because they were easy to change, I could revise layouts based on feedback without feeling too attached to one idea.

    As I moved into medium- and high-fidelity prototypes, the process became more detailed and intentional. Visual hierarchy, color palette, typography, and real content began to shape a more complete picture of the app.

    Looking back, I now see prototyping as a form of communication — a way to translate abstract ideas into something tangible, testable, and ultimately user-centered. It’s not just about making things look good; it’s about making things work well for the people who use them.

    I’m walking away from this project with a much deeper appreciation for prototyping as an essential part of the UX design process. The experience has taught me to approach every project with curiosity, openness to feedback, and a commitment to designing with the user in mind.

  • User and Usability Testing in Action: When Feedback Meets Design

    User and Usability Testing in Action: When Feedback Meets Design

    An image of a sticky note reading “Run a Usability Test” from Unsplash

    What better way to get feedback on your design than from the people who’ll actually use it?

    When I first started designing paper prototypes for a township app, I thought I had considered everything. Clean design? Check. Clear navigation? Of course. Useful features? Absolutely. It wasn’t until I sat down – virtually – with my sister and mom that I realized how much more I had to learn. The way users interact with your product can be eye-opening, informative, and one of the most exciting parts of the design process.

    This post is a deep dive into my own experience conducting user and usability testing: what these terms mean, how to prepare for testing, and what I learned when I watched real people click through my proposed app.

    What are User and Usability Testing?

    At first glance, “user testing” and “usability testing” sound interchangeable, but they have distinct goals.

    User testing is a process where real users interact with a product while designers observe and analyze their behavior. It is about understanding people: their needs, expectations, and behaviors. It helps you figure out if your product concept makes sense to your audience. Usability testing, on the other hand, is a specific type of user testing. It evaluates how easily users can navigate your product and accomplish key tasks (Strba, 2024). This will help designers identify hidden opportunities and generate new ideas in a quick and easy fashion.

    Both forms of testing are essential. Together, they offer a full picture of what’s working, what’s not, and what could be better.

    Tips for Testing Paper Prototypes

    An image of testing and comparing paper prototypes from Interaction Design.

    When you ask someone to review your prototypes, you’re not just asking them to test your design – you’re inviting them into a conversation.

    To make that conversation effective, users need context. In “User Testing Your Paper Prototypes,” Andrew Smyk emphasizes that users must understand the tasks they’re expected to complete. That clarity helps eliminate unnecessary confusion and ensures that any struggles they encounter are due to the design and not a lack of explanation.

    One tip that stuck with me is to avoid vague labels and features. If something is labeled “Category 1” or “Button A,” users won’t know what it means. That confusion clouds the testing results.

    It’s also worth being mindful of user behavior beyond words. Long pauses, puzzled expressions, or hesitant mouse movements can reveal uncertainty even when users say, “Yeah, I think I get it.”

    And lastly, don’t wait until your product is polished to test it. The earlier you gather feedback, the more room you have to fix issues without derailing the whole design process.

    Writing Effective Task Scenarios

    If usability testing is about watching users complete tasks, then writing those tasks well is key to receiving meaningful feedback.

    In “Writing Good Task Scenarios for Usability Testing,” Teng states that scenarios should be written like real-life goals, not instructions. Task scenarios help participants focus on what they need to accomplish, not how to do it. It’s the difference between saying “Find the registration form for your child’s summer camp” versus “Click the registration button.” The former helps users act naturally and reveal how intuitive your design really is.

    I tried to follow these principles by using familiar language, staying concise, and giving each scenario a bit of personality so users could imagine themselves in the situation.

    Good task scenarios aren’t just technical – they’re human. They give users a reason to care and something to solve.

    View My Task Scenarios and User Testing Script

    My User Testing Experience

    My design of the home screen for the Schuylkill Township companion app.

    In preparation for my user testing experience, I used the Prototyping on Paper (POP) app by Marvel to make my designs interactive and share them with the users.

    View My Interactive Paper Prototype

    To test my paper prototypes for a companion app for Schuylkill Township, I wanted participants who would find the content relevant. I chose two family members: my sister and my mom. They both represent two different age groups of residents who currently live or have lived in Schuylkill Township. Selecting family members could have drawbacks, such as bias in feedback, but I told them to provide honest, constructive suggestions for my designs.

    We conducted our sessions over Zoom. I asked a few warm-up questions to get a sense of how they typically use technology and then guided them through a series of four tasks using screen share. After each task completion, I asked for feedback. This gave me the opportunity to receive suggestions in real-time.

    The results? They gave me a lot to think about!

    User 1: My Sister

    A video of the full user testing experience with my sister.

    As a tech-savvy user, it was important to test the app with someone in my sister’s age category to ensure it resonated with a younger audience. View the video above to watch my sister navigate through each proposed task.

    User 2: My Mom

    A video of the full user testing experience with my mom.

    As someone who doesn’t use their phone or technology often, it was essential to test my app with someone like my mom to guarantee that other users who might struggle with technology could successfully and effectively use the app. View the video above to watch my mom navigate through each task.

    View My Full User Testing Documentation

    My Insights from Testing

    This was a beneficial experience highlighting both positive design elements and areas of improvement. One unexpected issue? The prototype images I uploaded into POP still had a phone case design around them. When viewed on a real phone, it looked like a phone inside a phone. This threw off both users, and I’ll definitely avoid that visual redundancy next time.

    Task 1: Search for, Register, and Pay for an Event

    Both participants easily located the “Events” button on the homepage, which was a great sign that the navigation is intuitive. My sister moved through the process quickly – she found the event listings, clicked “Buy Tickets,” completed the payment process, and returned to the home screen with no issues. Her one suggestion was to replace placeholder labels like “Category 1” and “Category 2” with actual event category names to provide better clarity when searching for an event.

    My mom also found the “Events” section without issue but got a bit confused when it came to registering. In the task scenario, I had used the word “register” instead of “book,” which led her to hesitate at the “Book Tickets” button. This was a valuable reminder that word choice matters in task descriptions. It’s important to align the language in the scenario with what’s reflected in the interface to avoid confusion.

    Task 2: Search for an Article and Download It

    My sister again moved through this task seamlessly. She located an article, downloaded it, and suggested a helpful feature idea: adding an “Archives” section alongside “My Saved Articles” so users can revisit older content more easily.

    My mom completed the task as well, but paused when she reached the icons for downloading and bookmarking. She wasn’t familiar with what the download or bookmark symbols meant and asked for clarification. This feedback made me realize that relying solely on icons may not be accessible to all users. Moving forward, I may consider adding text labels next to the icons or using tooltips to provide context.

    Task 3: Sign Up for an Account and Report a Pothole

    This task was structured as “Sign Up for an Account and Report a Pothole.” This may have unintentionally confused my sister and mom because users are prompted to sign up/login after clicking the “Report an Issue” button, not before. They both first looked for a “Sign Up” button before clicking “Report an Issue.” In the future, I’ll adjust the task description, or possibly the app flow itself, to better match user expectations.

    That said, both participants successfully navigated to the “Report an Issue” section. My sister completed the steps quickly and suggested adding confirmation text after submission to let users know their request was received and that updates would be provided. My mom took a little longer at the dropdown menu used to categorize the issue, but once she oriented herself, she was able to complete the task as well. The overall takeaway? The flow works, but clarity and reassurance can make the experience smoother.

    Task 4: Contact the Police Department

    This was the task where both users stumbled, and as a result, it became one of the most valuable tests. I had intended for users to click the envelope icon in the footer navigation, which represents the “Contact Us” section. However, both users initially went a different route.

    My sister clicked on “Township Services,” expecting to find police contact information there. When it wasn’t what she expected, she found her way to the envelope icon and completed the task. My mom followed a similar pattern: first trying “Township Services,” then checking “Report an Issue,” and then eventually locating the “Contact Us” section.

    This consistent behavior pointed to a larger design issue: the “Contact Us” option isn’t as visible or intuitive as it needs to be. A clearer label or more prominent placement could make all the difference. I’m considering merging “Township Services” and “Contact Us” into a single section, or at least renaming them to better reflect the types of content each one holds. Small changes like these can significantly improve the user experience.

    Final Thoughts

    Design is a conversation, not a monologue. No matter how good your product looks or how clearly you think you’ve labeled everything, you won’t really know how it works until someone else tries it.

    User and usability testing opened my eyes to how people interpret, navigate, and occasionally struggle with a design. It reminded me that great design isn’t just about what we create – it’s about how people experience it.

    If you’re working on a prototype, test it early, test it often, and most importantly – listen. Your users will give you valuable feedback to improve your app and enhance each user’s experience.

  • Back to Basics: Exploring Paper Prototyping for Mobile Design

    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.

  • Navigating the Flow: The Art of Crafting User Flowcharts

    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.

  • Designing a Companion App: Putting User Experience First

    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.

  • Building a Website is Like Building a House: The Role of Information Architecture

    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.

  • Unlocking Creativity: Exploring the Ideation Phase in Design Thinking

    Unlocking Creativity: Exploring the Ideation Phase in Design Thinking

    Creating an App: The Beginning Phase

    This week, I was presented with a thought-provoking question: How do you create an app? And where do you start? As part of my graduate class on Ideation, Prototyping, and Testing, I was challenged to explore the beginning stages of app development. Until now, I had never considered creating my own app. Faced with this creative challenge, I wondered: Where do I begin?

    I started by diving into the Ideation phase of the Design Thinking Process. This stage is all about generating ideas – the good, bad, and everything in between – to identify potential solutions to a problem. Through research, I discovered various Ideation techniques, including Brainstorming to Worst Possible Idea to Mind Mapping, and more. Ultimately, I decided to experiment with three techniques: Braindumping, Mind Mapping, and Sketchstorming. Here’s how each method shaped my app idea.

    My Ideation Phase of Creating an App

    Braindumping: Getting Every Idea on the Table

    I began with Braindumping, a technique that involves writing down ideas freely without judgment or filtering. Using sticky notes, I jotted down responses to key questions: What are my interests? What do I look for in an app?

    This exercise helped me identify four core interests: running, traveling, food, and dancing. I then brainstormed potential apps for each category.

    • Running: A platform to connect with local runners or a personal coaching app.
    • Dancing: A virtual dance studio offering live and pre-recorded lessons.
    • Traveling & Food: An app that helps users find restaurants based on dietary preferences and allergies.

    One idea resonated with me the most: an app that combines food and travel to help users find restaurants based on dietary restrictions. This concept stemmed from a personal experience with my mom; she follows a gluten-free diet and often struggles to find suitable dining options. With this in mind, I moved to the next phase: expanding the idea through Mind Mapping.

    Mind Mapping: Structuring the Concept

    To further develop my idea, I created a Mind Map, a technique where a central theme branches out into subtopics and related concepts. At the center of my map was the core idea: A restaurant-finding app for dietary preferences. From there, I created branches to explore the app in more detail:

    • App Features
    • Pages/Tabs
    • Goals

    Mind Mapping allowed me to see the app’s potential features at a glance, providing clarity on what to include in some potential mockups. This led me to explore the Sketchstorming technique.

    Sketchstorming: Bringing the Idea to Life

    Sketchstorming involves quick, rough sketches to conceptualize a product’s interface and layout. I began by sketching the app’s landing page and main tabs:

    • Profile: Where users input their dietary restrictions.
    • Search: A customizable restaurant-finding tool.
    • Translation: A language-assist feature for travelers.
    • Community: A space for users to share restaurant recommendations.

    Sketching helped me visualize the user experience, making the app feel more tangible. I realized that combining ideation techniques – starting broad with Braindumping, refining ideas through Mind Mapping, and visualizing them with Sketchstorming – was instrumental in shaping my concept.

    Reflections and Next Steps

    This was my first time formally using the Design Thinking Process, and it was both challenging and rewarding. By exploring multiple ideation techniques, I gained a deeper understanding of how to refine an idea and bring it to life. Moving forward, I’m excited to continue to study the Design Thinking Process.

    Have you ever used an Ideation technique? I’d love to hear how you approach creative problem-solving!

  • Module 7: Advanced Motion

    Module 7: Advanced Motion

    For this last module, I explored advanced animation techniques and worked on the final project for “Motion Across Media.”

    Reading & Writing

    This week, I read Chapter 11, “Show and Tell,” in Liz Blazer’s Animated Storytelling: Simple Steps for Creating Animation & Motion Graphics. This final chapter focuses on strategies for effectively sharing and promoting animation projects. She provides steps to make your project stand out among others. In prior chapters, Blazer described how to tell a story in an animation project, and now it’s time to tell the story of the animation project.

    1.) Package Your Project: Animators must package their project in a professional way. The following steps will ensure that your audience has everything they need to view your project and consider it for awards:

    • Upload a password and share a workable link. The favorite service for uploading videos that are password protected is Vimeo.
    • Design a clean logo for the title of the project paired with a still photo from the film that captures the essence of the project.
    • Write a concise, clear description of the project that is one to two sentences in length. This hook will be used on other publications referring to your project.
    • Create a memorable, eye-catching, thought-provoking tagline to make your film stand out.
    • Write a director’s bio that is short and sweet. This can include what you want to be known as professionally. It should list your professional title and accomplishments that support that role.
    • Write the story of your film: Why did you want to make the film? Why did you feel a need to share this story? What was the process of making this film? Make sure to include both mistakes and triumphs.

    2.) Determine Where to Show Your Film: Head back to your creative brief to remind yourself who the film is intended for, and this will help you select your audience and proper film festival for the film.

    3.) Consider Skipping the Film Festival Route: Blazer suggests that film festivals are not for everyone. Other alternatives include directly releasing the project on platforms like Vimeo. Releasing it online could help get quicker feedback and inspire ideas for your next animation adventure.

    4.) Create Your Network: Having a positive brand on the Internet is essential for filmmakers. Join online communities for designers, filmmakers, and artists. Talk to them. Share your work with them. Be inspired by them. This can form real relationships and help build connections for the future. It is also important to be supportive of other people’s work. Be present and engaged. Be a good audience. Make your brand known, but don’t overdo it. It is important to be selective. Mix up self-promotion and other types of posts. Tease your work, but don’t give away the whole story in the post. This will entice your audience to view your project. Finally, it’s essential to network in person. Establishing these connections are vital for success in the animation/filmmaking industry.

    5.) Share and Repeat: Be as professional as possible when sharing your work. Once you share one project, start with the next. Continue to sketch, storyboard, write, and animate new projects. The sky is the limit!

    As I reflect on this class, I am so happy with what I learned throughout these seven weeks. Coming into this class, I had no prior knowledge or experience with animation. From reading Liz Blazer’s book, I now know the essential steps in creating animation projects, from research and storyboarding to production to editing and packaging the video. It’s amazing what you can learn over seven weeks.

    I learned how to animate in Adobe Photoshop, Animate, and After Effects. I also learned how to design a project in Illustrator and import that project into After Effects. I discovered how to create keyframes in After Effects, create my own animations manipulating the Opacity, Position, Anchor Point, and Scale of an object, and how to import music and sound effects into After Effects.

    I also learned how important it is to plan out the project – the script, the music, the visuals, etc. If you are diligent in the pre-production phase, it makes the production and post-production phases much easier. It’s very interesting how each element of a story – the words, the art, the music – can all work together to create a beautiful piece.

    I am grateful for the knowledge I have gained, and I hope to continue to experiment with these programs in the future. I want to use After Effects when creating promotional videos at my current job to hopefully elevate the quality and creativity of these creations. I hope that animation will be a part of each step of my career.

    Research to Inform

    1.) Chroma Keying

    This is an example of Chroma Keying as the green screen is replaced with an image in the background. I thought this was a good example because the picture chosen for the background is relevant to the movement of the subject. It reminds me of someone dancing on Broadway in New York City.

    2.) Ken Burns Effect

    This YouTube video showcases the Ken Burns effect by adding movement to still photographs of Glacier National Park. I love this effect as it adds realism to the photos. It makes me feel like I am there walking on the trails and hiking the mountains. Adding this movement to still pictures creates a very interesting effect as I feel I am transported to the setting of the photo.

    3.) Motion Tracking

    Motion Tracking refers to digitally recording and following the movement of an object. In this example, the human’s movements on the left are being tracked by technology to create the animated figure on the right. I thought this was a very accurate example of how motion tracking would look. The movement is very realistic and matches well with the actual movement of the person.

    Create

    My Running Journey

    For my final project, I decided to create a video similar to the “Self-Introduction” video format because I really enjoyed creating that project! My goal was to illustrate my running journey from when I started running to the present. In this project, my goal was to incorporate multiple animation techniques that we learned throughout the class, including:

    1.) An Advanced Animation Technique: I chose to try out the “3D in After Effects” technique and manipulate a 2D photo. I chose a photo of my dad and I when I first started running. It was a little tricky to do this technique with that photo because his head is somewhat cut off in the photo, and rotating it too much would have revealed that, but I am happy with how it turned out! I definitely want to experiment more with this technique.

    2.) Creating shapes/lines with the line tool in After Effects. I utilized this strategy to create the “hill” animation when I talked about the hilly cross country course. I also used this when illustrating the length of a 100 meter race on a track. It was fun to experiment with trimming paths to create these animations.

    3.) Classic animations in After Effects, using keyframes to change Opacity, Scale, Rotation, and Position. I feel a lot more comfortable now creating keyframes and working with these animation options.

    4.) Using sound effects and background music. I added a typewriter sound effect at the beginning of the video when I chose the typewriter text animation. I also added a heart beat to the heart animation to further showcase that my love for running was expanding in high school.

    5.) Using the “squash and stretch” animation principle on the location symbol. I wanted to utilize at least one of the animation principles throughout this project.

    I also wanted to create a consistent color palette throughout the video, so I chose a blue/green color, wrote down the HEX and RGB codes, and used those codes throughout the project. I hoped to create a consistent and coherent video that used the same colors and fonts from start to finish.

    I have thoroughly enjoyed this class. Coming in with no animation experience, I am so grateful for all of the techniques I learned. I’m excited to continue to experiment in these programs and explore more advanced animation techniques in the future.