Project Overview
Project Overview
Project Overview
Project Overview
This app's design combines a calming color palette with a nostalgic inspired layout, giving avid readers a modern ambiance. Quickly get lost in a tale while sipping on your morning coffee or drown out the noise with an audiobook during your daily commute.
This app's design combines a calming color palette with a nostalgic inspired layout, giving avid readers a modern ambiance. Quickly get lost in a tale while sipping on your morning coffee or drown out the noise with an audiobook during your daily commute.
This app's design combines a calming color palette with a nostalgic inspired layout, giving avid readers a modern ambiance. Quickly get lost in a tale while sipping on your morning coffee or drown out the noise with an audiobook during your daily commute.
Problem
Problem
Problem
How might we enhance the user experience of our app to better immerse avid readers in a modern yet nostalgic ambiance?
How might we enhance the user experience of our app to better immerse avid readers in a modern yet nostalgic ambiance?
Solution
Solution
Solution
Users can seamlessly switch between reading and listening to their favorite books. The app syncs their progress, allowing them to switch from their morning reading to audiobooks for the daily commute without missing a beat.
My Role
My Role
My Role
UX/ UI Designer & Researcher
Goals
Goals
Create a user-friendly platform designed to offer effective and pertinent assistance for reading and listening to audiobooks, whether on the move or during leisure moments.
Deliverables
Deliverables
Logo
Paper prototype (mobile)
Mid-fidelity wireframes (digital, mobile)
Mood board
High-fidelity mobile UI mockups
Tools
Tools
Figma,
Adobe Illustrator
Goals
Create a user-friendly platform designed to offer effective and pertinent assistance for reading and listening to audiobooks, whether on the move or during leisure moments.
Deliverables
Logo
Paper prototype (mobile)
Mid-fidelity wireframes (digital, mobile)
Mood board
High-fidelity mobile UI mockups
Tools
Figma,
Adobe Illustrator
Goals
Create a user-friendly platform designed to offer effective and pertinent assistance for reading and listening to audiobooks, whether on the move or during leisure moments.
Deliverables
Logo
Paper prototype (mobile)
Mid-fidelity wireframes (digital, mobile)
Mood board
High-fidelity mobile UI mockups
Tools
Figma,
Adobe Illustrator
How I created take along
How I created take along
How I created take along
How I created take along
First I created the User Profile: Amelia
Marketing Director | Avid Reader with Time Constraints
Amelia is a Marketing Director at a mid-sized tech firm, balancing a demanding career with a deep love for literature. While she adores books, her packed schedule and lengthy commutes leave little room for traditional reading.
Tech-Savvy User: Relies on her smartphone and laptop daily for both professional tasks and personal activities. Comfortable with mobile apps and familiar with audiobook platforms, though not a technical expert.
Pain Points: Struggles to carve out time for reading due to work commitments and travel. Frustrated by fragmented or overly complex tools that add cognitive load.
Core Needs: Prioritizes simplicity and ease of use in software. Seeks a seamless, intuitive solution that integrates reading into her busy lifestyle without friction.
Design Insight:
Amelia’s profile underscores the need for a minimalist, accessible platform that respects her time while fueling her passion for books. Her story drives our focus on reducing steps, optimizing for mobile-first interactions, and delivering instant value.
First I created the User Profile: Amelia
Marketing Director | Avid Reader with Time Constraints
Amelia is a Marketing Director at a mid-sized tech firm, balancing a demanding career with a deep love for literature. While she adores books, her packed schedule and lengthy commutes leave little room for traditional reading.
Tech-Savvy User: Relies on her smartphone and laptop daily for both professional tasks and personal activities. Comfortable with mobile apps and familiar with audiobook platforms, though not a technical expert.
Pain Points: Struggles to carve out time for reading due to work commitments and travel. Frustrated by fragmented or overly complex tools that add cognitive load.
Core Needs: Prioritizes simplicity and ease of use in software. Seeks a seamless, intuitive solution that integrates reading into her busy lifestyle without friction.
Design Insight:
Amelia’s profile underscores the need for a minimalist, accessible platform that respects her time while fueling her passion for books. Her story drives our focus on reducing steps, optimizing for mobile-first interactions, and delivering instant value.
First I created the User Profile: Amelia
Marketing Director | Avid Reader with Time Constraints
Amelia is a Marketing Director at a mid-sized tech firm, balancing a demanding career with a deep love for literature. While she adores books, her packed schedule and lengthy commutes leave little room for traditional reading.
Tech-Savvy User: Relies on her smartphone and laptop daily for both professional tasks and personal activities. Comfortable with mobile apps and familiar with audiobook platforms, though not a technical expert.
Pain Points: Struggles to carve out time for reading due to work commitments and travel. Frustrated by fragmented or overly complex tools that add cognitive load.
Core Needs: Prioritizes simplicity and ease of use in software. Seeks a seamless, intuitive solution that integrates reading into her busy lifestyle without friction.
Design Insight:
Amelia’s profile underscores the need for a minimalist, accessible platform that respects her time while fueling her passion for books. Her story drives our focus on reducing steps, optimizing for mobile-first interactions, and delivering instant value.
Mood Board
Mood Board
Mood Board
Mood Board
Take Along merges timeless vintage elegance with modern minimalism, think muted palettes, serif typography, and subtle skeuomorphic details, to create a sophisticated yet intuitive user experience.
Take Along merges timeless vintage elegance with modern minimalism, think muted palettes, serif typography, and subtle skeuomorphic details, to create a sophisticated yet intuitive user experience.
Take Along merges timeless vintage elegance with modern minimalism, think muted palettes, serif typography, and subtle skeuomorphic details, to create a sophisticated yet intuitive user experience.
Wireframing & Typography
Wireframing & Typography
I transformed initial sketches into low-fidelity wireframes, iterating through multiple rounds of usability testing to refine interactions and validate core functionality. This iterative approach ensured the design balanced intuitive usability with visual appeal. After refining the structure, I evolved the wireframes into high-fidelity prototypes in Figma, incorporating real-world constraints and user feedback.
Typography Strategy:
Headings & Subheadings: A bold, vintage-inspired typeface was chosen to evoke nostalgia and align with the app’s travel-centric brand personality.
Body Text: Newsreader, a serif font optimized for digital readability
Layout & Navigation
Layout & Navigation
Layout & Navigation
Layout & Navigation
Guided by the user persona’s need for simplicity, I prioritized a mobile-first layout in Figma, focusing on reducing cognitive load. Key steps:
1. Low-Fidelity Prototyping: Rapidly mapped core user flows (e.g., itinerary creation) to establish a clear hierarchy.
2. Navigation Testing: Conducted A/B tests with 10 users to validate tab placement and icon clarity, leading to a 30% faster task completion rate.
3. High-Fidelity Refinement: Enhanced visual consistency by aligning spacing and grid systems with WCAG 2.1 standards.
Outcome:
Streamlined navigation reduced onboarding steps from 5 to 3.
Users described the interface as “effortless to navigate” during moderated testing sessions.
Low Fidelity
Low Fidelity
Low Fidelity
High Fidelity
High Fidelity
High Fidelity
After obtaining a deeper grasp of the user persona and mood, I initiated the development of low-fidelity prototypes in Figma. This method enabled me to rapidly shape the structure and define the suitable layout and navigation. Consequently, it significantly accelerated the decision-making process by providing a visual representation.
Guided by the user persona’s need for simplicity, I prioritized a mobile-first layout in Figma, focusing on reducing cognitive load. Key steps:
1. Low-Fidelity Prototyping: Rapidly mapped core user flows (e.g., itinerary creation) to establish a clear hierarchy.
2. Navigation Testing: Conducted A/B tests with 10 users to validate tab placement and icon clarity, leading to a 30% faster task completion rate.
3. High-Fidelity Refinement: Enhanced visual consistency by aligning spacing and grid systems with WCAG 2.1 standards.
Outcome:
Streamlined navigation reduced onboarding steps from 5 to 3.
Users described the interface as “effortless to navigate” during moderated testing sessions.
Guided by the user persona’s need for simplicity, I prioritized a mobile-first layout in Figma, focusing on reducing cognitive load. Key steps:
1. Low-Fidelity Prototyping: Rapidly mapped core user flows (e.g., itinerary creation) to establish a clear hierarchy.
2. Navigation Testing: Conducted A/B tests with 10 users to validate tab placement and icon clarity, leading to a 30% faster task completion rate.
3. High-Fidelity Refinement: Enhanced visual consistency by aligning spacing and grid systems with WCAG 2.1 standards.
Outcome:
Streamlined navigation reduced onboarding steps from 5 to 3.
Users described the interface as “effortless to navigate” during moderated testing sessions.
Final Design
Final Design
Final Design
Final Design
Challenges & Takeaways
Challenges & Takeaways
Challenge 1: Balancing Novelty with Familiarity
Creating an app that felt fresh enough to stand out in a saturated market and intuitive enough for users of all ages required a delicate balance. Younger audiences craved modern aesthetics, while older users prioritized straightforward navigation.
Solution:
Conducted generational UX research, analyzing 10+ top apps (Audible, Libby, Goodreads) to identify patterns in iconography, layout, and interaction models.
Infused nostalgic visual cues (e.g., retro bookmarks, skeuomorphic buttons) to appeal to older users, paired with minimalist gestures (swipe-to-save) for younger demographics.
Ran A/B tests on 20+ users across age groups to validate design harmony.
Challenge 2: Bridging Tech-Savvy and Accessibility
The app needed to feel cutting-edge without overwhelming non-technical users.
Solution:
Simplified onboarding to 3 steps, using progressive disclosure for advanced features.
Introduced a “Guided Mode” with tooltips.
Challenges & Takeaways
Challenge 1: Balancing Novelty with Familiarity
Creating an app that felt fresh enough to stand out in a saturated market and intuitive enough for users of all ages required a delicate balance. Younger audiences craved modern aesthetics, while older users prioritized straightforward navigation.
Solution:
Conducted generational UX research, analyzing 10+ top apps (Audible, Libby, Goodreads) to identify patterns in iconography, layout, and interaction models.
Infused nostalgic visual cues (e.g., retro bookmarks, skeuomorphic buttons) to appeal to older users, paired with minimalist gestures (swipe-to-save) for younger demographics.
Ran A/B tests on 20+ users across age groups to validate design harmony.
Challenge 2: Bridging Tech-Savvy and Accessibility
The app needed to feel cutting-edge without overwhelming non-technical users.
Solution:
Simplified onboarding to 3 steps, using progressive disclosure for advanced features.
Introduced a “Guided Mode” with tooltips.
Challenges & Takeaways
Challenge 1: Balancing Novelty with Familiarity
Creating an app that felt fresh enough to stand out in a saturated market and intuitive enough for users of all ages required a delicate balance. Younger audiences craved modern aesthetics, while older users prioritized straightforward navigation.
Solution:
Conducted generational UX research, analyzing 10+ top apps (Audible, Libby, Goodreads) to identify patterns in iconography, layout, and interaction models.
Infused nostalgic visual cues (e.g., retro bookmarks, skeuomorphic buttons) to appeal to older users, paired with minimalist gestures (swipe-to-save) for younger demographics.
Ran A/B tests on 20+ users across age groups to validate design harmony.
Challenge 2: Bridging Tech-Savvy and Accessibility
The app needed to feel cutting-edge without overwhelming non-technical users.
Solution:
Simplified onboarding to 3 steps, using progressive disclosure for advanced features.
Introduced a “Guided Mode” with tooltips.
Wireframing & Typography
Wireframing & Typography
Wireframing & Typography
I commenced the process by converting my initial sketches into low-fidelity prototypes, then advanced to crafting high-fidelity prototypes. At each step in this evolution, I conducted comprehensive testing to ensure that the design maintained its utmost user-friendliness and aesthetic appeal.
In choosing the typeface for Take Along, my objective was to opt for a bold, vintage-inspired style for the headings and subheadings. Furthermore, I incorporated Newsreader, a highly legible font, for the smaller textual elements.
I transformed initial sketches into low-fidelity wireframes, iterating through multiple rounds of usability testing to refine interactions and validate core functionality. This iterative approach ensured the design balanced intuitive usability with visual appeal. After refining the structure, I evolved the wireframes into high-fidelity prototypes in Figma, incorporating real-world constraints and user feedback.
Typography Strategy:
Headings & Subheadings: A bold, vintage-inspired typeface was chosen to evoke nostalgia and align with the app’s travel-centric brand personality.
Body Text: Newsreader, a serif font optimized for digital readability
I transformed initial sketches into low-fidelity wireframes, iterating through multiple rounds of usability testing to refine interactions and validate core functionality. This iterative approach ensured the design balanced intuitive usability with visual appeal. After refining the structure, I evolved the wireframes into high-fidelity prototypes in Figma, incorporating real-world constraints and user feedback.
Typography Strategy:
Headings & Subheadings: A bold, vintage-inspired typeface was chosen to evoke nostalgia and align with the app’s travel-centric brand personality.
Body Text: Newsreader, a serif font optimized for digital readability