Role

Product Designer

Tools and Resources

Figma

FigJam

Chat GPT

Timeline

65 Hours

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

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.

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.

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.

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

1. Added a CTA button for scholarships on the expeditions page, as requested by multiple users
2. Added a hyperlink to the DiRtBaG scholarship screen on the landing page
3. 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!