Ranson VorpahlUX DesignerNY, NY

Designed by Ranson Vorpahl

ABOUT

I’m incredibly passionate about solving real world

problems within a team and cohesively building

solutions that leave a positive impact. I’m passionate

about personal growth and learning from my mistakes.

I’m passionate about creating inclusive environments

where everyone knows they have a voice. I’m

passionate about learning and expanding my skill set. I

honestly believe Fungi could save the world.

I was born and raised in Central Florida - now living in

NYC, pursuing my career in User Experience.

Designed by Ranson Vorpahl

Ranson Vorpahl

Designing acurated and culturally immersivetravel experience.

ViaHero

OVERVIEW MY CONTRIBUTIONIn today's travel climate, users are looking for a more culturally immersive and conscientious way to explore. ViaHero fills this role by allowing users to choose a Hero (local of the community) to create a full travel itinerary based on their interests. Although this is a growing market, it is still a niche form of travel. I am apart of a team to find how we can turn this niche form of travel into a service every traveler will want to use.

As the sole UX/UI Designer, I was required to collaborate with marketing and our dev team to redesign different elements of their website to improve conversion rates. We tested our hypothesis with rabid A/B testing of our new design against the older version.

UI Design/Branding/Responsive Design

The Challenge

The Team

ViaHero has been around since 2016, and its goal was to find a way to create a memorable and sustainable travel experience. Their solution was to create a platform that allows travelers to connect directly with a local who would build a curated itinerary inspired by their travel habits.

The benefits are two-sided by giving a more immersive "off the beaten path" experience to the traveler and directly injecting the traveler's money into the community. They created a more conscious form of travel planning that circumvents travel agents that do not have access to the same type of experience as a local who grew up in the environment.

Even though they had an impressive functional product, there was still some work that needed to be done. The main goal was to tie in branding throughout the whole experience. Making sure that users feel they are on ViaHero while going through the marketing funnel. The next goal was to modernize our experience and find ways to explain what our service is more clearly. I worked closely with our marketing and dev team to make sure that our goals were attainable and consistent with the ViaHero brand.

I worked closely with our Project Manager and Founders on ideation and execution of design to make sure it is on-brand. I also worked closely with our Dev Team to make sure that our plans were attainable within the timeline that we set. We worked quickly and e!ciently to execute our work and validated our hypotheses through rapid A/B testing.

Core Team

Kelley Louise - Project Manager/Head of marketingRachel Hawkes - FounderGreg Buzulencia - FounderMark Farnum - DeveloperLisa Storey - Developer

Design & Research Tools

Sketch AB Testing Analytics

Main Tasks

1. Modernize the destination section on the landing page.2. Redesign our sample guidebook to show what benefits travelers get when using ViaHero

Destination Redesign

Overview

ViaHero was rapidly expanding in late 2019 and at the time they had their destnations listed at the footer of the page. We wanted to create a section that showcased the areas where ViaHero operated and have them organized by region. We also wanted to employ a mobile first design strategy that could scale to larger screen-sizes.

Here are a few Mid-Fi designs that I created in Sketch for my project manager:

This design is too large and requires users to scroll.

* Red border indicates phone screen.

My inital goal was to present the destinations in a dynamic and visually stunning manner. These layouts would also afford to scale to larger screen sizes as well, but they took up too much real estate on the screen which would cause the user to have to scroll. Another thing to point out is that we do not have a landing page for the regions at this time so we needed to get rid of that section as well.

Even though this iterations fulfills the previous goals we still had the issue of one region being below the fold. We solved that by overlaying the countries name over the image and removed the drop shadows.

Updated goals:

Second mobile iteration & Desktop iteration:

• Remove regions section• Design to fit screen size and will not cause user to vertically scroll.• Include a search bar• Include a button to see an ‘All Destination’ modal window

One region was partially below the fold so we decided to revisit the design.

Countries are seperated by their regions.

Implemented a horizontal scroll to save on screenspace.Incorporated drop shadows and rounded courners for a clean and modern look.

Countries are organized by regions and displayed horizontally.

Final Iteration

9:41

Sample Guidebook Redesign

Overview

