top of page

A Social Networking Site for Outdoor Enthusiasts

MOBILE-FIRST WEBSITE

Moving to a new city can be a daunting task. After the move-in process is complete, many people are left to wonder, “How can I make friends here and feel a part of this new community?” Introducing the first social networking site dedicated to bringing outdoor enthusiasts together to enjoy the wonders of nature.

ROLES

  • UX Researcher
  • UI/UX Designer
  • IxD Designer
  • Brand Designer

DELIVERABLES

  • User interviews
  • Competitive analysis
  • Persona discovery
  • Task and user flows
  • Site mapping
  • Wireframing and testing
  • Responsive web design
  • High-fidelity prototypes

SPECS

  • Figma
  • Miro
  • Whimsical
  • Zoom

1. Research

Background

Salida, Colorado is considered a mecca for outdoor enthusiasts providing ample activities year round in the surrounding mountain ranges and the Arkansas River.

The city of Salida has grown at a rate of 2.28% in the last 2 years.
With all the population growth and opportunities for adventure, we want to know if Salida residents would like to connect with other outdoor enthusiasts.

User Research

To better understand my users’ needs, behavior, and motivations, I asked some key questions:
  1. Why did you move to Salida?
  2. How important is it to connect socially with people in the community?
  3. What avenues have you taken to connect with others?
  4. What sort of things do you like to do in social situations? Do you prefer indoor or outdoor?
  5. How do you feel about group activities?

Research Synthesis

I used an affinity map to sort out my participants’ answers. Common themes emerged, thus helping me to define my user personas.

Affinity Map

Why move to Salida?
“I just love the outdoors and meeting new people.”      
          - Kristie, Salida resident
“In the summer, we love hiking and fishing. Camping, I am literally camping every weekend.”                                              
                                        - Erin, Salida resident
“We loved Salida with all the skiing, hiking, and mountain biking and being surrounded by the mountains.”                                             
                                             - Cassie, Salida resident
Do residents want to meet new people?
“To me, it’s important to have some friends outside of my relationship.”                                               - Cassie, Salida resident
“I love doing things outside and with Mac working so much, I want to find others to do things with.”                                                               - Julia, Salida resident

Personas

Chelsea, small town friend seeker
Goals/Needs
  • discover an easy way to connect who are at her ability level when it comes to outdoor activities
  • find a solid friend group outside of her relationship
  • expand her network for her business
Challenge
  • tried meeting people through Facebook groups but they are unorganized and hard to navigate
Melanie, outdoor extravert
Goals/Needs
  • connect with others who love the outdoors
  • find a life partner or friends to enjoy the outdoors with
  • try/learn a new outdoor activity per year
Challenge
  • my schedule makes it difficult to make plans that I have to confirm too far in advance

Key Insights

Salida residents want:

to meet new people in the community
to connect with like-minded, active people
meeting others to be effortless and allow for more flexibility
a tool for meeting people that is more specific to their needs

Problem

With all of this opportunity for adventure and with a steady growth in the population of Salida, there is no easy way to connect with others in the community who enjoy outdoor adventures.

Ideation

Keeping in mind the needs, pain points, key insights, and problems facing Salida residents who want to connect with others through outdoor adventures, I brainstormed a list of various solutions and one solution emerged victorious over the others.
A social networking site dedicated to  bringing outdoor enthusiasts together to enjoy the wonders of nature.

2. Information Architecture

Before building the IA, I needed to understand how users would intuitively navigate the site. I tested this by using a card sorting method with 10 participants to help inform my design strategy in creating the site
map, task, and user flows.Because I used an Open Sort method, I found that people sorted things in quite a few different ways. Some patterns did emerge, however, that helped me formulate my site map.
Optimal Sort Icon.png

Sitemap

3. Interaction Design

User & Task Flows

Because the goal for this website was making it accessible and easy for users to meet people through finding, joining, creating, or changing your attendance status of a group outdoor adventure/“vibe,” I decided on the following flows.
  1. Searching for and joining a vibe.
  2. Creating your own vibe.
  3. Changing your attendance status of an already joined or created vibe.
User Flows
Task Flows

Wireframes

Before creating the high-fidelity mockup, I wanted to go back to a digitalized pen and paper to develop quick wireframe sketches, providing a quick, visual way to understand the structure, hierarchy, flow and relationships between pages and content on my website. The task and user flows provided a map to follow as I built these wireframes.
Low-Fidelity Wireframes
Mid-Fidelity Wireframes

4. Branding & Visual Design

As I conducted research (both quantitative and qualitative), I learned that to make Alpine Vibes feel like a desirable community, I needed to show our core values of empowerment, adventure, connection, inspiration, and wonder.

Mood Board

Style Tile

5. Prototyping & Usability Testing

High-Fidelity Prototype

Usability Testing

The high-fidelity prototype was used in usability testing to validate individual design decisions and to determine the need for iterations. During each testing session via Zoom, I was careful to monitor the time it took to complete a task, paying close attention to body language and facial expressions. I encouraged each participant to talk through each task and provide feedback and ask questions.

FEEDBACK PRIORITIZATION

Following the testing sessions, I organized the participants’ feedback into a feedback grid indicating what worked, what changes were suggested, questions, and ideas.
I then created a prioritization matrix based on the questions, changes, and ideas and placed each one in an area of the matrix either labeled more severe issues, more frequent issues, less severe issues, and less frequent issues. This helped me determine which iterations to prioritize.

Last, I took the feedback and prioritized changes based on how related the changes are to my user flows and personas in order to stay on target with my MVP. I also took into consideration what changes I could make based on the level of difficulty/time it would take to make the changes.

More frequent, more severe issues

FIRST MAJOR IMPROVEMENT

Canceling a created vibe:
  • I learned from my users that canceling a vibe shouldn’t be so easy, especially since they didn’t read the reminders before clicking to confirm the cancelation.
  • I changed the color of the cancel button and warning text to red indicating a warning or encouragement not to cancel.
  • I added the option to change your status of the vibe instead of canceling.

SECOND MAJOR IMPROVEMENT

Search options and layout:

  • I learned from my users to simplify how one searches for a vibe.

  • I omitted the page that provided users with further options. Instead, I linked the search vibes button and search icon to the page that listed the vibes with filter and view options available.

THIRD MAJOR IMPROVEMENT

Vibe confirmation layout:
  • I learned from my users that the vibe confirmation page was too busy with too many calendar and share options.
  • I removed all of the calendar options. Instead, users can set up their calendar in their account preferences.
  • I added only one share button so when it’s tapped, the users’ share options pop up.

FOURTH MAJOR IMPROVEMENT

Changing attendance of a joined vibe:
  • I learned from my users that canceling a vibe is too confusing if you were not the one to create the vibe.
  • I added the option to update your attendance status on an already joined vibe.

6. Final Prototype

After iterating upon user feedback, I now have a fully-functional prototype ready to be sent to developers.
bottom of page