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>Client</h6>
    <p>Curriculum</p>
    </div>

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

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


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


<div class="proj-overview">

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

Overhaul of website with a focus on information architecture, comprehensive UI, and responsive design

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>Client</h6>
    <p>Curriculum</p>
    </div>

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

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


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


<div class="proj-overview">

    <div class="text-wrapper">
    <div>
    <h6>Challenge</h6>
    <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>
    <h6>Solution</h6>
    <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="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>

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

Horticare Gardening App

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>Client</h6>
    <p>Curriculum</p>
    </div>

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

    <div>
    <h6>Timeframe</h6>
    <p>4 Weeks</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>

</div>

<div class="proj-margin">
    
    <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>

</div>

<div class="proj-margin">
    
    <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>

</div>

<div class="proj-margin">
    
    <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>

</div>

<div class="proj-margin">

    <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>

</div>

<div class="proj-margin">

    <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>

</div>

<div class="proj-margin">

    <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">

    <h5>App Prototype</h5>

    <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 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>

</div>

<div class="proj-margin">
    
    <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

Department of Education Retake

Overhaul of website with a focus on information architecture, comprehensive UI, and responsive design

Team

Role

Client

Date

Timeframe

Challenge

Solution

Dorothy Toth

Email

LinkedIn

Resume