Our previous design for the sample guidebook did an excellent job of showing what the product looks like, but what it didn’t do was help users identify the nuances that make ViaHero such a fantastic service. So, to solve that, we decided that we should create windows that let users know what is unique. This process was very straight forward and did not have a lot of design overhaul, but was mostly additive design. We also wanted to design it to be responsive.

Since this is such a large screen, I’m going to include a link to the published file. Please view on both desktop and mobile view to see how adapts to the screen size.

Here is a link showing the final design. Please view on both mobile and desktop screen sizes.

https://www.viahero.com/pages/sample_trip_plan/

Show demos of website on screens

Please let me know if you want to see other projects I am currently working on with ViaHero.

Designed by Ranson Vorpahl

Creating a participation platformthat is accessible and personalizedfor users with a rigid lifestyle.

EcoBoost

Conceptual Product Design / iOS Application / Branding / Environmental Conservation

AT A GLANCE MY CONTRIBUTION

We created EcoBoost, a mobile app that empowers urban dwellers to participate in environmentally-focused grassroots initiatives that are low-commitment, tailored to their interests, and can work within their schedule. It also opens a portal for users to attend educational classes based on their interests.

As a UX Designer, I participated in the full design process.

My most substantial contributions were in the User Interview process, data synthesis, design studios, prototyping, final iterations of the HiFi prototype, and all future iterations of it.

RoleUX Designer

MethodsSprint Methodology, Screener Survey, User Interviews, A!nity Mapping, User Personas, Competitive Matrix, Moscow Mapping, Design Studio, Usability Testing

TeamChavi Kagan - Scrum MasterKirya Goldfeder

Sketch, Invision, Keynote, Google Suite, Zoom, Otter, Trello

Tools

Main Tasks

1. Identify a problem space within the topic of environemtal conservation. 2. Present a solutions to internal stakeholders.

TimelineWe had two weeks to complete this sprint.

ProblemHow do we promote a more environmentally conscious lifestyle in Metropolitan cities?

SolutionWe created EcoBoost, a mobile app that empowers users to participate in

environmentally-focused grassroots initiatives that are low-commitment, tailored to

their interests, and can work within their schedule.  It also opens a portal for users to

attend educational classes based on their interests.

Tailored EventsWhether you want to explore something you’re already interested in or looking for

something new, we’ve got you covered.

EcoBoost recommends events based on your chosen interests, during onboarding, with

the option of exploring other areas after. This allows you to stay more conservative with

your choices or become more adventurous.

Event Details At A GlanceAll the information you need to make sure you’re going to the place that best fits you.

Want to know who is heading the event? Want to know if it is labor-intensive? Is it within

your maximum travel distance? Don’t worry; it’s all in here.

Upcoming Events 

EcoBoost puts all of your upcoming events into one, easy to find, section so you’ll never

miss a date. It also gives you recommendations tailored to your interests.

Because it’s easy to forget about commitments when living in the city.

OVERVIEW

Our Process

