alissabrimeyer.com

Author: Alissa

CPI Website Redesign Case Study
CPI Website Redesign Case Study
Home / Articles posted byAlissa

CPI Website Redesign Case Study

Two stakeholders within CPI approached me about a possible redesign of the CPI website. Multiple people within the company complained about how it represents the company and how frustrating it is to communicate information effectively to customers. This case study is my response to their frustrations.

The process

With time constraints, a process was created to determine what would be most beneficial to the website redesign in the short time allotted. I created this process by analyzing impact vs. effort. This is a result of that analysis:

The before

The original CPI site was designed in WordPress and contains the following:
A lot of text
Outdated information
False descriptions of services
Few examples of work
A pop-up chatbot that scares us all
Many forms and buttons fishing for emails
A lack of hierarchy
A lack of any discernable user flow
At a glance, it is easy to see that the entire site is overwhelming. It encourages viewers to move onto another site and look for another marketing team rather than pick through the information to figure out what is relevant to them. It appeared as a scam or cash grab to people informally surveyed. The emphasis on money and getting email addresses seemed prioritized over information for deciding whether to work with the company and understanding how the company could help their business succeed. In order to redesign the website while avoiding the missteps above, I will be looking at potential customers, current customers, and employees, analyzing their needs, wants, and pain points.

The journey

I started with three journey maps: the seeker, the potential customer, and the current customer. These allowed me to take stock of what is and isn’t working and gain a better understanding of the website as it currently stands, learning from what has previously been done.

The stakeholders

The stakeholders in this case study are those who work at the company and have a say in how they would like the website to look. I conducted a stakeholder analysis, analyzing information from the common complaints and needs to find a website that can work for all CPI employees and customers.

The stakeholder’s priorities

Communicate our process
Communicate the work we have done
Change text to be simplified, edited, and consistent
Follow brand standards and expectations

The analytics

As I was working with a tight budget, finding, recruiting, and interviewing those seeking a marketing team wasn’t possible. So instead, I looked at the website’s current analytics to deduce where people are dropping off and understand the reasons why. The organic search traffic had a bounce rate is 63%, which is very high, and the average session duration was 3 minutes. Some people would enter the site from a blog, and some would enter through specific marketing service pages. The bounce rate is higher on pages with more text, less hierarchy, and no discernable reason for existing beyond hitting more SEO keywords.
Here are the most visited pages, from the highest traffic to the lowest. That page’s bounce rate is listed as well.
Home – 62%
Contact Us – 83%
Construction Marketing Blog – 62%
Content Marketing Services – 53%
Video Marketing Agency – 64%
Local SEO For Contractors – 87%
Contractor Sites Landing Pages Funnels – 87%
Email Marketing For Contractors – 82%
Websites For Construction – 75%
What we see is the standard entrance pages, home, content marketing services, and video marketing agency have slightly lower bounce rates as people are willing to click on a tab to see if there is better information on another page. However, most visitors don’t make it past three pages before giving up, as they haven’t found the information they were looking for.

The risks and constraints

Before designing, I weighed the risks and constraints and made plans for navigating them.

The problem statement

How might we provide potential and current customers with the information they need to make an informed decision about whether to work with us?

The goals: Give clients a clear idea of…

Our process
Our offerings
Our expertise
Our past work

The flow

Here is a diagram of the proposed primary website flow. The content flow of the page is placed below each page title.

The sketches

Here are the final sketches after brainstorming ideas for laying out the content.

Low Fidelity

I designed the homepage to display a brief overview of CPI so someone viewing the website for the first time knows what CPI is and what they do. The overview also orients them so they can effectively decide what to click on next. It is simplified so returning visitors can quickly find what they are looking for and don’t have to sift through information that isn’t relevant to them.

The marketing services pages truly get into what working with CPI would look like. I combined the digital pages from the original (SEO, Funnels, Websites, and Email Marketing) into one page. I formatted the content marketing page to focus more on our print content marketing, which is a large part of the business. As the part of the business that is growing most rapidly is video, video marketing also needs to have its own page. This reorganization effectively emphasizes CPI’s standard services and leaves room for any ideas they may have instead of detailing everything into an extensive yet inflexible and specific services list.
I outlined examples of our work and the basic processes we use to create them and prioritized them in the layout. The comprehensive pricing information and options were taken out, as each project is different, and the list was frustratingly inaccurate and inflexible.

The blog was the area that had the fewest changes to it. The blog is vital to the SEO team, and it makes the website seem fresh and up-to-date, showing that we add content regularly. However, the blog should shift to discussing marketing techniques for construction, and on-the-job stories from our journalists and photographers, as it would give people looking at the blog a clear idea of who we are and what we believe when it comes to marketing, construction, and business.

High Fidelity

I designed the homepage to be image-based, with few words directing the viewer further into the website. Included is a short blurb for an about-us. A shortened overview of the process gives viewers the information they need to get started and continue looking for the specific marketing service they are interested in. The imagery was changed to be all designed/photographed in-house, with priority given to the work that we have done for clients, showcasing our team’s talents and design style with a glance.
I remade the contact page into one cohesive unit instead of only the header and footer with no content. The ways to contact the company and an image of the office location help establish CPI as a legitimate company for someone looking for a marketing team.

We removed the content we did not make from our marketing services pages and changed the imagery, videos, and text to be written, photographed, and designed in-house. This change represented the company better and created a cohesive style throughout the pages. The client work included on the marketing services pages highlights our key services, magazines, videos, and digital marketing (social media, emails, blogs).
Customers frequently needed clarification on our marketing process and help to understand what marketing with CPI would look like. CPI has specific processes we follow with few exceptions, so to remedy this, I placed illustrations of them on their respective pages to accompany the examples of work and short descriptions.
A contact form is placed at the bottom of every page, so it is easily accessible anywhere on the website but not so prominent it feels like viewers are pressured with sales tactics. This change in contact form gives a feeling of power back to potential customers to make decisions that will best benefit them and their companies.

On the blog overview page, I removed the excessive text in the description, which repeated itself, and prioritized three things 1. The images 2. The title, and 3. The main tag. These changes created more effective skimming through the blog titles. The blog was reformatted to be neater, removing the excessive tags and repeated information.
I removed the contact information as virtually all visitors that enter directly to the blog aren’t potential customers, they are just looking for information on a topic, and potential customers don’t land on the blog as an end page. The contact information is available at the top of the page and any other page they may click.

The next steps

Continue testing the site, looking for where potential drop-offs may occur, and conduct a heuristic analysis to find usability issues.
Check the developed website against WCAG and general accessibility best practices.
Determine if a simplified pricing guide can be added to the website for transparency or if pricing is too variable and constantly changing.
Change blog content over time from exclusively content we have made for clients to incorporating content about marketing, about us, and our process.
Add employee information, such as names, roles, and a quick about, to the homepage or a dedicated “Who we are” section.

The Website

The end result of the website after I ran the development in WordPress, incorporated visual design tweaks, ran user tests, and and incorporated stakeholder feedback.

The lessons

Learn from what has been done before
Consider all the use cases
Show, don’t tell
A user shouldn’t ever feel lost or feel like they are searching
More Case Studies

CPI Website Redesign Case Study

Kick It | Master’s Capstone

Ryan’s Outdoor Services Website Case Study

