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 8 of 30 Day UI/UX Design Challenge: Redesigning Checkout Process! πŸ‘›

🎨 Today’s design task Today’s challenge felt more comfortable, given my previous experience with forms in both design and coding. As always, Thomas Sensei provided valuable feedback! Task: Redesign the cart/checkout for Freibad Hornberg, improving upon their current design. current website πŸš€ My design process Sketched initial ideas on iPad Researched best practices for login, account …

Day 25 of 30 Day UI/UX Design Challenge: Redesigning a Japanese Website for Accessibility 🎌

🎨 Today’s Design Task Today’s task was both fun and a bit confusing! I focused on redesigning the Japanese website note.com to better align with their other pages and values while improving accessibility. The current website: Task Overview: Day 2: Design Improvement Apply research to create focused improvements for the chosen website. Steps: Refine Improvement Plan: Review Day 1 notes …

Day 17 of 30 Day UI/UX Design Challenge: Poopy Tracker Animation! πŸƒ

🎨 Today’s Design Task I was really excited about today’s taskβ€”creating animations! While I’m still learning, I gave it my best shot πŸ’ͺ🏻 πŸš€ My Design Process Task Review: Carefully read through today’s challenge. Brainstorming: Jotted down ideas for possible animations on each screen. First Animation: Focused on customising the message and selection on the second Data Entry screen. Component …