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

Improving Accessibility on Mission Controlโ€™s Website! โœจ

๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ”ฌ Accessibility Insights from My Review While reviewing Mission Controlโ€™s website, I identified 13 accessibility and UI/UX issues on the homepage. Out of these, 7 required coding fixes, but I could address 6 through design changes. Letโ€™s dive into how I solved them! โœ… How I Improved Accessibility and UX Colour Contrast: Green/Yellow Buttons: The original green and yellow buttons didnโ€™t provide โ€ฆ

Day 23 of 30 Day UI/UX Design Challenge: Making Accessible! ๐Ÿ‘€

๐ŸŽจ Todayโ€™s Design Task I was excited about todayโ€™s task because I got to turn the accessibility issues I identified on Day 22 into actual design improvements! ๐Ÿ› ๏ธ Today’s challenge: Choose one page or screen and create a redesign that addresses the accessibility issues: Sketch or create a digital mockup of your improved design Focus on fixing the problems you identified while maintaining the โ€ฆ

Day 5 of 30 Day UI/UX Design Challenge: Meditation app with Psyduck! ๐Ÿฅ

๐ŸŽจ Today’s design task Today was probably my most challenging task yet โ€” designing a mobile meditation app featuring Psyduck! As a former web developer, mobile apps are new territory for me, but combining meditation with one of my favourite Pokรฉmon made it exciting. ๐Ÿš€ My design process Thoroughly analysed the task requirements Sketched initial ideas on my iPad using Freedom app Researched โ€ฆ