Linder Used Equipment Case Study
March 28, 2025
Kick It | Master’s Capstone
Kick It | Master’s Capstone
Home / Articles posted byAlissa

Kick It | Master’s Capstone

Giving individuals lacking either community or others who share in their hobbies and passions the ability to create, search, and join local group activities.

Overview

Initial Research
Competitive Analysis
User Interviews
Personas
Flows
Wireframes
Prototyping
Two Rounds of User Testing

Alissa Brimeyer: Project lead, lead designer, lead researcher
Insights and advice from Meghan Lazier’s Fall 2022 Capstone Development and Presentation class

Figma
Mural
Illustrator
Google Drive
Zoom
Otter.ai
Calendly
Asana

The problem

Noticing widespread loneliness and social isolation, I became very interested in why so many people have this problem.
After much research, I zeroed in on the proximity principle. The proximity principle states that people are more likely to form a relationship the closer they are physically. This phenomenon is seen in dorm room proximity of college students, desk distance of work friends, and home distance in local friends.
With the rise of remote learning, working, and an emphasis on a healthier work-life balance, people want to put more time into their hobbies, but they need to be physically closer to people to do that. This project is tackling that problem.
Some main problem points from initial interviews are as follows:
People in transitional life phases seek out (and struggle to find) others.
People aren’t sure where to start finding friends.
People prefer others in similar life stages as them and easy, safe, low-pressure starting interactions.
There are few opportunities for people seeking out friends that want to avoid direct rejection on friend-finding apps that require swiping and 1-on-1 messaging.

Social Isolation…

leads to anxiety, heart disease, depression, increased risk of dementia, and increased risk of premature death.
Source

Social Isolation…

is seen in higher rates amongst immigrants, LGBT populations, minorities, and victims of elder abuse.
Source

Social Isolation…

is one of the key factors found to increase the risk of radicalization from hate groups.
Source
Source
Source

The audience

There are many groups of people that are dealing with a lack of proximity to others, but we will focus on optimizing the app for three groups that are likely to experience this problem:
New Movers: People interviewed frequently mentioned their fear of moving and having no friends or how moving in the past impacted their ability to find friends.
Retirees: New retirees consistently referred to filling their newly found free time as daunting, and social isolation becomes more likely as retirees age.
Young Adults: Young adults are most likely to make significant lifestyle changes, move locations, and find new hobbies and interests, making them need access to new people more often than other age groups.

The competitors

Some apps attempt to solve this social isolation problem, but with differing approaches. We learned what worked and didn’t from their attempts to solve this problem. Here is a quick overview of some of the apps:

Friender
Users swipe on and match with potential friends with shared interests in activities.
Facebook Events
Facebook users can see local events and which friends are attending.
Bumble BFF
Users swipe on and message potential friends in the well-known Bumble dating app style.
Meetup
Administrators manage groups and host online or in-person events.
Atleto
College students can host and join athletic activities on campus.

Initial interview insights

User interviews were conducted to get a deeper understanding of these problems within our chosen audience and to figure out which solutions could be most viable for them. As a result, an affinity map was created, which can be viewed below, along with five main takeaways that led the ideation phase.

1-on-1 Interaction
1-on-1 interaction is often intimidating to most people actively struggling with social isolation. Many people avoid the current apps available…
Hosting
One person responsible for managing all group activities creates dynamics that make friend networking difficult.
Messaging
Messaging without a specific intent besides friendship is intimidating to many people interviewed and only attracts already social individuals.
Introverts & Extroverts
Introverts and extroverts tend to have different social wants and needs. Therefore, there is a need for people to be…
Safety
Small groups and safety features such as phone verification allow for more meetups as they minimize the risk involved.

The research

Additional research was conducted by reading articles and listening to many, many podcasts with psychologists. Here are some of the most interesting points that drove design thinking:
Community is necessary for healthy individuals and promotes creativity and empathy, yet we are becoming increasingly isolated.
The lack of access to community leads to increased rates of misinformation, division, and extremism as algorithms take over the information people are shown instead of exposure to a broader variety of people and ideas.
Most people don’t enjoy the idea of small talk, but they report feeling positive about the experience after. People are also more likely to start engaging with each other if they feel their discussion has a specific purpose.
We have less practice facing rejection than people used to with technology intermediating our interactions. Allowing people to practice facing rejection in a safe environment with little to no consequences will enable them to face rejection on a larger scale more confidently later on.

The goals

Increase access to group activities.
Increase access to people with specific interests and hobbies.
Increase the rate of in-person interaction within communities.
Encourage healthy activities and habits, both socially and physically.
Decrease the rate of negative health effects from lack of community and social isolation.

The persona: The new mover

Goals
Meet new people
Create new healthy routines within their new surroundings
Become active in the community
Needs
Find friends
Find access to their hobbies at their new location
Increase their community engagement
Become acquainted with their new location
Pain points
Difficulty meeting new people with similar interests
Difficulty establishing close relationships
Difficulty finding people to go to community events with
Does not know places or opportunities in their new location

The persona: The retiree

Goals
Find ways to fill their increased amount of free time
Find new hobbies/activities to engage in
Manage their new schedule
Prioritize their comfort and safety when meeting new people
Needs
Access to people who are also retired with similar interests
Access to facilities and objects required for trying new activities
Communicate with others in a comfortable/familiar way
Pain points
Current friend-finding apps contain mainly young adults
Difficulty planning between other’s schedules
Differing social engagement styles from current meet-up apps
Differing safety standards from current meet-up apps

The sketches

A series of sketches, ideas, and flows were created to process this information. Here are what those looked like:

The initial flow

The brainstorming sketches led to deciding on the necessary tasks and features to include. Flows were created for specific goals and then connected into one application flow. Included are an account creation flow, a create activity flow, and an activity search flow.

Low Fidelity

The pages identified as necessary within the flow were then mocked up into wireframes and became the low-fidelity versions you see here. User testing with these screens focused on validating user needs and understanding how well the app met them.

The account creation flow was created first with the goal of setting expectations for the entire app and gathering necessary information. The initial flow shows how these screens began as a minimal way to collect information, but people didn’t know how to expect the information to be used and weren’t sure how to best fill out the forms based on their intentions making people hesitant to move on to the next step. Explanations, a more evident progress bar, and information about the app itself allowed users to move through these steps with ease.

For activity creation without hosting, some ideas brainstormed were having the app create activities or allowing a large group to form and schedule as they like. The resulting solution was to have someone create an activity, type the details, date, time, and a public location, and then they were free to leave the activity if they wished—making them more of an idea creator than a host.

Activity groups changed their name to primary activities – acting more as the users’ filters and customization than an actual group. Users can search for any activity in their city, but their suggestions come from their primary activity groups.

User groups didn’t like the pressures of messaging, but there was a necessity to communicate before a meet-up. This problem required more research, as I had to figure out why people didn’t like messaging. What was discovered was that people felt nervous about interacting in a way that bothered others. So the decision was made to make private messaging optional, but group messaging open in each activity as it had a specific purpose.

The account creation flow was created first with the goal of setting expectations for the entire app and gathering necessary information. The initial flow shows how these screens began as a minimal way to collect information, but people didn’t know how to expect the information to be used and weren’t sure how to best fill out the forms based on their intentions making people hesitant to move on to the next step. Explanations, a more evident progress bar, and information about the app itself allowed users to move through these steps with ease.

