Day 13 of 30 Day UI/UX Design Challenge: Mobile site redesign for Juni! 🥤✨

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

🎨 Today’s design task

Hi, everyone! Today’s challenge is redesigning a mobile website! I’ve been following Jay Shetty and his wife Radhi for a while now, and when I noticed their Juni website could use a little polish, I couldn’t wait to dive in and make it shine!

The current mobile site:

🚀 My design process

  1. Initial Review: I looked at the Juni website on my mobile and listed the things that needed fixing.
  2. I listed strengths, weaknesses and what to fix for the current site:

Strengths:

  • Fun, joyful energy.
  • Good use of illustrations and colours.

Weaknesses:

  • The spacing is off.
  • Not accessible.
  • Inconsistent: different fonts and spacing.

What to fix:

  1. Image Resources: I downloaded images from the website.

  2. Style Guide: I created a style guide for colours and typography.

  3. Button Components: I designed button components in both filled and unfilled styles.

  4. Discount Code Message: I added a discount code message at the top. The current pink doesn’t have enough contrast with white text, so I made it darker for better visibility.

  5. Consistent Icons: I used icons from Streamline to ensure consistency. I wasn’t sure about the proper sizing and had to google it, but I’m still not completely certain.

  6. Header Image: The header photo had poor quality, so I used a different photo of the founders instead.

  7. My partner suggested changing the button on the header so I made the adjustment. (The image is the one before making adjustments)

  8. Subheader Consistency: I experimented with the size and capitalization of the subheader for a more consistent look.

  9. Visible Button: Ensured that the button is visible when the website is opened without scrolling.

  10. Footer Design: Created the footer.

  11. Copyright and Menu: Since there’s a menu, I only added a copyright message at the bottom.

  12. Super 5 Section: After 2.5 hours, I decided to create one more section, “Super 5.”

  13. Feature Section: Added a feature section first and struggled a bit with the sizing of logos for consistency.

  14. Streamline Icons: It was my first time using Streamline icons, so I had some difficulty getting the exact ones I wanted.

  15. Spacing Adjustments: Made some spacing adjustments.

  16. Header Adjustments: I wasn’t happy with the button and sign positioning on the header, so I adjusted them.

  17. Partner’s Feedback: Made some adjustments based on my partner’s suggestions.

🧠 Challenges and solutions

Flexibility in Mobile Design: Websites have specific rules about font sizes and spacing, but mobile design seems more flexible, which initially confused me.

Text vs. Images: The website consists of many images instead of text, which made it frustrating as I couldn’t copy and paste.

Limited Experience: I’ve only done mobile website design once before, so today’s challenge was valuable. I’m not quite used to mobile design yet, but I’m getting there!

🖼️ The final design

I’m pretty happy with what I created. It’s a shame I couldn’t do all the sections, but I’m excited to continue with website design tomorrow!

💡 What I learned today

Consistency is crucial. Comparing the current mobile website with my design, I noticed that the differences in spacing, typography, and alignment create a different energy. Consistency really makes a difference.

⏰ If I had more time

I’d complete other sections of the homepage.
I’d make additional adjustments based on my partner’s feedback.
I’d add prototypes, especially a product slideshow.

💌 Any thoughts?

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

Thanks for following along on Day 13 of my challenge. See you tomorrow for Day 14!

With love and light 🫶🏻

Yoshie

P.S. I made a few changes and sent my design from yesterday to the company. I don’t have a portfolio yet and was reluctant to create a CV (because of my limited experience and gaps), so I just sent the design along with a list of my design decisions and questions. It was excellent practice for me! I’m so grateful for my partner’s help as always 🙏🏻💞

The design I sent from yesterday’s challenge

Related articles

Day 21 of 30 Day UI/UX Design Challenge: All About Components! 🍱

🎨 Today’s Design Task Today’s task was right up my alley—I love organising and creating lists, so working on components was really satisfying! See task description 🚀 My Design Process Understanding the Task: I began by carefully reading the task instructions to grasp what components I needed to create. Base Components: I designed base components for articles and events, drawing inspiration from …

Day 7 of 30 Day UI/UX Design Challenge: Modernising an Outdoor Pool Website! 🏊🏻‍♀️

🎨 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 Gathered existing images from the current homepage …

30 Day UI/UX Design Challenge

Hello! Welcome to my first blog. I’m Yoshie and I’m so excited to share this new adventure with you here – my 30-day UI/UX design challenge. Here’s where I am, what this challenge is, and why I’m diving into this creative journey. 🙋🏻‍♀️ A bit about me First, let me introduce myself. I look like I’ve been a bit all over the place, with a heart full of love and passion for helping …