UX/UI Design for a Landing Page

To make a user-friendly experience for Daniel, I created a landing page both responsive to mobile form and laptop/computer form. Given that he isn't too familiar with types of teas, but is searching for a gift for his wife, I mainly explored different UI elements to draw in his attention, and considered the hierarchy of the elements on the page. This includes creating a theme that is friendly to someone unfamiliar with teas, using sensory details and unique/playful interaction.

Computer/laptop design view: https://www.canva.com/design/DAGTqR3TaFw/iWUDe3ELTGIx9JXRAfm8vQ/view?utm_content=DAGTqR3TaFw&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h0f11ab1bc0

Mobile phone design view: https://www.canva.com/design/DAGTqrVVXPY/BVAJzuPpuyTrc_BUiqrYZQ/view?utm_content=DAGTqrVVXPY&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=hef29d1b1b4

Wireframing: Figma
- The Figma tool allowed me to construct a rough wireframe of the elements on the page, and consider one-by-one, the content, actions, and feelings the user will experience. Under "Assets," I chose a wireframing starter kit, which included both a mobile and computer layout.

Prototyping: Canva
- For prototyping, I chose Canva, as it contains many UI elements I found particularly helpful to interact with the user. Starting with a plain template for both the mobile and computer designs, I used the wireframe to help guide me.

In order to create structure and intention for the landing page, I could not start without an outline about what to consider and include, all based on the user himself, Daniel. I keep a design exercise notebook with me, in these small but impactful steps of brainstorming! This step is important to ensure the story flows properly as I put it together.

After getting the ball rolling with ideas and intentions, I used Figma to create a wireframe for both the mobile and computer design of the landing page. I considered the order of elements on the page, and the steps of the story that Daniel will experience. For each section of the page, I made note of the specific content, actions, and feelings. Daniel is the main character in this story after all.

In the final step, I used the Canva website to construct a high-fidelity design for the mobile and computer formats. This is when I began to consider the details for UI elements, and holding a magnifying glass to small, yet impactful details.