For activity creation without hosting, some ideas brainstormed were having the app create activities or allowing a large group to form and schedule as they like. The resulting solution was to have someone create an activity, type the details, date, time, and a public location, and then they were free to leave the activity if they wished—making them more of an idea creator than a host.

Activity groups changed their name to primary activities – acting more as the users’ filters and customization than an actual group. Users can search for any activity in their city, but their suggestions come from their primary activity groups.

User groups didn’t like the pressures of messaging, but there was a necessity to communicate before a meet-up. This problem required more research, as I had to figure out why people didn’t like messaging. What was discovered was that people felt nervous about interacting in a way that bothered others. So the decision was made to make private messaging optional, but group messaging open in each activity as it had a specific purpose.

The design system

Once the low-fidelity wireframes had gone through testing to confirm the need for different elements and features, components, fonts, and colors were finalized. A simple color scheme of yellows and neutrals, prominent icons, and big simple shapes were prioritized to create an accessible and clean look.

Medium Fidelity

The colors and components were added to this medium-fidelity prototype, and the testing focused on assessing how well the app accomplished the original goals.

Profile management was a focus as the profiles needed to contain information about others to quell safety fears while feeling as though it wasn’t too intrusive for more reserved users. We achieved this by having an optional short bio and additional images and publicly displaying the traits and activities of the user, all from a predetermined list.

Activity creation was expanded upon, and one common question throughout testing was what exactly classifies as an activity. This was clarified by simply removing the option to create an activity name and placing a dropdown activities list to name the activity. It made creating an activity almost entirely laid out as a series of options, with the only exception being a details box. This was successful in making people feel more comfortable creating an activity.

A need that was identified was the need for an easy way to manage and remember these events. This was especially necessary for recent retirees still figuring out how to manage a new schedule with more freedom. As a result, a calendar page was created to encourage people to sign up for various activities, as they don’t have to manage them themselves.

As the app is differentiating itself from other apps focused on creating one-on-one friendships and is instead activity-focused, the friend pages had to be adapted to fit this need. Instead of getting updates from friends or having a feed, the user’s friend list acts more as a reference. They can invite these people to activities, message them, or view their profiles, encouraging them to get to know each other better through activity meet-ups.

Profile management was a focus as the profiles needed to contain information about others to quell safety fears while feeling as though it wasn’t too intrusive for more reserved users. We achieved this by having an optional short bio and additional images and publicly displaying the traits and activities of the user, all from a predetermined list.

Activity creation was expanded upon, and one common question throughout testing was what exactly classifies as an activity. This was clarified by simply removing the option to create an activity name and placing a dropdown activities list to name the activity. It made creating an activity almost entirely laid out as a series of options, with the only exception being a details box. This was successful in making people feel more comfortable creating an activity.

A need that was identified was the need for an easy way to manage and remember these events. This was especially necessary for recent retirees still figuring out how to manage a new schedule with more freedom. As a result, a calendar page was created to encourage people to sign up for various activities, as they don’t have to manage them themselves.

As the app is differentiating itself from other apps focused on creating one-on-one friendships and is instead activity-focused, the friend pages had to be adapted to fit this need. Instead of getting updates from friends or having a feed, the user’s friend list acts more as a reference. They can invite these people to activities, message them, or view their profiles, encouraging them to get to know each other better through activity meet-ups.

High Fidelity

Final tweaks and questions were challenged and answered in user testing until a learnable, usable, solution-focused app was in place.

The need to share activities with friends lists in an easy, pressure-free way became very obvious through testing. On the activities page, a button appears that allows people to send the activity to someone on their friend list in the form of a pre-written message suggesting that they may be interested in this activity. This allows deeper friendships to form from increased interaction while downplaying possible rejection with a less direct approach.

Throughout testing, it became clear that there was a need to make group messages seem less intrusive. It was decided that the messaging, including past messages within the group, would open up once the activity was joined. It made the interaction feel more like opting into a public forum rather than being placed in a private room.

The homepage was finalized towards the end of the project as features changed and buttons moved. Upcoming activities, filtering through main categories, and creating a new activity were the key features that needed to be represented. After those were placed, the messaging and notifications went to the top right, mimicking most social media apps for easy learnability.

The final major decision concerned what to do about groups that didn’t fit the required number of people for an activity and what to do about people who didn’t show up. Those two problems came together into one solution. For activity groups that did meet the minimum, a prompt for an activity review appears on the home screen after the meeting time. The prompt allows users to report if everyone who joined showed up. If someone misses multiple events in a short time, they can only join activities once the minimum group number has been reached.

The need to share activities with friends lists in an easy, pressure-free way became very obvious through testing. On the activities page, a button appears that allows people to send the activity to someone on their friend list in the form of a pre-written message suggesting that they may be interested in this activity. This allows deeper friendships to form from increased interaction while downplaying possible rejection with a less direct approach.

Throughout testing, it became clear that there was a need to make group messages seem less intrusive. It was decided that the messaging, including past messages within the group, would open up once the activity was joined. It made the interaction feel more like opting into a public forum rather than being placed in a private room.

The homepage was finalized towards the end of the project as features changed and buttons moved. Upcoming activities, filtering through main categories, and creating a new activity were the key features that needed to be represented. After those were placed, the messaging and notifications went to the top right, mimicking most social media apps for easy learnability.

The final major decision concerned what to do about groups that didn’t fit the required number of people for an activity and what to do about people who didn’t show up. Those two problems came together into one solution. For activity groups that did meet the minimum, a prompt for an activity review appears on the home screen after the meeting time. The prompt allows users to report if everyone who joined showed up. If someone misses multiple events in a short time, they can only join activities once the minimum group number has been reached.

The main flows

The interaction flows you see below show some significant challenges that were overcome. Figuring out how to create these cohesive flows was paramount to making the app accomplish the goals set out before us.

Account creation flow
This flow is the result of making the account creation better at setting expectations and reducing anxiety in users by gently guiding their decision-making.
Tutorial flow
After account creation, users felt significantly dropped off right into the app. So this quick tutorial was created to bridge that gap and center people on their homepage before they start joining and creating activities.

Review activity flow
In this flow, users can easily report anyone they had an activity with and are only directly asked if the other users showed up. This centers safety and accountability without the stress of having others rate you.
Activity search flow
The improved filters, the simple yet comprehensive activity pages, and the ability to share an activity with your friends allow the search for an activity to feel as private or public as users would like.
Activity creation flow
This flow brings together the two goals of avoiding the hosting dynamic while allowing users to feel in control of their options within the app.

The prototype

Here is the final prototype on Figma. Click through and explore to see the design answers we came up with!

The next steps

In the future, the central focus will be building out more activities. Currently, the activity options are pre-set, but a page for suggesting new activities was created to determine the most wanted activities.
Another related feature that needs to be researched and designed is the ability to find location-specific activities, such as surfing.
Currently, the app is local-community-focused. An option for managing multiple locations temporarily for people that travel full-time or want to do an activity on vacation needs to be explored.
One area to explore is the possibility of companies entering and hosting activities for users, such as hiking, yoga, and archery.
Allowing companies/locations such as movie theaters, sports clubs, golf courses, and painting studios to promote themselves on the app as locations is something to expand on and see if there is a market for.

