Overview
01 Background
02 Discover
03 Define
04 Develop
05 Deliver
06 Next Steps
HoWL: Homer Wilderness Leaders
Crafting a responsive web experience for HoWL.

This project was driven by the mission to create a dynamic, easy-to-navigate platform that reflects HoWL's vibrant spirit while providing a professional interface to inspire trust for parents signing their children up for expeditions.

Role
Product Designer
Tools and Resources
Figma
FigJam
Chat GPT
Timeline
65 Hours
Challenge
Problem • Solution • Process • Objectives
Problem
Users who access the HoWL website to sign up for expeditions want critical information communicated more urgently with clearer visual hierarchy.
Solution
We will provide users with a seamless and efficient sign-up experience, ensuring that essential details stand out prominently, contributing to a more intuitive and user-friendly platform.
Process
Through competitive analysis, design thinking, and deep user research, we defined the problem, ideated on solutions, prototyped the product and tested it with users.
Research Objectives
1. Establish Business Goals and Objectives
2. Identify Challenges and Pain Points
3. Define Key Features and Functionality
4. Understand User Motivations and Expections
Discover
Primary Research • User Interviews • Competitive Analysis
Primary Research
There are a myriad options for enrolling youth in outdoor adventure programs in Homer, Alaska, but there is one key term that sets HoWL apart from the rest: FUN. This was emphasized through every user interview, conducted remotely over Zoom, and it became clear that this would be a fundamental aesthetic to communicate through design iterations.

User Interviews
HoWL is a 501(c)(3), so we had the opportunity to interview a total of 5 participants, including board members, the founder, and users of the current site. We established high-level areas for improvement to the current site's UI and information architecture.
Participants identified opportunites to clarify information regarding upcoming expeditions and strongly emphasized a need for a more modern UI presentation with clear typography styles and an update to the brand's color story.

"I would emphasize the importance of a website that balances the spirit of fun with a professional and trustworthy image."
- Tela (User Interviewee)
Competitive Analysis
We discovered many opportunities to improve the information architecture for the site through competitive analysis of similar programs in the Homer-area and beyond. While an update was clearly needed, there was an express desire to maintain the previous site's grand use of imagery (as showcased throughout this case study).

User Personas
We created two user personas to represent the board/administration and the users, who are primarily parents signing their kids up for expeditions.


Define
POV & How-Might We • Affinity Mapping • User Personas
POV Statement
“I’d like to explore ways of presenting the site’s information architecture in a way that communicates the most critical information urgently because users want access to the necessary information quickly and the ability to intuitively navigate all remaining information.”

How-Might-We Questions
How might we restructure the site’s hierarchy so that users can easily access critical information?
How might we update the system of registering for expeditions to decrease user frustration?

Affinity Mapping
FUN is the phrase that was mentioned most often, by far, in the user interviews. Beyond this fundamental dynamic, we were able to identify a clear feature set, ideas for brand distinction, and challenges with the previous site's usability.

Develop
Project Goals • Feature Set • Prioritization • Site Map • User & Task Flows
Project Goals
We developed a set of project goals to reflect the design thinking process.

Feature Set & Prioritization
We developed a comprehensive feature set, including many "suprising and delightful" and "come come later" ideas. We established that the core features for this deliverable would mirror the previous site, but with clearly defined updates to the site's information hierarchy.


Site Map
A comprehensive site map detailed the direction for prototyping. We ended up creating a dedicated page for the HoWL Team after getting feedback on this site map. Creating user flows and task flows further revealed a clear path for prototyping.



Deliver
Low Fidelity Wireframes • Style Tile • Prototype • Usability Testing • Iterations • Next Steps
Low Fidelity Wireframes
We sketched outlines for the main page, sign up page, recipe history, recipe exploration and a sample recipe page.

Style Tile
Before prototyping, we carefully crafted a component set with color and typography style sets, iconography, scalable images, and custom buttons and fields.

Prototypes
Desktop
Mobile
Usability Testing
We conducted usability testing with the following metrics for success in order to validate our design decisions.
Task Successful Completion Rate
Users navigated the prototype with ease, indicating its usability.
Task Completion Time
Each task was completed in less than 30 seconds, indicating a successul launch of the prototype.
User Satisfaction
Participants consistently expressed high levels of satisfaction, with all rating the prototype at 10/10.
Perceived Ease of Use
Participants equally rated the ease of use of the prototype with a consistent 10/10 rating.
Feedback on the Prototype
- Provide a CTA button for scholarships on the expeditions page, as requested by multiple users
- Adding a hyperlink to DiRtBaG scholarship screen on the landing page
- Make the supporters module more visible - possibly create a dedicated page
- Create a dedicated Expedition page with more details (who is leading, what gear is available for rent from HoWL, what gear needs to be purchased, etc.)
- Additional board modules were requested by the founder
- Explore an option to showcase a slideshow gallery
- Create a peer training page
- Research and iterate on options for a ranked choice sian ups
Iterations
There were very few revision requests that fell within the bounds of the agreed-upon
screens and layout, but the updates provided a clear improvement to the site's
consistency and navigability.
Priority Iterations
- Added a CTA button for scholarships on the expeditions page, as requested by multiple users
- Added a hyperlink to the DiRtBaG scholarship screen on the landing page
- Added an additional "Staff & Boardmember Emeritus" module



Future Iterations
Further feedback we received on the product pointed out the following opportunities to improve the design in future iterations.
- The HoWL logo is incredibly charming, but could use an update to increase accessibility as it is difficult to read at small sizes. I have recommended an update to the logo should we move forward with further design iterations.
- Making the supporters module more visible - possibly by creating a dedicated page
- Creating a dedicated Expedition page with more details (who is leading, what gear is available for rent from HoWL, what gear needs to be purchased, etc.)
- Exploring an option to showcase a slideshow gallery
- Create a peer training page
- Research and iterate on options for a ranked choice sign ups
Next Steps
- Continue User Research to validate future design iterations
- Test new iterations
- Hand off to developers
Reflection
The HoWL Responsive Website successfully enhanced the user experience and engagement by improving the website's navigation, updating the user interface and branding, and maintaining a focus on the organization's key term: "FUN." Through interviews, goals were identified, including the preservation of epic photography, the introduction of a consistent color style and typography set, and an improved information hierarchy.
Areas For Improvement
We identified a problem statement in User Interviews that we weren't able to explore with the given time frame of 65 hours: Users are frustrated with expeditions filling too quickly. We hope to continue working on the design in partnership with HoWL to explore possible solutions to this problem.
Conclusion
This project presented an exciting opportunity to transform the online presence of HoWL, enhancing its appeal to both the energetic participants and parents, whose trust in the brand is paramount to the success of the organization. By addressing the identified areas for improvement, the project succeeded to not only meet but exceed user expectations, providing an enjoyable, informative, and visually appealing platform that aligns with and enhanced HoWL's brand identity.
Thank you for your interest in the HoWL responsive web experience!





