four mobile phones displaying hiking log, park detail, parks list, and parks map screens of the Minnesota Hiking Club app in front of a green collage background of hiking photos

<div class="proj-author">

    <div>
    <h6>Team</h6>
    <p>Small Group</p>
    </div>

    <div>
    <h6>Role</h6>
    <p>UX Research & Design</p>
    </div>

    <div>
    <h6>Date</h6>
    <p>May 2022</p>
    </div>

    <div>
    <h6>Timeframe</h6>
    <p>4 Weeks</p>
    </div>
 
    <div>
    <h6>Client</h6>
    <p>Curriculum</p>
    </div>
   
</div>


<img src="{{ heroImg }}" alt="{{ cardImgAltText }}" class="proj-image-full"/>


<div class="proj-overview">

    <div class="text-wrapper">
    <div>
    <h3>Challenge</h3>
    <p>Members of the MN Hiking Club are currently logging their hikes manually in a paper booklet. Because they are conducting their own trail research and searching for hike inspiration on multiple platforms, they lack a streamlined recording and planning process.
</p>
    </div>
    
    <div>
    <h3>Solution</h3>
    <p>We believe that a Hiking Club app would offer an accessible, real-time, and motivating way for Hiking Club members to record and revisit their Minnesota State Park hikes, as well as redeem rewards for earning Hiking Club trail mileage.</p>
    </div>
    </div>

</div>

<div class="proj-margin">

    <h3>The Minnesota Hiking Club</h3>

    <p>Membership in this club offers anyone incentive to hike all of Minnesota’s 70+ state parks. Here’s how it works:</p>
        <ol>
            <li><strong>Choose your hike.</strong> Find the designated trail in any of Minnesota’s state parks.</li>
            <li><strong>Find the password.</strong> Find a sign halfway through your hike with a unique password to remember.</li>
            <li><strong>Update your log.</strong> Record the password, state park name, and trail mileage in your Hiking Club booklet.</li>
        </ol>
    <p><strong>Earn rewards!</strong> Present your log at any state park office to get patches and free nights of camping.</p>

    <figure><img src="hiking-club.jpg" alt="worn cover and inside spread of the MN Hiking Club booklet, a sign displaying a unique password screwed to a crooked trail post, and colorful patches representing each mileage milestone in this club" /><figcaption>Join the MN Hiking Club and record your state park hikes in this booklet to earn rewards.</figcaption></figure>


    <h3>Project Goals</h3>
    
    <p>When we approached our stakeholder, we presented our lofty goal: replace the traditional paper booklet with a mobile-friendly solution for easier hike recording. As we discussed the concept further, we all felt the app would also help spread awareness of state parks and encourage people to get outdoors and move.</p>


    <h3>Surveying the Landscape</h3>
    
    <p>With our stakeholder excited about the idea, we conducted surveys and interviews with active individuals and members of the Hiking Club. Among these individuals, we found high smartphone usage with everyone.</p>
        <ul>
            <li><strong>68%</strong> record physical activity or mileage</li>
            <li><strong>81%</strong> use smartphones during hikes</li>
            <li><strong>91%</strong> are between 25–45 years old</li>
            <li><strong>All</strong> members of the Hiking Club said they have forgotten their booklets during a visit to a state park, but always record the hikes after.</li>
        </ul>
    
    <p>Our data supported developing a mobile app to meet the need for convenient hike recording.</p>

    <figure><img src="hiking-wPhone.jpg" alt="Hiker using smartphone to capture a picture of the trail and forest scenery." /><figcaption>We found that 8 in 10 hikers user their smartphones while hiking for many reasons, most of which might be to capture memories or record activity.</figcaption></figure>


    <h3>Feature Frenzy</h3>
    
    <p>We sifted through tons of great interview feedback and lots of great feature suggestions. Overlapping ideas included:</p>
        <ol>
            <li>Choosing a hike: map <i>and</i> list views</li>
            <li>Uploading/posting videos</li>
            <li>Redeeming rewards automatically</li>
            <li>Downloadable offline maps</li>
            <li>Reminder notifications</li>
        </ol>

    <p>We chose features that were most important to users, helped organize our app navigation, and motivated hikers to keep hiking.</p>


    <h3>Plotting Our Path</h3>

    <p>Storyboarding and user iterations allowed us to see how to best lay out our navigation, park pages, features, and what could be slated for future phases. The app began to take shape with wireframes and mimicked the booklet in many ways.</p>

    <figure><img src="user-flow.png" alt="shapes and connectors representing the basic user flow for each main navigation item" /><figcaption>Our final user flow identified the navigation users would need within the app.</figcaption></figure>

    <figure><img src="sketches-composite.jpg" alt="interior of hiking club booklet compared to sketched wireframes behind low-fidelity mockups" /><figcaption>Sketching out our ideas helped us quickly visualize the app’s structure and move into low-fidelity mockups.</figcaption></figure>


    <h3>Usability Testing</h3>

    <p>During this step, we asked multiple users to complete three main tasks with our mid-fidelity prototype:</p>
        <ol>
            <li>Search for a new hike</li>
            <li>Log a hike</li>
            <li>View your Hiking Club progress</li>
        </ol>
    </p>

    <p>Testing revealed a handful of items we were able to quickly clarify:
        <ol>
            <li>Clarify the float button to record a hike</li>
            <li>Make confirmation messaging more apparent</li>
            <li>Provide quicker access to club progress</li>
        </ol>
    </p>

    <figure><img src="usability-test-results.jpg" alt="colorful post-it notes reflecting usability testing feedback" /><figcaption>We kept track of our usability testing feedback with post-it notes and stickers.</figcaption></figure>


    <h3>Polishing the Experience</h3>

    <p>As we applied branding from the MN Department of Natural Resources, the Hiking Club app came to life. Brand colors, fonts, and assets added depth and cohesion to the user interface, and updates from testing helped refine the overall experience.</p>