The lessons

One major lesson learned throughout this process was the necessity of testing and retesting until solutions become clear. Forcing solutions only moves you further from the goal.
Another lesson was the importance of finding an abundance of information and then talking it out. Working through the problem and understanding the different strands is much more efficient than trial and error.
A third lesson was the importance of managing time well. Because of the research done early on, the brainstorming, and the early prototyping and testing, I expanded the app to fit users’ needs in a way that I wouldn’t have been able to do without a schedule and set goals.
The final lesson was being committed to finding a solution to the problem and allowing the process to take you where it goes, not finding the problem that fits your predetermined solution.

The presentation
More Case Studies

CPI Website Redesign Case Study

Kick It | Master’s Capstone

Ryan’s Outdoor Services Website Case Study

Linder Used Equipment Case Study
March 28, 2025
The Flying Bruce Branding & Website Case Study
The Glazery | Old Work Review
Home / Articles posted byAlissa

CPI Website Redesign Case Study

Two stakeholders within CPI approached me about a possible redesign of the CPI website. Multiple people within the company complained about how it represents the company and how frustrating it is to communicate information effectively to customers. This case study is my response to their frustrations.

Subtitle

Background

User Scenario 1: As a recent relocator, I want to watch movies and tv shows with people remotely, so I can connect with them long-distance.

Needs/Goals:
Connect with long-distance loved ones through shared tv shows
Prioritize what to watch with limited leisure time
Communicate what she is watching efficiently

LUCY
Age: 27
Location: NYC
Occupation: Junior Marketing Associate

Initial Research & Competitive Analysis
User Interviews & Analysis
Create Personas
Create User Scenarios
Create User Flows
Create Wireflows
Create Low Fidelity Prototype
Round 1: User Testing
Create High Fidelity Prototype
Round 2: User Testing
Finalize Prototype and Presentation

Alissa Brimeyer: UX Designer, UX Researcher, UX Strategist
Katie Mendoza: UX Designer, UX Researcher, UX Strategist
Insights and advice from Nitin Sampathi’s Spring 2022 UX Prototyping class

Figma
Mural
Illustrator
Google Drive
Zoom
Otter.ai
Calendly
More Case Studies

CPI Website Redesign Case Study

Kick It | Master’s Capstone

Ryan’s Outdoor Services Website Case Study

Linder Used Equipment Case Study
March 28, 2025
Ryan’s Outdoor Services Website Case Study
Ryan’s Outdoor Services Website Case Study
Home / Articles posted byAlissa

Ryan’s Outdoor Services Website Case Study

Ryan’s Outdoor Services is a company providing lawn care, landscaping, and snow removal services in Eastern Iowa. Currently, their online presence is primarily on social media, where they have an extensive collection of images and information. They are now seeking to develop a dedicated website.

Overview

Conduct Initial Interviews
Analyze and Organize Insights
Define the Problem Statement
Create Personas
Create User Scenarios
Create User Flows
Define Goals
Define Key Features
Create the Design System
Create the Overall Site Flow
Create Wireframes
Test and Analyze the Low Fidelity Prototype
Create the High Fidelity Prototype
Test and Analyze the High Fidelity Prototype
Create the Content on WordPress
Test the Website
Analyze and Strengthen Accessibility, Security, and SEO
Analyze Website Analytics and Make Changes as Needed

WordPress
Figma
Illustrator
Photoshop
Zoom

The problem

For the customers:
Customers in need of lawn care, snow removal, and landscaping need easy access to detailed service information and contact details in order to learn about and hire Ryan’s Outdoor Services.
For the company:
Ryan’s Outdoor Services needs to improve its search engine ranking and provide a structured content presentation in order to attract more customers and effectively showcase its services.

Initial Interview Insights

To gain a deeper understanding of potential customers, informal interviews were conducted with individuals who had hired or were planning to hire landscaping, lawn care, or snow removal services within the next year. The interviews focused on three primary questions:
What qualities and characteristics do they look for in a lawn care company?
What do they look for on a lawn care company’s website when deciding to work with them?
What do they look for on their lawn care company’s website?
The insights from these interviews revealed key factors that influence decision-making and customer satisfaction. The main points of information gleaned from these questions are summarized in the graphics, informing both the content and structure needed for the website.

Persona One

NAME: Linda
AGE: 73
JOB: Retired

Needs
Reliable and Consistent Service: Linda needs a company that will reliably show up on schedule to maintain her lawn and remove snow, ensuring her property is well-maintained throughout the year.
Affordable Options: She needs affordable service plans that fit within her fixed retirement budget.
User-Friendly Website: Linda needs a website where she can easily find information about services, pricing, and contact details, and perhaps schedule services or request quotes online.
Trustworthy Reputation: Linda needs to feel confident that the service providers she hires are trustworthy and have a good reputation in the community.

Pain Points
Physical Difficulty: Linda finds it increasingly challenging to manage lawn care and snow removal herself due to her age.
Reliability Concerns: She worries about finding a service that is dependable and shows up as scheduled.
Affordability: On a fixed retirement income, Linda is concerned about the cost of hiring a lawn care and snow removal service.
Communication Issues: She finds it frustrating when service providers are difficult to contact or do not communicate effectively.

Wants
Trustworthy Service: Linda desires a service provider known for reliability and trustworthiness.
Easy Communication: She wants a company that is easy to contact, whether by phone, email, or through an easy-to-use website.
Year-Round Care: Linda wants a single company that can handle both her lawn care in the summer and snow removal in the winter.
Positive Reviews: She values testimonials and reviews from other customers, which help reassure her of the company’s reliability and quality of service.

Scenario one

Linda, a retired grandmother, has recently found it difficult to manage lawn care and snow removal for her home. She needs to find a reliable and affordable company to take over these tasks to ensure her property remains well-maintained throughout the year. Linda values trustworthy service providers that are easy to contact.

Persona two

NAME: Andrew
AGE: 33
JOB: Social Worker

Needs
Experienced Professionals: Andrew needs to find a landscaping company with proven expertise and a portfolio of successful projects similar to his planned project.
High-Quality Service: He needs assurance of quality workmanship to ensure the landscaping project meets his high standards.
Easy Estimate Comparison: Andrew needs a user-friendly way to request, receive, and compare estimates from different companies to make an informed decision.
Transparent Process: He needs clear and transparent communication throughout the project, from initial consultation to project completion, to feel confident in the service provided.

Pain Points
Skill Gap: Andrew is confident in basic lawn care but lacks the expertise for large-scale landscaping projects.
Time Constraints: His busy work schedule leaves him with limited time to manage a complex landscaping project on his own.
Trust Issues: He is cautious about finding a company that delivers high-quality workmanship and meets his expectations.
Comparison Difficulties: Andrew finds it challenging to compare different companies and their offerings without a straightforward way to request and review estimates.

Wants
Professional Expertise: Andrew wants a company with the necessary skills and experience to handle a large-scale landscaping project.
Quality Workmanship: He values high-quality work and attention to detail in the execution of landscaping projects.
Convenient Estimate Requests: Andrew wants an easy and efficient way to request estimates from multiple companies to compare services and prices.
Clear Communication: He desires clear and transparent communication from the service provider regarding project timelines, costs, and expectations.

Scenario two

