Hiker Responsive Website
Overview
The Challenge
Creating a responsive marketing website for the Hiker app to share its value proposition, key features and functionality to prospective app users.
Project Logistics
Role: UX and UI Designer, and Content Strategist
The Site
The Process
I began sketching out some ideas for what the website, making sure to follow the same brand identity as the Hiker app. The website’s design concept built on the idea of scrapbooking/photo albums to capture the feel of travel and adventure.
For the website, I wanted to showcase hiking images, along with the features and value proposition, to convey the delight in the experience of hiking.
UI Inspiration
UI Inspiration was gathered from multiple award-winning sites, with an emphasis on storytelling and the interplay of photos and text. Feel free to access the full UI InVision board.
Wireframes
Using the UI as inspiration, I created sketches, looking particularly at the interplay of text, photos, and blocks of colour to give it a scrapbook affect. The design referenced capturing the memories of vacationing and hiking through scrapbooks or photo albums. After selecting the most promising ideas, the wireframes below are the result.
Mobile
Desktop
Challenges
I wanted to play with the texture between the photos, text and colour blocks, but finding a good balance between the elements and readability was difficult. In the end, I decided not to go with the overlap of text over the colour block and white background, because readability was important for the marketing site’s purpose.
Learning Outcomes
Having only previously worked on app screens, I was excited to have a much larger screen to design for. The process enabled me to think about content in blocks that could be stacked and re-arranged, depending on the size of the screen, like puzzle pieces. So you didn’t have to design everything at once, you just had to break it down into pieces to assemble.