User InterviewsSynthesisA!nity MappingPersonas`

ResearchIdeationFeature PrioritizationDesign StudioWireframesRapid PrototypingHiFi DesignInteractive Prototypes

DesignUsability TestingDesign IterationsStakeholder Presentation

Evaluate

RESEARCHInitianl Hypothesis“We believe that making environmental clean-up opportunities more accessible for

busy, environmentally-conscious users, increases the levels of participation in volunteer

clean-ups. This strengthens the connectivity with their communities and their local

environments.”

Screener SurveyWe created a screener survey that we sent to the general public. It was created from our

initial hypotheses to gain insights into their history with environmental conservation,

how they discovered these opportunities, and if they still participate today. The

questions are based on our initial hypotheses. Out of fifty responses, we saw that 95% of

our respondents rated their interest in environmental conservation from moderate to

very high.

We chose five respondents that fit our criteria user interviews, and here are some insights.

“My wife and I wanted to participate in our community garden. We walked by to find information, but nothing was posted to help us learn more. Fortunately, we ran into the organizer while they were walking into the garden. If that didn’t happen, then we probably would’ve never found and information to help us learn more about the community garden.” -User

“There is poor community outreach to educate the public on environmental conservation” -User

“I want info about environmental conservation to come to me” -User

“I would like to see environmental opportunities that are tailored to my day-to-day schedule and lifestyle” -User

After a!nity mapping and synthesizing our data, we saw recurring trends. Here are some of them:

• Our users discovered these opportunities through o"ine sources such as: Type something

• Walking by a community garden and running into the coordinator.

• Finding an ad in the newspaper.

• Sailing near an island that hosts a summer camp where they educate youths on environmental conservation and sustainability.

• 3/5 users lived in NYC and participated in different conservation opportunities that the other users were not aware of, showing an opportunity to centralize the information.

• “I’m too busy to spend a lot of time on environmental conservation.”

• “I had trouble finding opportunities for conservation near me.”

• “I would use/appreciate tools that will help me learn about opportunities for environmental conservation.”

Revised Hypothesis“We believe that making opportunities for local environmental conservation more accessible

for busy environmentally-conscious users will increase the levels of participation in local

opportunities and events. This will strengthen their connectivity to local conservation and

being environmentally conscious in their lives.”

We realized that our hypothesis was too specific and could skew our data. We

automatically linked Volunteering & Environmental Conservation, which was based on our

assumptions. From there, we reworked our initial hypothesis in our benefit before we

started to synthesize the data. This allowed us to put the volunteering aspect aside for a

more accurate analysis.

Persona

To better guide our design and enable us to empathize with our users, we further refined our synthesized data and created a persona.

Problem StatementPeople are aware that environmental conservation needs to be addressed, but find it

hard to identify ways to help out that are accessible to them in the city.

Raya finds it challenging to participate in local conservation opportunities due to the

lack of information available online. How might we help her get the information she

needs to participate in local efforts for environmental conservation?

DESIGN

Feature PrioritizationWe brainstormed a list of features that we felt should be available in EcoBoost but we

understood that for an MVP, we only need the most valuable. We accomplished this by

utilizing the MoSCoW Map method.

We chose these features on account of feasibility. Having features like a utility

calculator align with the brand’s philosophy, but is not a feature we felt was within the

core function of EcoBoost. Therefore it can be put on hold for a future update.

Protoype EvaluationWe discovered through our MidFi usability testing that the iconography that we chose for

two of the pages was not as intuitive to the user as we first thought it was. When asked

to find “Their Events,” which is accessible from the calendar icon, users had a

challenging time locating it. 

When users explained to us why it gave them a hard time, they would compare other apps

that provide similar services like MeetUp and Facebook Events and how they designed

their navigation.

“In a calendar, I would expect to find something that I have already scheduled; I wouldn’t

usually go to a calendar to search for something”

HiFi User FeedbackAfter making our improvements, we went out for another round of usability tests.

Our design changes flourished with our users from the addition of more explicit

iconography and adding labels below the icons. We only had one issue which had

to do with the contrast of our navigation bar that could limit accessibility.

HiFi RevisionAfter we reviewed the feedback, we made changes to the iconography that was

influenced by what we were told from our usability test. From here, we went to build our

HiFi Prototype.

Design Studio, Wire-Framing, And Prototyping

After our feature prioritization, we had a design studio for our app to create a

collaborative design process. We knew that we wanted our navigation to include a home

button, a button for finding events, a button to take you to your upcoming events, and a

button for more options. 

 We picked the best design features from each session to influence our LoFi wireframe

design. After some testing on our LoFi prototype, we proceeded to create a MidFi

prototype to test with more users.

LoFi MidFi HiFi

Home Find My Events More

The Navigaion Icons of our MidFi prototype were not as inutitive as we had thought. Our users found them misleading so we decided to find more appropriate icons and label them to make it easier for our users. We also changed the color of the selected Icon to keep within the brand.

OLD

NEW

https://invis.io/49TELZ13HWUInVision Prototype

EVALUATEStakeholder Meeting

Next Steps

For our stakeholders, we provided a Specification Document for the proposed

development.

After the presentation, we were given the green light to proceed with developing

EcoBoost.

• Redo our typography and color scheme due to the sterile nature it gives off.

• Create more “delight” for our users through the use of micro-interactions.

• Refine our UI through more usability testing.

Design

• Create the ability to sync with your preferred mobile calendar.

• A social media feed with the ability to create a network with people who have

common interests.

• A guide for every-day-life best practices for environmental conservation and a list of

approved brands that participate in consumption reducing initiatives to aid users

outside of the app.

• Create onboarding for event creators.

Features

Designed by Ranson Vorpahl