Andrew is confident in managing his own lawn care but realizes he lacks the skills and expertise needed for a large-scale landscaping project he wants to undertake. He needs to find a professional company with the experience and capability to complete this project to his satisfaction. Andrew values quality workmanship and would like to easily request estimates for comparison.

Goals

Three main goals were established from discussions with stakeholders and are focused on business objectives.

Elevate Company Credibility
Expand Potential Customer Base
Enhance Information and Tools Available to Current Customers

Key Features

Key features take the goals we discussed with stakeholders and the insights we gathered from interviews and research and turn them into actionable steps. They’re the roadmap guiding us toward meeting user needs and business objectives effectively.

Initial Flow

An outline was created of the essential pages needed to interconnect these features and build a unified website experience.

Design System

Ryan’s Outdoor Services boasts an attractive established identity, characterized by a recognizable logo, prominent signage, and branded vehicles. To capitalize on this existing identity and ensure consistency across all digital touchpoints, a comprehensive design system was developed. This design system serves to complement and build upon the established identity, translating it seamlessly into the digital realm while maintaining brand coherence and visual appeal.

Expanded Flow

A wire flow was crafted to visually illustrate how users will navigate through the various pages and functionalities to accomplish their goals. This process helped determine the optimal page flow and identify key interactions essential for a smooth and intuitive user experience.

Low Fidelity

The homepage features a header image on every page to immediately convey qualities such as professionalism and consistency, which were identified as important to potential customers during interviews. There is a bulleted list of services for quick recognition, allowing customers to quickly see what’s offered at a glance. A prominently placed “Contact Us” button guides users to the next step in securing services, leading them to the contact form. Additionally, the homepage showcases examples of work and customer testimonials, summarizing key information customers look for before engaging with a company.

Originally, there was only going to be a single services page. However, to provide more detailed content and better showcase the company’s capabilities, a second page was created to highlight specific examples of work. This additional page includes detailed examples of services and showcases the most impressive projects the company has completed. The choice to create this page was also influenced by Ryan’s Outdoor Services’ social media content, including before and after images, which provide a professional and impactful display of their work.

The about page is designed to lead seamlessly into the contact page, facilitating a smooth transition for users wanting to establish official contact with the business. It includes a summary, a prominent button to reach the contact page, and boxes detailing important information such as specific experience, crew size, and available tools for large-scale projects. Additionally, the page features a graphic and text detailing specific service areas, along with customer testimonials to preemptively answer any potential questions users might have before reaching out. The contact page itself includes quick glance contact information and hours, and a user-friendly form designed to capture necessary information while allowing users to complete it quickly, focusing only on essential details.

The payment page is designed for current customers, providing an additional method to make payments. It includes the necessary information and a button directing users to the payment portal hosted by a payment processor. The design is simplified to serve as a gateway rather than a standalone page, ensuring users can easily navigate through the payment process.

The account creation flow was created first with the goal of setting expectations for the entire app and gathering necessary information. The initial flow shows how these screens began as a minimal way to collect information, but people didn’t know how to expect the information to be used and weren’t sure how to best fill out the forms based on their intentions making people hesitant to move on to the next step. Explanations, a more evident progress bar, and information about the app itself allowed users to move through these steps with ease.

For activity creation without hosting, some ideas brainstormed were having the app create activities or allowing a large group to form and schedule as they like. The resulting solution was to have someone create an activity, type the details, date, time, and a public location, and then they were free to leave the activity if they wished—making them more of an idea creator than a host.

Activity groups changed their name to primary activities – acting more as the users’ filters and customization than an actual group. Users can search for any activity in their city, but their suggestions come from their primary activity groups.

User groups didn’t like the pressures of messaging, but there was a necessity to communicate before a meet-up. This problem required more research, as I had to figure out why people didn’t like messaging. What was discovered was that people felt nervous about interacting in a way that bothered others. So the decision was made to make private messaging optional, but group messaging open in each activity as it had a specific purpose.

Profile management was a focus as the profiles needed to contain information about others to quell safety fears while feeling as though it wasn’t too intrusive for more reserved users. We achieved this by having an optional short bio and additional images and publicly displaying the traits and activities of the user, all from a predetermined list.

Activity creation was expanded upon, and one common question throughout testing was what exactly classifies as an activity. This was clarified by simply removing the option to create an activity name and placing a dropdown activities list to name the activity. It made creating an activity almost entirely laid out as a series of options, with the only exception being a details box. This was successful in making people feel more comfortable creating an activity.

A need that was identified was the need for an easy way to manage and remember these events. This was especially necessary for recent retirees still figuring out how to manage a new schedule with more freedom. As a result, a calendar page was created to encourage people to sign up for various activities, as they don’t have to manage them themselves.

As the app is differentiating itself from other apps focused on creating one-on-one friendships and is instead activity-focused, the friend pages had to be adapted to fit this need. Instead of getting updates from friends or having a feed, the user’s friend list acts more as a reference. They can invite these people to activities, message them, or view their profiles, encouraging them to get to know each other better through activity meet-ups.

High Fidelity

The need to share activities with friends lists in an easy, pressure-free way became very obvious through testing. On the activities page, a button appears that allows people to send the activity to someone on their friend list in the form of a pre-written message suggesting that they may be interested in this activity. This allows deeper friendships to form from increased interaction while downplaying possible rejection with a less direct approach.

Throughout testing, it became clear that there was a need to make group messages seem less intrusive. It was decided that the messaging, including past messages within the group, would open up once the activity was joined. It made the interaction feel more like opting into a public forum rather than being placed in a private room.

The homepage was finalized towards the end of the project as features changed and buttons moved. Upcoming activities, filtering through main categories, and creating a new activity were the key features that needed to be represented. After those were placed, the messaging and notifications went to the top right, mimicking most social media apps for easy learnability.

The final major decision concerned what to do about groups that didn’t fit the required number of people for an activity and what to do about people who didn’t show up. Those two problems came together into one solution. For activity groups that did meet the minimum, a prompt for an activity review appears on the home screen after the meeting time. The prompt allows users to report if everyone who joined showed up. If someone misses multiple events in a short time, they can only join activities once the minimum group number has been reached.

The header image chosen for the homepage features the identifiable work vehicle and trailer used by the company. This connects viewers with something familiar they may have seen before and conveys professionalism by showcasing dedicated work vehicles. The second button on the page is labeled “View All Services,” which aligns with user expectations and allows the “Contact Us” button in the header to stand out more prominently without redundancy.
All pages have been carefully adapted for both desktop and mobile devices, recognizing that most users looking for lawn care services start by searching on Google Maps on these devices and then clicking through to the website.

The first image on the about page features the owner, aligning with the company’s name and fostering a personal connection between the business and potential customers. Users expressed that knowing who the name represents made them feel a more personal connection. The information section includes interactive boxes, allowing users to engage with specific details they are interested in without overwhelming them with text. The service area image outlines the towns served and includes the text “and surrounding areas” to indicate that even if viewers are not within the outlined towns, they can still contact the company for a quote.

The contact page received minor tweaks based on user feedback about what happens next after filling out the form. Additional text explains that users will be contacted for more information, such as images of the area they want landscaped, or they will receive an estimate. Text was also added to inform users that if they are requesting a service not listed, they can add it in the comment box.

