Fine Feather Mobile App Redesign
UX/UI Case Study
PROJECT OVERVIEW
Fine Feather is a local boutique offering a unique range of beauty essentials — from skincare to books and everything in between. I took this brand as the focus of a self-initiated UX project, designing a mobile app experience that simplifies navigation, enhances usability, and reflects the boutique’s personality on smaller screens.
The existing website lacked mobile optimization and included features that didn’t translate well to handheld use. My goal was to refine the user experience by removing friction points and creating a cleaner, more focused mobile design.
MY ROLE
-
UX/UI Designer
​
-
Wireframes & Prototypes
​
-
Visual Design
​
-
Mobile-First Strategy
TOOLS USED
-
Figma
-
Adobe XD
STYLE GUIDE
RESEARCH & DISCOVERY
To begin the project, I conducted an informal UX audit of Fine Feather’s website to identify pain points for mobile users. The original site was designed primarily for desktop, with several elements that made the mobile experience cluttered and inefficient — including small touch targets, inconsistent navigation, and unclear product categorization.
Based on product offerings, brand voice, and social media presence, it was clear that Fine Feather targets young mothers, college-aged adults, and health-conscious young professionals — many of whom shop on mobile devices during busy, on-the-go moments (e.g., while commuting or multitasking at home).
From this, I created a basic persona to guide my design decisions:
​
User Persona Snapshot
Name: Amina
Age: 28
Role: Full-time working mother
Goals:
-
"Quickly find self-care or gift products"
-
"Order during downtime (lunch breaks, late evenings)"
-
"Save favorites or repurchase easily
Frustrations:" -
"Overwhelming site layout"
-
"Too many unnecessary clicks"
-
"Hard to navigate product categories on a phone"
UNDERSTANDING THE USER
By considering these behaviors and goals, I knew the app needed to be clean, direct, and low-effort to use. This meant simplifying the layout, minimizing decision fatigue, and making core features (like browsing and checking out) easy to reach within 1–2 taps.
LOW-FI WIREFRAMES
Early low-fidelity wireframes helped define the app’s structure and allowed for quick iteration. These served as a blueprint to walk stakeholders through the core layout before introducing visuals.
Sketch
Creating wireframes is an essential step in the UX design process. It allows designers, developers, and clients to focus on layout, content hierarchy, and user flow—without being distracted by visuals like colors, images, or branding. This step was key to validating the app’s navigation and ensuring users could intuitively browse products, view details, and make purchases.
FINAL LOOK
PROTOTYPE
The final mobile app design for Fine Feather achieved a more focused, user-friendly experience tailored to its target audience of young mothers and adults. By removing distractions and restructuring key screens, the app now prioritizes fast, intuitive browsing and a smooth path to purchase.
This project helped me sharpen my ability to translate an existing desktop experience into a mobile-first design — one that respects user context, habits, and time. Through wireframing, prototyping, and continuous iteration, I delivered a solution that felt aligned with both the brand’s values and its users' needs.
​
The end result: a mobile experience that feels personal, calm, and easy — just like shopping at a trusted local boutique should.
TITLE OF THE CALLOUT BLOCK
LESSONS LEARNED
This project challenged me to think critically about how real users interact with mobile interfaces — especially when adapting a desktop-first brand to a smaller, more focused experience. It pushed me to prioritize simplicity, empathy, and purposeful design decisions throughout the process.
-
Mobile-first isn’t just about resizing — it’s about rethinking.
Designing for mobile taught me to prioritize core actions and eliminate anything nonessential. I learned how to guide users with clarity and economy. -
Understanding the user is everything.
Empathizing with who was using the site helped me make more confident design choices. Knowing that my users were multitaskers, often time-poor, meant I needed to minimize effort on their end. -
Low-fidelity wireframes are powerful tools.
They allowed me to test ideas early, stay focused on structure, and avoid over-investing in polished visuals too soon. -
Visual hierarchy can make or break the experience.
With limited space on mobile, smart use of typography, color, and spacing was essential to keep things clean and scannable.