Daniel Fox — Explorer, Photographer, and Storyteller.
Daniel Fox is a Canadian explorer who uses his stunning photography to relay stories and inspire people.
Daniel Fox is mainly recognized as an explorer and photographer, but he’s so much more than that. He’s an artist, a motivational speaker, a visionary, and a brand unto himself. The problem with his current website is that it doesn’t capture Daniel’s vibrant personality and doesn’t effectively highlight what services he has to offer.
Our challenge was to redesign Daniel Fox’s existing website, to best reflect his personality, his values, and what he has to offer as a photographer and speaker. Additionally, the final design would need to be responsive for web and mobile.
We had 3 weeks to complete this re-design and restructuring of Daniel’s website.
Meet the Team
Our team consisted of 2 User Experience designers, and one User Interface designer.
We wanted our improved design to:
- Strengthen Daniel’s overall brand image by organizing website content and features
- Increase overall user engagement with Daniel’s website by improving usability
Key Performance Indicators (KPIs)
Indicators of improved user engagement with Daniel’s website included:
- Increased blog traffic and subscriptions
- Increase in users reaching out to Daniel via his website
In order to assess what exactly wasn’t right with Daniel’s existing website, we conducted 3 user tests with people who had never been on Daniel’s website before. We asked them to perform specific tasks (e.g., “Find out more about what Daniel does,” “Subscribe to Daniel’s blog”) as well as give their overall impression of the site.
The main finding from initial user testing confirmed what we suspected: the site had too much content, which was also organized in a non-intuitive way, which led to information overload and loss of user-engagement.
We created an affinity diagram of all existing problems / points of confusion within Daniel’s website, and found trends that allowed us to categorize them into 4 main themes:
- Lack of brand communication
- Ineffective Information Architecture
- Lack of Information
- Non user-centric
We also mapped potential solutions we came up with to address these problems. This helped start our ideation of potential features / organizational methods for the re-designed site.
We analyzed other explorer-photographers, etc. who provided similar services as Daniel. Seeing what they were doing right, and what they were getting wrong (in terms of self-branding, communicating their brand through their website, etc.) helped lead us in the right direction, both design-wise and in terms of information architecture.
We instantly saw that, although most explorers were also photographers, and some were also motivational speakers, Daniel carried the unique quality of providing a little bit of everything; the main difference being his burgeoning popularity with speaking engagements.
However, the detriment to having Daniel show passion for so many different areas was definitely evident in the content overload within his website.
In order to understand what users wanted to achieve from interacting with Daniel / his website, we conducted some interviews. We had a slight delay in getting contact information for actual users from our client, so we got creative and interviewed 10 potential users. Questions we asked them explored areas like exploration, photography, and self-improvement:
What inspires you to go outside?
How does being out in the wilderness affect your wellbeing?
How does being out in the wilderness affect your wellbeing?
Tell me about a time when you were inspired by someone’s words or actions. What did they do that was inspiring to you?
Afterwards, we were able to interview 2 users who had previously worked personally with Daniel and had been on his website. We asked them all the same questions as the potential users, with some more detailed questions like:
Do you / have you visited Daniel’s website in the past? Do you continue to visit his website? If so, how often and for what purpose
Do you think this site accurately reflects Daniel’s values and what he offers?
What would you say Daniel does for other people that makes him unique?
We constructed an affinity diagram from our user interviews in order to track patterns in users’ responses.
Our interviewees were very passionate about spending time outdoors, and their reasons for wanting to be outdoors were multi-faceted but followed similar themes: wanting to de-stress, wanting a change in their perspective, and wanting to challenge themselves.
We wanted to gain insight into users’ motivations for going outdoors, so that we could learn how strategic website content and flow could tap into those motivations, and drive them to interact with Daniel Fox via his website content and services provided.
We found that one of the main ways existing users were landing on Daniel’s website was through social media posts of his pictures. It made sense, then, to ask users why they liked specific photos.
Many users stated that photos were more appealing, and more relatable if there was a corresponding story behind the photo. Users said that stories accompanying photos allowed them to more effectively live out adventures vicariously.
Key Findings: Storytelling
This theme of storytelling remained constant throughout multiple questions. When asked what made an effective motivational speaker, most users said that they found a speaker more genuine when s/he incorporated personal experiences in their talks. They said that not doing so made the speaker seem “preachy.” One user even said that he was only inspired by motivational speakers who relayed their own personal struggles and triumphs.
Key Findings from Existing Users
The 2 existing users of Daniel’s site that we interviewed had responses very similar to potential users’. When we asked them to share their experiences with Daniel they shared that he was warm and engaging but that they didn’t think his website necessarily reflected that. They also stated that his website had too many options, and that having more visual aids would be helpful in guiding their flow in using the site.
We identified that users are feeling engulfed by personal problems, and feeling uninspired. They want to escape the stressors of daily life, and gain perspective. Our solution: A visually appealing, easy-to-understand, responsive website that showcases Daniel’s philosophy, photography, and lifestyle. Through this website, the user could live vicariously through Daniel’s narratives, and feel inspired to apply something from Daniel’s way of life to their own lifestyle.
Once we had a good idea of what users wanted, and what we needed to improve within the existing site, we started planning out how to make the necessary changes.
We completed a card sort with random participants to get a sense of how different categories fit together, in their opinion.
It was interesting to see how different people chose to group topics together, and their reasoning behind that. It definitely helped us consider different points of view for the information architecture.
From the amalgamation of our user data, we were able to create a User Persona: Norman Toth. Norman, a man in his mid-30s who feels stressed out by the competitiveness of city living, likes to spend time outdoors to remind himself that his problems are miniscule, in the grand scheme of things.
Creating Norman helped guide our design decisions throughout the rest of the project. Whenever we’d get bogged down on a potential feature or a different way of organizing content, we’d ask ourselves: “What would Norman do?”
Here’s the user scenario we came up with to show Norman’s use of Daniel Fox’s website:
Norman is a 35 year old industrial designer who is very overwhelmed with all the work he has to do, and personal endeavours. He feels like his problems are all consuming and is in a very self-centric state of mind.
In an attempt to escape this mindset, he starts browsing the internet. He’s on Facebook when he sees a post that a friend has shared on their news feed. Norman sees a captivating photo on the post and is intrigued, so he clicks in. He reaches Daniel Fox’s website, on a blog page. Norman feels captivated by Daniel’s nature visuals, so goes into his “photography” tab to browse more of his work.
While browsing, Norman reads some of the stories behind Daniel’s photos. Through the process, Norman realizes that he and his problems are actually pretty small and insignificant. He feels more refreshed and has a clearer mind, even though his workload remains the same. Norman feels inspired; he subscribes to Daniel’s blog, and decides to make plans to go on a hike this weekend before going back to work.
We also mapped out how Norman would feel before and after using Daniel’s website as a tool for his own self-care.
One technique we found helpful in optimizing the site’s information architecture was by segmenting and re-organizing the content visually. By placing information on different pieces of paper, we were able to re-organize and remove content as we pleased until we were happy with the final product.
We wrote out all the features that we wanted to include, and then grouped them together to figure out key features that we needed to have on Daniel’s site.
Once we hammered down what information we wanted to keep and how we wanted to categorize them, we created a site map to as a visual cue of how the entire website‘s information architecture would be organized.
We also created a user flow, based on our user persona, to illustrate how Norman would interact with Daniel’s website, and what functionalities he would focus on.
In the first part of the flow (blue), Norman clicks on a photo linked from his social media, and is taken to Daniel’s website from there. We decided that having the user land directly on the corresponding photo they were interested in, and having the relevant story available as well would lessen interruption of their interest and flow.
In the second part of the flow (grey), Norman watches video previews of Daniel’s talks in order to get a better sense of Daniel’s speaking style. From there, he chooses to communicate directly with Daniel to book him for a speaking engagement.
To facilitate the flow of ideas, the three of us completed a Design Studio exercise. This involved rapid sketching within a 2 minute timeframe, presenting our designs to one another, agreeing on which ideas were our favourites, and sketching once more to incorporate what the best design elements we had come up with.
Design Studio is one of the most useful exercises to help get an idea out of your head and onto paper, in a quick and collaborative manner. I love it!
Once we finalized our ideas, we produced sketches to visually communicate how we wanted the new site design to look.
In testing out our paper prototype, we found the following feedback:
Speaking Engagements Page
- Users wanted lots of information about Daniel before booking him as a speaker, therefore we decided to add video previews of his speaks to show users his individual style and increase credibility
- Users didn’t like Client Testimonials to be so “in your face” (too much self-promotion), so we only added 1–2 testimonials and created the option to see more if they pleased.
- Burger navigation button on mobile was favoured, but users were confused about its presence on desktop, so we opted for a regular menu instead
- When submitting an inquiry (whether for booking or general inquiry), users wanted feedback when their inquiry was submitted (saying how long it would take to hear back from Daniel)
- We designed this feature as a snippet of story overlaid on photo, which allowed users to stay engaged on the site
After getting feedback from testing our paper prototype, we incorporated changes to our wireframes and created a mid-fidelity prototype.
Some feedback we received in testing included:
- Details of speak as overlay was confusing and distracted from them pressing the actual “preview” button below
- Subscribe to blog section should be above recent posts (not below as was previously done), otherwise it is not as noticeable
- We also removed “Client Testimonials” completely, as users still didn’t think it was a useful feature, and it served the counter-intuitive purpose of making Daniel seem “fake”
After completing our testing, our UI Designer implemented the style she had in mind and we created high-fidelity wireframes.
Check out the high-fidelity desktop prototype:
This prototype brought to you by InVisionAppprojects.invisionapp.com
and the high-fidelity mobile prototype:
Although we felt that our design was a significant improvement from the original, there was so much more we could have done if we had more time. Given more time, we would have liked to:
- Incorporate an idea we had called “WILD Image of the Week,” wherein users would be invited to use the hashtag #wildimageoftheweek in their social media to tag their own adventures. At the end of every week, Daniel would pick a winner and share it on his social media / blog. We thought that this idea would help increase user engagement within Daniel’s blog and social media channels. It would also be an initiative that Daniel could easily sustain while traveling around, as it doesn’t take much time to choose a favourite picture write out a short caption explaining why it won.
- E-commerce page: We didn’t have time to flesh out the e-commerce page; we simply showed how specific images could be bought, and had those link directly to a cart. However, we would have wanted to create a checkout process that reflects Daniel’s idea to have every print sold only once, meaning buyers would be able to purchase unique prints for themselves. We would have organized the products in such a way that his high-end items (high quality prints) were separated from the more mundane items (desktop wall papers).
- Tour Schedule: Daniel and his wife mentioned during our kick-off meeting that he would soon be travelling more as his speaking engagements increased, and was even considering having a mobile studio. We thought it would be such a cool idea to have a place in the website where users could track Daniel’s schedule; a sort of “Where in the World is Daniel?” map. However, since he just started marketing himself as a speaker, we thought it would be better to wait until his schedule filled up, as a full schedule would support that feature on the website better.
The website is currently being developed by Web Dev students at RED Academy, stay tuned for the final product!