The work page features large images of projects with no text, as users primarily expected imagery here and preferred to see text only on the services page. An interactive before-and-after element was added during development, mirroring the company’s social media style. Additionally, a secondary page specifically adapted for screen readers was included to ensure accessibility.

The services page was simplified to include only a heading, a short description, and an image of the service. This design caters to users who want to quickly see if the service they are interested in is listed and view an example of that service.

The text on the payment page was crafted to reflect the capabilities of the business and to ensure users knew it wasn’t the only payment option available. During accessibility testing, the button color was changed to a darker shade of green to pass color contrast tests, ensuring the page remained accessible to all users.

The prototype

Click through and explore the final prototypes on Figma for both mobile and desktop!

Development Results

The website was developed using WordPress, ensuring a robust and user-friendly platform for both the business and its customers. Key elements such as a cookie policy, privacy policy, site map, and a 404 error page were added to enhance the site’s functionality, compliance, and user experience.

Accessibility Analysis

The biggest accessibility challenge I faced was color contrast. While checks for reading level and accessible links and buttons were easily adaptable, achieving proper color contrast required more time and effort. The colors in the logo—a light blue and green—did not pass web accessibility guidelines when used as small text on a white background. This posed a problem because it was crucial to maintain the business’s colors throughout the website for consistency and brand identity.
To address this, I changed the blue and green to darker shades in areas where text readability was essential, ensuring compliance with WCAG guidelines. Additionally, I incorporated incidental elements that used the original base colors. This approach maintained the website’s visual consistency without compromising accessibility.
Another recurring issue was errors due to the lack of alt text in interactive image elements. Upon checking with a screen reader, it was found that the element being used hid the alt text. To resolve this, a secondary screen reader viewable page was created, ensuring that all interactive image elements were accessible.

Before

After

SEO, Security, and Performance Analysis

To optimize SEO, security, and performance, several key measures were implemented:
Security: Security headers were added to enhance protection. Secondary tests were conducted using WordPress plugins to ensure no SSL, security, SEO, or accessibility issues were overlooked.
SEO: A site map and schema metadata were included to improve search engine visibility. Text, image alt text, headings, and SEO titles and descriptions were optimized to rank on Google for important terms identified in interviews: Dubuque, Iowa, Landscaping, Lawn Care, Snow Removal, Mowing, Shoveling, and Ryan’s Outdoor Services.
Performance: CSS and JavaScript were minified, and page response times were reduced through image and file optimization. Performance checks were conducted using Google PageSpeed Insights.
These efforts collectively enhanced the website’s SEO, security, and performance. You can see the results of these improvements in the next section.

Analytics

The Google Analytics data revealed that after only two weeks of the website being live, traffic was generated both from social media referrals and organic searches. Among the top 10 organic Google search queries, many combinations of terms such as “Landscaping,” “Lawn Care,” “Lawn Mowing,” “Dubuque,” and “Ryan’s Outdoor Services” ranked in the top five average positions. Additionally, further pages showed top 10 ranks for combinations including “snow” and “snow removal.”
To further elevate these rankings, creating individual pages for each of the main services is recommended. The organic Google search click-through rate (CTR) of 10.79% and an engagement rate of 88%, with most users coming from the target city, demonstrate successful SEO efforts in the first two weeks. Continued analysis will be necessary to maintain and improve these results over time.
Additionally, the contact form on the website has successfully generated eight new service requests within the first weeks of being live. This indicates that people are not only finding the website but are also following the designed user flow, resulting in an expanded customer base. This early success shows the website’s effectiveness in converting visitors into potential clients.

The Next Steps

Create Individual Service Pages: Develop dedicated web pages for each main service (e.g., landscaping, lawn care, snow removal) to boost SEO and provide more detailed information for users.
Officially Release Payment Page: Launch and test the payment page to ensure a smooth and secure transaction process for customers.
Develop FAQ Section: Create an FAQ page based on common questions received through the contact form and input from stakeholders to provide quick and accessible answers.
Monitor SEO Performance: Continuously track and analyze SEO metrics to identify opportunities for further optimization and maintain high search engine rankings.
Analyze User Behavior: Use analytics to understand user interactions and improve the website’s usability and engagement rates.
Gather Feedback: Collect feedback from users and stakeholders to identify any areas for improvement and ensure the website meets their needs effectively.
Improve Accessibility: Regularly review and update accessibility features to ensure compliance with WCAG guidelines and provide an inclusive experience for all users.
More Case Studies

CPI Website Redesign Case Study

Kick It | Master’s Capstone

Ryan’s Outdoor Services Website Case Study

Linder Used Equipment Case Study
March 28, 2025
Fitness/Shapewear Social Media Optimization

YMCA Supportive Housing Campus

The Des Moines YMCA Supportive Housing Campus is a nonprofit that seeks to reduce the rate of homelessness within Iowa. I have designed posters, handouts, invitations, thank-you notes, social media posts, and videos for their fundraising campaigns and daily operations. Following their identity system, I created cohesive yet individualized campaigns by using illustration, typography, and color.

*modifications made to quotes and resident pictures to maintain privacy

The Glazery | Old Work Review

YMCA Supportive Housing Campus

The Des Moines YMCA Supportive Housing Campus is a nonprofit that seeks to reduce the rate of homelessness within Iowa. I have designed posters, handouts, invitations, thank-you notes, social media posts, and videos for their fundraising campaigns and daily operations. Following their identity system, I created cohesive yet individualized campaigns by using illustration, typography, and color.

*modifications made to quotes and resident pictures to maintain privacy

Home / Articles posted byAlissa

The Glazery | Old Work Review

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

More Work Examples

CPI Magazine/Social/Email Designs

Ryan’s Outdoor Services Website

Zach Brimeyer Show Reel Website

Baby Berg Art Website Design

YMCA Supportive Housing Campus Fundraiser Designs

March 28, 2025
CPI Magazine/Social/Email Designs

CPI Magazine/Social/Email Designs

Home / Articles posted byAlissa

CPI Magazine/Social/Email Designs

Since June 2021, I’ve worked with CPI and currently serve as a Freelance Digital Marketing Coordinator, managing their website and leading the client email and social media programs. My role involves designing and editing print and digital magazines, creating interactive versions with videos and shareable article pages, and building landing pages in WordPress. I collaborate with clients and internal teams to ensure content meets brand standards and legal requirements. Additionally, I design and manage email and social media campaigns, track engagement, and implement improvements. While working full-time (June 2021 – Jan 2024), I presented quarterly marketing trends to the primary equipment manufacturer, highlighting insights to support distributor needs.

Print Magazines

Digital Magazines

Emails

Social Media

More Work Examples

CPI Magazine/Social/Email Designs

Ryan’s Outdoor Services Website

Zach Brimeyer Show Reel Website

Baby Berg Art Website Design

YMCA Supportive Housing Campus Fundraiser Designs

March 28, 2025
Ryan’s Outdoor Services Website

Ryan’s Outdoor Services Website

Home / Articles posted byAlissa

Ryan’s Outdoor Services Website

