Designing a simple yet effective “Start Here” page
A case study explaining the design process behind creating a start here page.
Task
To design a “Start Here” page for Varun Aditya, an Award winning wildlife photographer.
Context
A “Start here” page is like rolling out the red carpet for visitors and giving them a positive first impression of the person’s or company’s website.
A start here page generally communicates these:
- About the person
- What the purpose of the site is
- Showcasing the content / Achievements
- Where visitors can find the best content
- How they can connect with the person via email or other social networking platforms
I started the whole project with answering the following basic questions to get better understanding of the brief and further provide with an appropriate solution.
Who is Varun Aditya?
- Varun is an Indian Wildlife Photographer.
- He has won the National Geographic Nature Photographer of the year 2016.
- He provides One on One Private photography mentorship tours.
- He is also a Content Creator with 2.5M followers on social media.
- He is a Brand Ambassador for Sony.
Why does he need a Start here page?
- He has a large web presence across multiple platforms, a large body of work, lots of media articles.
- He uses social media for contacting regarding his private tour which could be organised.
How is it going to help him?
- A start here page is going to help his viewers to look at his most recent and popular content
- He will be able to use this as a link in bio on platforms like Twitter and Instagram
- His viewers can reach out to him regarding the photography tour and the data would be organised.
What did I do? The process
I set my priorities straight :
- Linking all the socials
- Creating a personal brand identity
- Easier way to reach out
I made a checklist to strike off :
- First thing first to collect as much as data I could collect about the creator on the internet.
- Understand how photographers showcase their works.
- Define what information the site is going to provide.
- Understand how important is the Visual Identity for a photography page and how it effects its content.
- Then sketch the layout and proceed with designs.
(There is no linear path in a design process, there was a lot of back and forth to get clarification)
☑️ Step 1 : Digging the internet — Research
It was important to understand the personality of the creator and the body of works. He predominantly captures nature photography.
There is movement and flow in his content which I noticed is really important and wanted to bring in the same essence into my design.
Here is the glimpse of the type of content he creates.
User group :
There are two set of users that I assume would visit the site.
- General crowd who would just land up in the site when one uses search engines or through other social media.
- The other set of people would be anyone who want to reach out and want to have a communication with him for professional / business reasons.
☑️ Step 2 : Photographers Inspiration
- Here are some of the cool photographers websites that I looked into
https://ivskaya.com/
https://www.daniellelevitt.com/
http://andylernerphoto.com/
https://www.jimmynelson.com/
https://www.timothy-hogan.com/
- I realised that Photographers have a high quality images to showcase and viewing those picture is of at-most importance.
- The experience of their site is as unique as their photographic work.
- There is a character to their work and a website uplifts that character.
☑️ Step 3 : All things needed for the site
- I laid the information I needed to display, I started with a flow which includes a boarder scope but realised it would deviate from my intended purpose and would make sense as a full blown website.
- I then finalised on a simplified version which is not distracting and is clear in its purpose.
☑️ Step 4 : Choice of Colours and Typeface
- The choice of colour is always one of the most interesting parts of the design process.
- It was certain that the colour palette should be subtle and not over emphasise the photographic content.
- I choose 3 variants of a specific family of colour predominately found in the photos along with the monochromes, which satisfies Colour Contrast Considerations for accessibility design.
- Aeonik is a Neo-Grotesk font with a slight crude appearance and has lot of visual character.
- This suited me perfectly for the kind of style I imagined for the site which would be bold and strong.
☑️ Step 5 : The Good Part ( Ideation and Wire-framing)
- I worked out some basic structure and as I kept sketching in the classic old-fashioned way to keep the ideas flowing, I realised I wanted the design to free flow throughout the site.
- I was clear that I wanted the users to flow through the website like experience it rather than see each part as a section that is rigid in its structure.
☑️ Finale : Making It Real
You can check out the final design on Behance.
I will explain how all the data and research led to the the design decisions that are taken in the project through animations and pullout explanations. (Kindly wait for the animations to load)
Starting off with the Loading Page
- It is one of the most important pages especially for a site with heavy file size to keep the audience engaged and still provide enough time for the website to load.
- It grabs the attention and is also the first look into the website.
- I splashed some photographs and a bold text for the introduction.
Hero & Photo Shots
I kept the very minimal elements letting the users experience the art, when emerging themselves with a soothing music behind.
The Gallery section lets the user interact with the picture, view them however they like.
Achievements and Articles
I wanted some live elements running throughout the site and hence gave these geometrical shapes which flow through each section and connecting them together.
About and Watch More
A simple gif with pictures of the photographer was added to the basic about me section, giving it an interesting look to that section.
Majority of the content that he creates are on Instagram and it is better viewed in that app, hence I gave a glimpse of the videos with Bold CTA — Watch more on top, taking the users to his Instagram page.
Ending with the Important part
One of the goals I made was to have an easy way to reach out regarding his private mentorship. Since the mentorship is very exclusive for just one or two people and very customised according to the journey, there was not much requirement for selling this.
A banner for all the brands associated, right before the contact me section in the footer, is very helpful for business related contacts to reach out and ending with a image collage for some visual treat.
And that is the end of the case study. 🖖🏼
I worked on this project as part of 10k Designers product design bootcamp. I totally enjoyed working on this; it gave me lot of learning in terms of creating a visual style that voices out exactly what a brand is for.
Thanks a ton for reaching the end, means a lot. I am open to opportunities as product designer & UI/UX Designer, also check out the site I built for myself and you can reach out to me on LinkedIn or Twitter.
