Overview
METHODOLOGIES:
- Heuristic Evaluation
- Competitive Analysis
- User Interviews and Contextual Inquiries
- User Flows
- Wireframing
- User Testing
- Prototyping
My Role & Objectives
- Concepted and synthesized product vision and function with founders
- Produced design layouts and sketches of screens and interactions
- Conducted user research and testing, reiterated product
- Created wireframes, layouts, mockups and pixel-perfect designs for initial funding/recruitment website
- Visual Design
CHALLENGES:
- Time/pressure
- Designing a website with a demo for a product that will not have been built yet
- Grasping a product that was not fully conceived of -meant having to conceive of it more fully myself
- Juggling workloads and roles as a solo designer with various project targets
- Writing copy (is always a challenge)
- Striving to avoid looking "too established" and "not start-uppy enough" - which came up later
- Handling clients as a freelancer (which can always be tough)
TOOLS USED:
- Omnigraffle
- Sketch
- Photoshop
- Illustrator
Wireframes for the phase-1 home page for the product site:
Intention: To recruit new members and entice potential funders.
Early iterations were to:
Marketing calls to action
Ways to demo product, explain features
Login/account creation
Content
Composition/placement
WEbisite MVP
Solution:
Need:
1. Educate the user on the product and it's benefits.
I wanted to do this visually with minimal text, and hoped to allow users immediate, limited use of the product, but it would not be built in time for the initial site launch, so that had to wait.
2. Entice fundraisers and new members.
I decided to show off the product through a video plug - detailing a real climber's footage up a mountain, but it would not be an interactive, learnable user trial until later site updates.
3. Gain user sign-ups.
This was to form the first baseline, so there were no comparative metrics (yet), any sign-ups would be a success indicator
1. Designed a 1-2-3 -step info graphic for the site during the pre-built period of the product.
Later this would be changed to an actual trial experience of a climb.
2. Included a demo video of an actual climb we had, and informative calls to action
3. Included a signup form to create new accounts.
I kept it as simple as possible so users weren't deterred from joining.
***Later iterations included more info such as "Where do you live?" to provide auto-calibrated maps per user.
Last concept iteration (click to enlarge)
First landing page concept
Testing proved it more effective to:
Present sign-up earliest/highest on the page
Follow with steps to how to use the product and/or highlights of the product
One of my challenges was that the design of the site would be affected by the function and flow of the product, which still wasn't formed yet.
So I began product design sketches...
User dashboard concept sketches..
User and client interviews revealed:
Valuable interest points users desire/need
Country of residence was important.
I found users would like a profile that would auto-locate their local peaks
I was informed by this need to include an added input feild in the sign-up form: "Where do you live?"
When I reach a design I'll think I'll go with, I move to higher fidelity.
Amusement Points!!
Color Choices
- Orange = logo, playful, adventurous
- White + Blue to reflect outdoors and high-altitude
- Black and/or 80% grey accents to impart the strength and boldness of the brand
"If our brand [Trail Titans] were a person, it would probably be that character, 'The Most Interesting Man in the World'."
-Client interview
Iterations
I moved to a map eventually to display the locations of mountains that had been trekked (and could be virtually visited) via Trail Titans.
I then kept the infographics explaining the product as roll-over interactions.
Ultimately, I spliced iterations of the best parts from each iterations/idea into the final iteration which includes the product trial/demo, a map of the mountains to see, and information about the product and it's founders, and the sign-in form.
Sign-In Before and After