In Spring 2024, I was contracted to design a new website for Ryan’s Outdoor Services to establish their online presence. The project involved creating a professional, SEO-optimized site with a focus on mobile accessibility, as most new clients arrive through Google and Yelp. The site prioritized credibility, clear customer journeys, and easy contact options. Thorough testing was conducted across devices and browsers, with user feedback guiding improvements. Accessibility features, including alt-text and colorblind-friendly design, were implemented. Future goals include adding payment pages, enhancing service descriptions, and gathering user insights through optional questionnaires. You can check it out at ryansodservices.com.

Website Design

Mobile Design

Policies & Security

More Work Examples

CPI Magazine/Social/Email Designs

Ryan’s Outdoor Services Website

Zach Brimeyer Show Reel Website

Baby Berg Art Website Design

YMCA Supportive Housing Campus Fundraiser Designs

March 28, 2025
Zach Brimeyer Show Reel Website

Zach Brimeyer Show Reel Website

Home / Articles posted byAlissa

Zach Brimeyer Show Reel Website

In March 2025, I designed a site for my brother’s video production showreel. The site was created on WordPress and designed to give him a professional presence. You can check it out at zachbrimeyer.com.

More Work Examples

CPI Magazine/Social/Email Designs

Ryan’s Outdoor Services Website

Zach Brimeyer Show Reel Website

Baby Berg Art Website Design

YMCA Supportive Housing Campus Fundraiser Designs

March 28, 2025
Baby Berg Art Website Design

Baby Berg Art Web Design

Home / Articles posted byAlissa

Baby Berg Art Web Design

You can check it out at babybergart.com.

More Work Examples

CPI Magazine/Social/Email Designs

Ryan’s Outdoor Services Website

Zach Brimeyer Show Reel Website

Baby Berg Art Website Design

YMCA Supportive Housing Campus Fundraiser Designs

March 28, 2025
FairWinds Case Study
Home / Articles posted byAlissa

FairWinds Case Study

March 28, 2025

Alissa

Blog
FairWinds Case Study

A UX thought experiment for a hiking app centered on inclusive design
Fair Winds and Following Seas: A traditional way to wish luck upon someone about to embark on a journey, now only commonly used by the US Navy. Meaning “safe journey; good fortune.”
Challenge: Popular hiking apps do not include a variety of accessible and inclusive hiking information, in-depth filters, or a clear way of confirming what the hike advertises.
Objective: Create an app that includes accessible and inclusive features to make hiking more approachable and equitable.

Overview

Develop Research Questions
Initial Research & Competitive Analysis
User Interviews & Analysis
Create Personas
Create Journey Map
Create User Scenarios
Create User Flows
Create Wireframes
Create Prototype
Two Rounds of User Testing

Alissa Brimeyer: Lead Designer
Alex Boudreaux: Lead Interviewer
Kendra Oliver: Lead Researcher
Insights and advice from Feras Nabulsi’s Summer 2022 Design Lab: The Industry Challenge class

Figma
Mural
Notion
Illustrator
Google Drive
Zoom
Otter.ai
Calendly

The problem

Our team of three came together to discuss creating a hiking app that solves a problem that current hiking apps aren’t solving. After a competitive analysis, researching the hobby, and talking to humans who hike, we kept coming back to the same problem. Hiking (especially in its most extreme forms) has historically always been for the white, male, and able-bodied, and current apps and information are considering that and deciding to lean into those same groups. We decided we wanted to challenge that. After all, accessible campgrounds are often fully booked as soon as reservations open. It is not that there is no desire to engage in the outdoors. It’s that outdoor sports have always existed in the realm of gate-kept hobbies.

The audience

As the problem suggests, the audience chosen for this topic is important for accomplishing the goals we have set out. We discussed those with disabilities, women, racial minorities, and sexual minorities, and the different problems these groups face when engaging in hiking. We looked at the lack of information pertaining to these groups, the increased threat of violence, and the complete inaccessibility in some cases, and decided that with the overlapping problems between these groups, we would focus on 2 groups for interviews to learn more. Those groups are those who see themselves as a majority (non-marginalized) group in the world of hiking and those who see themselves as the minority (or marginalized) group. This allowed us to see how people categorized themselves, and how their stories differed while not minimizing anyone’s experience.

Initial interview insights

Our interview purpose was to gain a better understanding of the hiking experience for people whose perspectives are typically not equally represented or included within the hiking community.
These user groups were then distilled into the personas in the following section.

Here were our interview requirements

Interviewing two different user groups
User group 1 (3-5 individuals) self-identifies with marginalized groups
User group 2 (3-5 individuals) self-identifies with non-marginalized groups
Hike at least once a month
Have hiked consistently for at least a year
Use apps or digital maps

Here is what we learned are the biggest problems our minority group experiences while hiking:

Finding safety features that work with no service. Ex. Tracking your location, sending an alert, flagging dangerous areas/obstacles
The accessibility of information. Ex. Size of text/images, easily accessible maps, options to save trails to access later
The accessibility of the actual trail, from parking to seasonal challenges
Finding input from the unique communities they identify with Ex. Community reviews, having other hikers confirm what features or difficulty levels are listed, connecting with other hikers

Here is what we learned are the biggest problems our majority group experiences while hiking:

Finding clear directions/Finding ways to navigate hike while on the trail
Locating noted attractions, lookouts, swimming areas, etc.
Finding the most accurate details on how to prepare for more intense hikes
Finding trails that fit requirements for children or animals

General themes:

A hiking community is desired but can be hard to find
People are looking for discrete forms of safety and inclusion ie. feeling secure without drawing attention to that need
Crowds, noises, accessibility, and finding kid-friendly or dog-friendly areas are major concerns for many different groups for many different reasons

Persona One

NAME: Maya
AGE: 29
JOB: Marketing Manager
Maya is a frequent hiker. She identifies as a minority group and has a disability that impacts her hiking abilities at times. She hikes most weekends in the warmer months and uses Google and apps frequently to find hikes that tailor to her needs.

Needs
Extensive, clear filters for the type of hike (distance, difficulty, accessibility, incline)
Safety feature that notes obstacles or weather alerts
Community input/recommendations

Wants
Community input on accessible trails without having to comb through reviews
A way to gauge how popular/crowded a trail is
Community feature to share hikes with friends
Easy-to-use app

Pain Points
Finding trails that meet her difficulty level and have frequent resting points
Finding hikes quickly and easily
Finding less crowded trails

Persona Two

NAME: Eric
AGE: 51
JOB: Teacher
Eric is a frequent hiker. He identifies as the majority group. He has two young children that he often hikes with and loves to discover lookout points, swimming spots, and history about the area on his hikes. He uses word of mouth and apps occasionally to find hikes that have the features and difficulty levels he wants.

Needs
Safety features for getting lost & not having service
Clear directions
Kid-friendly trails and attractions

Wants
Trails that are good for families
Hikes that have swimming areas or attractions
Clear directions to trailheads and parking options

Pain Points
Finding trails that are kid-friendly, but challenging
Being able to access maps/locations with no service
Unclear directions

Scenario One

Maya found out about an exciting hiking trail from a friend. The hike was pleasant until 3 hours in, when the path forward was flooded and unpassable. She was forced to decide to turn back.
She was upset she missed the rest of the hike, specifically missing out on the view she was hiking to see. Maya would like to warn others about the potential for flooding after heavy rain falls.
Maya finds the trail on the FairWinds app and goes to review the trail. She decides not to review the entire trail since she didn’t complete it but adds the warning about potential flooding. She marks the area on the map where she experienced flooding so others know where flooding may occur. Maya is relieved others will have more information before planning their own hikes in the area.