</div>

<img src="hifi-app-assets.jpg" alt="composite image of brand assets behind three mobile devices displaying high-fidelity interface screens" class="proj-image-full"/>



<div class="proj-impact">

    <div class="text-wrapper">
        <h3>App Prototype</h3>

        <p>Our app offers effortless recording of completed hikes, up-to-date progress towards hiking all Minnesota state parks, online information about state parks, uploading photos, and more.</p>

        <p>We believe this app would help countless Hiking Club members and outdoor enthusiasts alike find information on state parks, encourage them to visit, and keep hiking the trails.</p>

        <div class="buttons">
            <a href="https://xd.adobe.com/view/26d5b4e0-35de-4964-81a8-63e8819e9877-7386/" target="_blank" class="btn-pri">
                Prototype
            </a>
        </div>
    </div>

</div>



<div class="proj-margin">
    
    <h3>Future Releases</h3>
    
    <p>There is no end in sight for what this app could offer. Some of our favorite ideas are:</p>
        <ul>
            <li>Trail conditions — with live-time, detailed descriptions</li>
            <li>Trail difficulty rating — to help plan park visits</li>
            <li>QR code password scanning — simple, no-internet QRs that return a text password to auto-fill into the app</li>
            <li>Push notifications — reminders to record completed hikes, geo-locational, or timed notifications</li>
        </ul>
    <p class="legal">Copyright Pending</p>


    <h3>Reflection</h3>
    
    <p>When I think about the core purpose of the MN Hiking Club, and think about bringing this concept to an app environment, I can’t imagine a better way to present this club to future generations of outdoor lovers. This was one of my favorite projects to work on <i>ever</i>, and as I close out hiking <i>all</i> of Minnesota state parks with my family over 10 seasons, I have more passion than ever to stay connected to this idea. Maybe someday it will become a reality. Maybe someday I will complete this club again – this time with this app at my fingetips.</p>

    <figure><img src="sunset-monson-lake.jpg" alt="sunset over a glassy lake with the sky reflected in the water" /><figcaption>A stunning sunset over glassy water at Monson Lake State Park.</figcaption></figure>

</div>

Team venture that brings the Minnesota Hiking Club program to a feature-rich app environment

MN State Parks Hiking Club App

<div class="proj-author">

    <div>
    <h6>Presenters</h6>
    <p><b>Dorothy Toth</b> Design Architecture</p>
    <p><a href="https://arsdehnel.com" target="_blank"><b>Adam Dehnel</b></a> Development Architecture</p>
    </div>

    <div>
    <h6>Conference</h6>
    <p><a href="https://opensourcenorth.com/presentations/The-Golden-Key-to-Badass-Products" target="_blank">Open Source North 2026</a></p>
    </div>

    <div>
    <h6>Date</h6>
    <p>May 28, 2026</p>
    </div>

    <div>
    <h6>Client</h6>
    <p>Personal</p>
    </div>
</div>


