Daily UX Challenge #2 — landing page
This is a part of #DailyUX design challenge series. I write about my thought process of approaching 20 different design prompts.
Design Prompt
The most important part of a landing page is the part of it that the user will see when they arrive on the page. Don’t forget the call-to-action!
For whom?
My friend Jun is a soon-to-graduate Ph.D. student in her late 20s. She is also a certified 200-hour yoga teacher, who actively involves in assisting the ongoing yoga teacher training programs at Kripalu School of Yoga.
Jun doesn’t choose yoga because it’s a “hip” thing to do. She is passionate about weaving mindfulness into other parts of her life and empowering people in the same way as she empowers herself.
User interview — understand the purpose
Jun has a plan to start teaching yoga on the side after she graduates, so she wants to have a website to promote her teaching. I asked Jun a few questions to collect more details what is on her “wish list.”
Me: What do you use your website for?
Jun: My website is intended for a yoga business I’ll be creating after I finished my Ph.D. studies. It is for people to learn about me, about my yoga teaching, about my current work, and connect with me if they are interested in Ayurvedic living and yoga lifestyle.
Me: What do you want your visitors to feel when they see the landing page?
Jun: The space of harmony where they feel easily connected with themselves.
Me: Can you use up to three adjective words you’d like to describe the page?
Jun: Earthy, open and harmonious.
Define the scope
I will explore a few concepts of the landing page of Jun’s future yoga business website.
Mood board — set the mood right
I chose to begin with building a mood board because it helps to create an emotional scenario that aligns with what I propose and what Jun wants.
Based on the “keywords” Jun provided, I started searching for and collecting visual elements that are related to harmonious, earthy and open — photographs, illustrations, screenshots of website, and color swatches, basically whatever conveys the feel of my design concept.
Low fidelity wireframe — build the skeleton
Since the content of Jun’s website is relatively straightforward, I decided a simple one-page website would be a good choice for her.
I quickly sketched out a couple of layout options how the landing page would look like above “the fold”.
Since everything below the fold is technically part of the landing page once scrolled down, I also drew out a page overview by listing out all the sections.
High fidelity mockup — put it together
Putting it all together, I came up with the following concept that accommodates Jun’s wish list items:
- I selected the centralized navigation layout over the other option because the symmetry creates a natural connection to balance and harmony.
- Based on the earthy color tone reflected on the mood board, and what I know about Jun personally — she loves all shades of pink color, I picked a peachy shade of orange as the accent color for the call-to-action button. I chose this muted form of orange because of its association with the earth and with autumn, the changing season, I hope the site visitors can make their connection with change and movement. Also, the peachy shade calls attention, yet it’s subtle, friendly and inviting.
- Using one of the favorite photos I took for Jun as the cover photo, along with a simple yoga quote, I hope the site visitors can associate the co-existing energy and harmony captured in the picture with Jun’s personality.
Feedback from Jun: “I loved how delicately you have weaved into these elements of what I’m looking for into a comprehensive picture. Something seems missing, but I can’t tell what it is yet. I appreciate how thoroughly you have considered my needs and my prospect clients’ needs. Let’s talk more about technical stuff when we have a chance :)”
What I learned
Being a UX veteran, often when doing a simple project like this, I find myself jumping to solution fast as a result of gut feeling and experience combined. This practice forces me to slow down and articulate all the reasonings why I made that decision, even if it’s a small one. Good reminder!
Previous pieces in the series (so far)
Challenge #1 — Wallet