Scenario Two

Eric was listening to the radio and heard about a hiking challenge put together by a local radio station. He gets a prize if he finishes all the hikes and sends them a screenshot of his profile with the completed challenge. This challenge encourages engagement in the community and promotes the radio station.
Eric logs into his hiking app and goes to the community page. He searches for the specific challenge name and enters the challenge. Eric sees which hikes he has yet to go on and adds those to his saved hikes. Next, he uses the individual trail pages to plan his hikes and downloads the offline maps to hike them. Finally, he reviews the trails he hiked to mark them as completed and finishes the challenge.
He sends the screenshot of his account with the challenge badge and receives his prize from the radio station.

Scenario Three

Maya mentioned to a friend that she has been looking for more people to hike with and found out she is running a group hike through FairWinds. She goes to the app and adds her friend; then, in the community tab, she joins her friend’s group hike as a participant.
Maya receives notifications when others comment on the hiking page and updates about the hike, including necessary gear, weather, and time changes.
When the day comes, Maya uses the offline map to find the location start, meets up with her friend, and joins the hike. She is happy to be hiking with others and that this hike required minimal planning from her.

Key Features

Here are the key features distilled from interviews and research into actionable steps.

The initial flow

A basic wire flow was worked out to determine how these features would connect and form a cohesive app.

Expanded flow

An expanded wire flow was created to determine the optimal page flow and key interactions and components to design.

Testing

Testing was done at two different fidelities and had four main tasks:
Create an account and set preferences and tags
Go to the hiking community page and find a community challenge
Go to another hiker’s profile and follow them
Go to a specific trail page and review the hike
The goal of the low fidelity testing was to understand how individuals interact with the overall page flow and general ideas we are presenting, and the goal of the high fidelity was to understand how individuals interact with the main features and their details and what their expectations for these features’ capabilities are.

One of our first tasks was figuring out how to allow people to search for hikes with accessibility in mind. We sent out questionnaires and held interviews to understand different needs and create a growing list of important information. We asked how people would typically search, what makes an excellent hike, and what makes a bad hike so we could narrow in on the most pressing items for searching.

When considering how users could connect with others, we had to ask ourselves what that looks like in the context of inclusion and safety. As a result, the community-focused part of this app was broken up into three segments. The first was creating a way to add friends and share trails directly. The second was community challenges, which are lists of similar trails in an area, and the last was group hikes, where someone could host a hike that others in their community could join.

Inclusivity was a considerable focus for us, so we had to figure out what personalization would be like with that in mind. We concentrated on allowing people to adapt their level of personalization and be as discrete or connected as they wished. People can use the app to save hikes and search or follow people to get recommendations, personalize their account page, comment on group hikes, and join community challenges.

With the decisions made on personalization and adding friends, we had to clarify the role of users and their pages on the app. After interviewing users to understand what level of interaction they were looking for, we determined it would be best that users could follow others, publicly display their reviewed hikes and completed challenges, and opt to list specific information about them, such as if they hike with dogs, what communities they are a part of, or if they prefer using the app for biking over hiking.

The design system

This is the design system that was created to allow for accessibility and focused on creating components that promoted safety ad community. The colors were modified from old-school national park poster colors and made to be contrasting, clean, and calm with contrasting blue-green and cream colors. The components focused on quick recognition of symbols, for quick use and to convey a lot of information quickly and clearly. To do this icons were tested multiple times before the final version was established.

The Result

The account creation flow was modified by adding a second page where users decide what shows publicly and what acts instead as filters helping users have a personalized experience. Going into further prototypes, we added running or cycling options, as we found that many users of hiking apps are runners and cyclers. Finally, with the accessibility icon, we tried more modern accessibility icons, but we ended up settling on the wheelchair symbol as it was the only one that didn’t seem to confuse and slow down users, including those who identified as having disabilities.

The search and filter options added through testing included features like waterfalls and caves, trail types, crowd levels, terrain, trail maintenance, and the option to avoid high levels of bugs, mud, and fallen trees. The quick view information on the trails in the search are the options people were most comfortable changing occasionally but are still important to them. These were crowds, difficulty, accessibility, and rating. An accessibility level reference page for accurate and consistent accessibility ratings still needs to be created.

The individual trail pages have the same information in the trail search as well as a map, images, directions, a description, reviews, and a detailed list of the features and warnings. These were modified and changed as we understood better how users searched for trails and what helped them the most in enjoying their time outside. In the review section, essential information for others, such as crowds and difficulty, have four ratings that are painless to select from. This allows for quick updates as these factors often change and enables the trail info to be updated easily once the review trends change. The trail pages also have a map feature (that is still being built out) showcasing good views, accessibility issues, and crowded areas.

The challenge pages are shareable lists of similar trails hosted by outdoor organizations and organizations that maintain the trails. These challenging pages are reference points for the community while promoting the local outdoors and giving hikers goals and ideas for new hikes.

Group hikes are scheduled local hikes that hikers can go on to meet people and enjoy being outdoors. We updated the group hike pages based on interviews to signify if the user is going, to include the number of people going, and encourage comments so anyone with questions can have them answered before the hike starts. However, the feature allowing for the creation of group hikes still needs to be built out.

Modifications to user updates on hikes, notifications, and their ability to save hikes were expected as they were what most people seemed to rely on for their primary information on changing conditions and hiking trends. We made more active friends notifications, such as if a friend joined a group hike or finished a challenge. We also added notifications for saved hikes, such as if information changed or if there was an upcoming group hike. We also updated the icons to increase findability and discoverability, including changing the search icon into a map icon and the saved hikes icon into a bookmark icon.

The prototype

Here is the final prototype on Figma. Click through and explore to see the design answers we came up with!

The next steps

As the App is centered on accessibility, additional accessibility checks and tests need to be done to account for screen readers and other accessibility devices.
An accessibility reference page needs to be created, so people reviewing a trail have a standard for accessibility when reviewing an app.
Components need to be built out and made more interactive. Currently, there are few micro-interactions and it should ideally have more to promote use and interaction (and also to be more fun).
The map feature needs to be built out so that Building out the map feature.
A heuristic analysis needs to be done of the key features, as the timeline didn’t allow for the intense scrutiny on usability we would have liked.
Testing and modifications need to be made to determine the discoverability and learnability of the app when usability testers aren’t given context.

The lessons

Many of the lessons I learned throughout this project had to do with collaboration, and many others had to do with prototyping.
Communicate your ideas early and often, and advocate for not only your ideas but those that you like from others.
When working as a team have clear roles and check in to collaborate, brainstorm, and maximize cohesion.
State your intentions with the project amongst the team and make sure you’re in alignment on goals, process, and scope.
The more ideas (good & bad) you put out there, the closer you get to finding the unusually good ones while also getting the chance to challenge your own assumptions about the topic.
As you prototype your ideas test them as often as you can.
Do not get attached to an answer to your problem. Get attached to the problem itself.

FairWinds Case Study
March 28, 2025

The Gym Experience: A Quick Start Guide for Beginners
March 28, 2025

Kindly’s Bicycles | Old Work Review
March 28, 2025

Linder Used Equipment Case Study
March 28, 2025
March 28, 2025