In a hurry? Watch a short video of the prototype:
👀Overview
Redesigned the website for a content-heavy personal brand with over a million followers. I focused on improving navigation and layout while preserving the creator’s personality and voice. My work helped fans explore videos, collaborations, and content more easily.
📋Problem statement
BeerBiceps.com needed a redesign to enhance the user experience, especially for mobile users who made up over 50% of site traffic. The existing site lacked a user-friendly mobile view, clear navigation, and essential information pages, limiting its accessibility and effectiveness for a growing audience.
🎯Goal
Responsive Design: Create a mobile-first design, a responsive design to cater to the majority of BeerBiceps’ users.
Essential Pages: Add key information pages like "About Us" and "FAQs" to improve transparency and user support.
Streamlined Navigation: Simplify the navbar by removing irrelevant items and emphasizing easy access to core content.
Research
For the Research & Analysis phase, I examined website analytics to understand user behavior and pinpoint pain points. High mobile traffic emphasized the need for a mobile-friendly design. Then, I conducted competitor research to identify best practices in responsive and user-friendly design, setting a benchmark for improvement.
During Sitemap Revision, I streamlined navigation by removing irrelevant links and refocusing on core categories and recommended adding an “About Us” page for credibility and an “FAQs” section to address common user questions, enhancing clarity and trust.
📑Wireframe
🧠Learnings
Deepened UX Expertise: Leading a user-centered redesign helped me hone skills in identifying user pain points, analyzing site architecture, and developing intuitive navigation flows.
Mastered Mobile-First Design: This project solidified my understanding of responsive layouts, particularly how to prioritize a seamless mobile experience for a user base largely on mobile devices.
Enhanced Collaborative Skills: Working alongside Azhar allowed me to exchange knowledge and emphasized the importance of effective teamwork in achieving a successful design.
Knowledge Transfer: I had the opportunity to share my UX/UI insights with Azhar, fostering a collaborative and mutually beneficial learning environment.
Exploration of WordPress: This project marked my initial experience with WordPress development, which provided a valuable foundation for future web design work.
Special thanks to my friend for entrusting me with the project, which allowed me to broaden my horizons.