<img src="{{ heroImg }}" alt="{{ cardImgAltText }}" class="proj-image-full"/>


<div class="proj-overview">

    <div class="text-wrapper">
    <div>
    <h3>Challenge</h3>
    <p>After working side-by-side together for years, Adam and I wanted to share our thoughts and experiences around how to achieve great product design from the inside out. Our challenge was corralling our sprawling ideas and distilling them down into an organized, concise, and approachable presentation.</p>
    </div>
    
    <div>
    <h3>Solution</h3>
    <p>The presentation we produced was the result of months of deep conversations, tons of GitHub issues, countless cups of coffee (or beers, depending on the time of day), and lots of iteration. We organized our thoughts into three principles, added some audience interaction, and a bit of humor.</p>
    </div>
    </div>

</div>


<div class="proj-margin">
    <h3>Ice Breaker!</h3>
    <p>Hoping to get a sense of who our audience was, we offered an anonymous poll. On a screen with a giant QR code and an x/y axis chart to the right, people could scan the code and choose if they were a designer, developer, or other.</p>
    <p>With respectively colored roles, they could each plot their experience and comfort level working with complementary teams (in other words, designers working with developers, or vice versa).</p>
</div>

<div class="proj-margin">

    <div class="text-figure">
        <div class="text">
            <p>As more and more people scanned the code, the chart became busy with differently colored dots moving around. About two thirds of the audience were developers, one third were designers, and a few “others” were sprinkled in.</p>
            <p>Most people moved their dots into the upper right quadrant of our chart: more experience and higher comfort levels working with complementary teams, which was great to see!</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-0.png" alt="QR code for anonymous poll next to x/y axis chart of live poll results" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <h3>The Golden Key to Badass Products</h3>
            <p>The best architecture in the world will never solve for bad user experience. To build a truly powerful, dynamic, and efficient platform, the key is to align technical architecture with design architecture.</p>
            <p>Here are some ways to make this alignment happen, approaches that work, and organizational wins that these practices can achieve.</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-1.jpg" alt="opening slide presenting the title, date, and presenter information" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <p>Although the talk title says golden “key,” as our content started to come together, we began to think about this as a key<i>chain</i>: principles that build on each other, more powerful together than individually.</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-2.gif" alt="a bunch of silver and gold keys shimmering and hanging from a large keychain" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <p>With the keychain of all the keys, you can unlock comprehensive outcomes that will round out how you work and build communities. This is important to you, and even more important to your business leaders.</p>
            <p>At the end of the day, when they realize the outcome, you will have gained their buy-in, and more importantly, their trust.</p>
            <p>Remember, don’t sell them these keys; <i>sell them what they unlock.</i></p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-3.jpg" alt="slide summarizing what the outcomes are and who they are important to" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <h6>The Obligatory AI Slide</h6>
            <p>The following keys are about establishing connections with humans and how you work with people to make things better. When you create a shared human connection <i>first</i>, you will be able to use any tool—including AI—better, together.</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-4.jpg" alt="slide emphasizing the importance of human connection in the era of AI" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <h3>Key #1: Mindset</h3>
            <p>Not to be too Ted Talk-y, but we believe the first and most important of the keys is <strong>mindset</strong>. Your mindset is your perception, or mental lens, of the world.</p>
            <p>While mindset is foundational and sets the tone for the following keys, it is also the most accessible because it is something that every individual can control. This one is up to you, and you alone. (It’s also free!)</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-5.jpg" alt="slide describing the concept of mindset and its impact on one's outlook" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <p>While there are many <i>types</i> of mindsets, having a closed mindset cripples the ability to learn and grow. Approaching work with a closed mindset keeps interactions transactional and superficial.</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-6.jpg" alt="slide listing the characteristics of a closed mindset on learning and growth" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <p>A light-hearted and unscientific take on working with people with closed mindsets...</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-7.jpg" alt="humorous take on working with people who have closed mindsets using Minions" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <h6>Open Mindset</h6>
            <p>On the opposite end of the spectrum, we have the “Badass.” An <strong>open mindset</strong> sets you up to always be learning from others, embrace challenges as opportunities, and be curious about the unknown instead of avoiding it.</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-8.jpg" alt="slide describing the characteristics of an open mindset on learning and growth" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <p>Wherever you might be on the spectrum of Bad and Badass, there is no wrong answer. Where do you find yourself most of the time? Are there opportunities to move further to the right on this spectrum? Things change monthly, weekly, and daily, and that’s okay.</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-9.jpg" alt="slide showing the spectrum of mindsets with closed on the left and open on the right" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <h3>Key #2: Workflow</h3>
            <p>This concept takes our first key, which focuses on self, and expands it to focus on others and on how you work with other teams. In our experience, this can be the hardest key to get right.</p>
            <p>Cross-team communication can be a source of friction, and sometimes, human nature and business structures often push us to utilize lower-friction options.</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-10.jpg" alt="an introduction to the concept of workflow and inter-team relationships" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <p>On one end of the spectrum is an isolated workflow. Design and development are on separate journeys, have separate goals, and separate measures of success. Work is volleyed without interaction over a cube wall, and things start to feel like a game of telephone.</p>
            <p>With isolation comes the loss of context and intention, and results in slower iterations where no one is learning or improving.</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-11.gif" alt="eight steps in the workflow between two teams across a divider in front of two people playing telephone with cans" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <p>Maybe the other side has started to feel like “The Dark Side.” Designers may get stereotyped as being pixel-perfect and inflexible, and developers as dismissive and siloed. But it doesn’t have to be this way!</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-12.gif" alt="Darth Vader walking into the frame slowly, pausing, then waving hello" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <h6>Integrated Workflow</h6>
            <p>On the other end of the spectrum, an <strong>integrated workflow</strong> brings separate teams together. Prototype demonstrations, build explanations, and shared tools will all help get teams on the same wavelength.</p>
            <p>When complementary teams come to the table with an open mindset, they can remain independent, learn from each other, and share stronger connections.</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-13.jpg" alt="slide listing ideas on how to integrate teams and share intention" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <p>Again, this is a scale for reflecting. Where do you see your relationship with other teams? Are there opportunities to strengthen workflow?</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-14.jpg" alt="slide showing the spectrum of workflow approaches with isolated on the left and integrated on the right" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <h3>Key #3: Ecosystem</h3>
            <p>This is where we take our <strong>open mindset</strong> and <strong>integrated workflow</strong> and share it with our friends! This key is possible <i>because</i> of other keys and will allow for long-term growth.</p>
            <p>By building an ecosystem, we are constantly learning from others and practicing an open mind, as well as better aligning teams through more transparent work and workflows.</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-15.jpg" alt="slide describing the concept of an ecosystem and its benefits to a broader community" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <p>When you begin to build your ecosystem, identifying the gaps can give you a natural starting point. Ask questions like “Are you excited about something?” or “Is there something you wish you knew more about?”</p>
            <p>Wherever you start, don’t worry about whether something is worthy enough to share (that goes against Key #1!).</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-16.jpg" alt="slide showing the process of identifying gaps in in order to build an ecosystem" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <p>Starting can be the hardest part. By focusing on the gaps, you can provide information to the most amount of people first. Consider what mediums make the most sense, include those who could benefit, be accountable, and block time to continue working on this!</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-17.jpg" alt="slide offering tips on how to build an ecosystem" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <h6>Rich Ecosystem</h6>
            <p>As you bring teams into the fold, you may find yourself with a rich variety of ways to share thoughts and ideas! As long as people are staying engaged, this is a badass outcome of shared collaboration.</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-18.gif" alt="team integration ideas in front of a busy coral reef environment with hundreds of fish swimmging around" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <p>There is always room for opportunity. At the least, maybe there are ways to make information more accessible or easier to find.</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-19.jpg" alt="slide showing the spectrum of ecosystem approaches with weak on the left and rich on the right" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <h3>The Keys Working Together</h3>
            <p>How do the keys work together? It’s up to you! You can think of these keys interacting many different ways. However you think of them, they are stronger as a group than they are individually.</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-20.jpg" alt="slide illustrating how the keys can work together in a synergistic environment" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <p>Maybe you think of them like I do: working together in chaotic harmony 😄</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-21.gif" alt="a black and white photo of an optical illusion human-like models walking on stairs in a building" /></figure>
    </div>

    <div class="text-figure">
        <div class="text">
            <h6>Unlocking the Outcome</h6>
            <p>The comprehensive outcome of fostering all three keys is not one-to-one. When used together, this golden keychain can empower teams to be more efficient, create a scalable vision for your product, and build stronger relationships.</p>
        </div>
        <figure><img src="/projects/osn-2026/Golden-Key-22.jpg" alt="slide showing the benefits of using the golden keychain in a team environment" /></figure>
    </div>

</div>



<div class="proj-impact">

    <div class="text-wrapper">

        <h3>Takeaway Website</h3>
        <p>As a takeaway after our talk, we offered a one-page website with a summary of our keys, each with its own matrix. These simple rating quadrants serve as a quick way for individuals and teams to gauge progress. Filling these out can be a fun and helpful exercise to track alignment over time.</p>

        <div class="buttons">
            <a href="https://golden-key-matrix.com" target="_blank" class="btn-pri">
                Golden Key Matrix
            </a>
        </div>

    </div>

</div>

<div class="proj-margin">
    
    <h3>Reflection</h3>
    <p>Open Source North (OSN) is an annual technology conference held at the University of St. Thomas each May. I learn something new every year and love being surrounded by people passionate about their craft. Because of that, presenting there was a special honor. As expected, our audience was welcoming and engaged throughout the presentation, which made for a very fun and relaxed atmosphere.</p>
</div>


Presentation at Open Source North 2026 outlining three key ways to better align design and development teams

Golden Key to Badass Products

proportionally-sized desktop and mobile mockups of education website redesign with matching screens displayed in front of a blue collage background

<div class="proj-author">

    <div>
    <h6>Team</h6>
    <p>Small Group</p>
    </div>

    <div>
    <h6>Role</h6>
    <p>UX Research & Design</p>
    </div>

    <div>
    <h6>Date</h6>
    <p>February 2022</p>
    </div>

    <div>
    <h6>Timeframe</h6>
    <p>5 Weeks</p>
    </div>

    <div>
    <h6>Client</h6>
    <p>Curriculum</p>
    </div>
        
</div>


<img src="{{ heroImg }}" alt="{{ cardImgAltText }}" class="proj-image-full"/>


<div class="proj-overview">

    <div class="text-wrapper">
        <div>
        <h3>Challenge</h3>
        <p>The goal of this project was to produce a reorganized, redesigned, and responsive website for the Department of Education.</p>
        </div>

        <div>
        <h3>Solution</h3>
        <p>The proposed redesign focuses on improving the user experience by simplifying navigation, uncovering important site content, and creating a visually appealing layout.</p>
        </div>
    </div>

    <div class="text-wrapper">
        <div class="buttons">

        <a href="CS-Dept-of-Ed-Website-Redesign.pdf" target="_blank" class="btn-pri">
            view case study
        </a>

        <a href="https://xd.adobe.com/view/ceeece15-ee31-41ff-a7fd-fabca427864c-9bbd/" target="_blank" class="btn-sec">
            desktop prototype
        </a>
        </div>
    </div>

</div>

Website overhaul with a focus on information architecture, comprehensive interface design, and responsive layouts

Department of Education Retake

trio of mobile devices showing landing page, home page, and detail page of Horticare app screens against a pink collage background

<div class="proj-author">

    <div>
    <h6>Team</h6>
    <p>Small Group</p>
    </div>

    <div>
    <h6>Role</h6>
    <p>UX Research & Design</p>
    </div>

    <div>
    <h6>Date</h6>
    <p>January 2022</p>
    </div>

    <div>
    <h6>Timeframe</h6>
    <p>3 Weeks</p>
    </div>

    <div>
    <h6>Client</h6>
    <p>Curriculum</p>
    </div>
    
</div>


<img src="{{ heroImg }}" alt="{{ cardImgAltText }}" class="proj-image-full"/>


<div class="proj-overview">

    <div class="text-wrapper">
    <div>
    <h3>Challenge</h3>
    <p>How might we help novice gardeners with limited plant knowledge and experience, better plan and organize plant care tasks by using our app?</p>
    </div>
    
    <div>
    <h3>Solution</h3>
    <p>Our garden care app would be a “one-stop-shop” providing zone and care information for user-created plant gardens. Features could include a searchable, detailed plant database, a care calendar that is generated based on the user’s personal garden, and push notifications sent to the user.</p>
    </div>
    </div>

    <div class="text-wrapper">
        <div class="buttons">

            <a href="CS-Horticare-Garden-Care-Mobile-App.pdf" target="_blank" class="btn-pri">
                view case study
            </a>

            <a href="https://xd.adobe.com/view/9a5946f8-d81c-4768-9b76-5d3b316d4d7f-cf0a/" target="_blank" class="btn-sec"> 
                XD prototype
            </a>

        </div>
    </div>

</div>

Group collaboration of a garden care app that provides personalized garden creation with plant care instruction

Dorothy Toth