🎨 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
- Initial Review: I looked at the Juni website on my mobile and listed the things that needed fixing.
- 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:
-
Image Resources: I downloaded images from the website.
-
Style Guide: I created a style guide for colours and typography.
-
Button Components: I designed button components in both filled and unfilled styles.
-
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.
-
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.
-
Header Image: The header photo had poor quality, so I used a different photo of the founders instead.
-
My partner suggested changing the button on the header so I made the adjustment. (The image is the one before making adjustments)
-
Subheader Consistency: I experimented with the size and capitalization of the subheader for a more consistent look.
-
Visible Button: Ensured that the button is visible when the website is opened without scrolling.
-
Footer Design: Created the footer.
-
Copyright and Menu: Since there’s a menu, I only added a copyright message at the bottom.
-
Super 5 Section: After 2.5 hours, I decided to create one more section, “Super 5.”
-
Feature Section: Added a feature section first and struggled a bit with the sizing of logos for consistency.
-
Streamline Icons: It was my first time using Streamline icons, so I had some difficulty getting the exact ones I wanted.
-
Spacing Adjustments: Made some spacing adjustments.
-
Header Adjustments: I wasn’t happy with the button and sign positioning on the header, so I adjusted them.
-
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
💡 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 🙏🏻💞
