Day 7 of 30 Day UI/UX Design Challenge: Modernising an Outdoor Pool Website! πŸŠπŸ»β€β™€οΈ

Posted
Tags
UI/UX 30 Day UI/UX Design Challenge
Share

🎨 Today’s design task

Thanks to our hungry cat Teto πŸˆβ€β¬›, I had an early start today. After creating a poster this morning (detailed at the end), I tackled today’s challenge in the evening. After yesterday’s struggles, I was eager to dive in, knowing it could only go up from here!

Here is the original website:

πŸš€ My design process

  1. Gathered existing images from the current homepage

  2. Identified essential nav bar and homepage elements

  3. Researched other swimming websites for inspiration

  4. Sketched a lo-fi design

  5. Transferred the lo-fi design to Figma

  6. Selected colours and typography

  7. Designed header and navigation menu

  8. Created a hero section with a featured photo

  9. Developed an image carousel component

  10. Designed an information section (with a pool-shaped image layout). I struggled with price section using green initially.

  11. Built a ticket section outlining purchase steps (I tried to make a form but decided not to include)

  12. Crafted a footer (originally planned dark, but time constraints led to a white design)

  13. Final touches: colour adjustments and alignment fixes

🧠 Challenges and solutions

  • Incorporating red without overpowering the design
  • Time management (Today it took 3 hours for design, usually 2.5 hours plus 30 minutes for blogging)
  • Mentor feedback:
    • Red dot before title might imply being closed; and green for “open”
    • Improve contrast in right ticket area
    • Fix vertical alignment in left ticket area
    • Refine footer icon (currently looks spiky)

πŸ–ΌοΈ The final design

I’m pleased with the overall result, though the ticket purchase section could use some refinement.

πŸ’‘ What I learned today

Investing time in a simple lo-fi design smoothed the design process.

⏰ If I had more time

  • Remove the logo background colour and make the letter white for a darker footer design
  • Implement mentor’s suggestions

πŸ’Œ Any thoughts?

What projects are you working on? I’d love to hear your thoughts on my design or any advice!

Thanks for following Day 7 of my challenge. See you tomorrow for Day 8!

With love and light 🫢🏻
Yoshie

P.S. I completed a poster for the Open Call by https://verlagegegenrechts.de/ today. Learning to use the iPad and Procreate (a gift from my partner for this opportunity) was challenging but rewarding. As a child, I gave up drawing thinking I lacked talent. I still don’t think I have a special talent but now I know that it’s about learning and growing. I hope my painting conveys the beauty of inclusiveness, compassion, kindness, and love πŸ’•

Related articles

Day 6 of 30 Day UI/UX Design Challenge: Decoding Cat Body Language 🐈

🎨 Today’s design task Another day, another challenge! Today’s task pushed me out of my comfort zone, focusing on cat body language. πŸš€ My design process Researched cat body language (despite having a cat, I realised there was a lot to learn!) Sketched initial ideas on paper Selected ethical colour palette Chose font pairing: Poiret One & Montserrat Found and incorporated cat images …

Day 14 of 30 Day UI/UX Design Challenge: Desktop site redesign for Juni! πŸ₯€πŸ–₯️

🎨 Today’s design task Hi, everyone! Today’s challenge is the second day of my 2-day task of redesigning the Juni website! Today, I focused on the desktop version to align with the mobile design I created yesterday. Let’s dive in! πŸ‘πŸ» The current desktop website: πŸš€ My design process Task Review: I started by thoroughly reading today’s task. Current Website Check: I checked their current …

Day 15 of 30-Day UI/UX Design Challenge: Mobile App Lo-fi Design! ✍🏻

🎨 Today’s design task Today’s project was so much fun because it allowed me to think about my baby, Teto πŸˆβ€β¬›β€οΈ πŸš€ My design process Brainstormed key features for the app: Started with a brainstorming session to identify essential features. Defined the primary user persona: Essentially, I used myself as the primary user persona. Listed potential data points to track: Created a list of data …