Legere Book App
Timeline: 4 weeks
Responsibilities: UX, UI, IxD
Deliverables: Career Foundry project designing two versions of the same app for iOS and Android, using Human Interface Guidelines and Material Design.
Overview
The e-book and audiobook market has seen steady growth in recent years, with digital reading formats becoming increasingly popular. According to industry reports, the global audiobook and e-book markets are projected to continue their growth trajectory, with audiobooks the fastest growing format in the publishing industry today. These trends point to significant business opportunities in the digital reading market for companies that can provide high-quality reading experiences and effectively leverage digital platforms.
Legere Book App
Timeline: 4 weeks
Responsibilities: UX, UI, IxD
Deliverables: Career Foundry project designing two versions of the same app for iOS and Android, using Human Interface Guidelines and Material Design.
Overview
The e-book and audiobook market has seen steady growth in recent years, with digital reading formats becoming increasingly popular. According to industry reports, the global audiobook and e-book markets are projected to continue their growth trajectory, with audiobooks the fastest growing format in the publishing industry today. These trends point to significant business opportunities in the digital reading market for companies that can provide high-quality reading experiences and effectively leverage digital platforms.
Legere Book App
Timeline: 4 weeks
Responsibilities: UX, UI, IxD
Deliverables: Career Foundry project designing two versions of the same app for iOS and Android, using Human Interface Guidelines and Material Design.
Overview
The e-book and audiobook market has seen steady growth in recent years, with digital reading formats becoming increasingly popular. According to industry reports, the global audiobook and e-book markets are projected to continue their growth trajectory, with audiobooks the fastest growing format in the publishing industry today. These trends point to significant business opportunities in the digital reading market for companies that can provide high-quality reading experiences and effectively leverage digital platforms.
The problem
Users are often left frustrated by the lack of options for integrated experiences to consume content in both written and audio format. Current browsing and recommendation systems often fail to meet users' needs, leading to missed opportunities in a market dominated by Audible.
The solution
Legere is a book app designed to address the lack of easy options for both reading and listening found in many existing book apps, whilst also offering more relevant suggestions and a clean, modern UI.
The problem
Users are often left frustrated by the lack of options for integrated experiences to consume content in both written and audio format. Current browsing and recommendation systems often fail to meet users' needs, leading to missed opportunities in a market dominated by Audible.
The solution
Legere is a book app designed to address the lack of easy options for both reading and listening found in many existing book apps, whilst also offering more relevant suggestions and a clean, modern UI.
The problem
Users are often left frustrated by the lack of options for integrated experiences to consume content in both written and audio format. Current browsing and recommendation systems often fail to meet users' needs, leading to missed opportunities in a market dominated by Audible.
The solution
Legere is a book app designed to address the lack of easy options for both reading and listening found in many existing book apps, whilst also offering more relevant suggestions and a clean, modern UI.
Research phase
Understanding the context
To begin understanding existing user attitudes and behaviours towards e-books and audiobooks I conducted both quantitative and qualitative research.
Firstly I ran a brief user survey to learn about reading habits and begin framing the context of potential user behaviour. With this information and supplementary app store reviews from a number of likely prominent competitors I wrote an interview script to help expand on the initial survey’s data.
I conducted one-on-one interviews with people who had used, or were currently using, book apps. Through this process I was able to gain qualitative insights into user experiences and identify common pain points or opportunities.
In hindsight, this may have been a good opportunity to gain further insights through diary studies. In doing so I may have developed a deeper understanding of how user behaviour can change over an extended period of time, capturing spontaneous feedback relevant to specific contexts of use which wouldn't necessarily be touched upon in initial user interviews.
Research phase
Understanding the context
To begin understanding existing user attitudes and behaviours towards e-books and audiobooks I conducted both quantitative and qualitative research.
Firstly I ran a brief user survey to learn about reading habits and begin framing the context of potential user behaviour. With this information and supplementary app store reviews from a number of likely prominent competitors I wrote an interview script to help expand on the initial survey’s data.
I conducted one-on-one interviews with people who had used, or were currently using, book apps. Through this process I was able to gain qualitative insights into user experiences and identify common pain points or opportunities.
In hindsight, this may have been a good opportunity to gain further insights through diary studies. In doing so I may have developed a deeper understanding of how user behaviour can change over an extended period of time, capturing spontaneous feedback relevant to specific contexts of use which wouldn't necessarily be touched upon in initial user interviews.
Research phase
Understanding the context
To begin understanding existing user attitudes and behaviours towards e-books and audiobooks I conducted both quantitative and qualitative research.
Firstly I ran a brief user survey to learn about reading habits and begin framing the context of potential user behaviour. With this information and supplementary app store reviews from a number of likely prominent competitors I wrote an interview script to help expand on the initial survey’s data.
I conducted one-on-one interviews with people who had used, or were currently using, book apps. Through this process I was able to gain qualitative insights into user experiences and identify common pain points or opportunities.
In hindsight, this may have been a good opportunity to gain further insights through diary studies. In doing so I may have developed a deeper understanding of how user behaviour can change over an extended period of time, capturing spontaneous feedback relevant to specific contexts of use which wouldn't necessarily be touched upon in initial user interviews.
Honing in on the problem
To further understand the problem space I performed a competitive analysis of popular e-book/audiobook apps, including any mentioned in the user interviews. I examined common features to begin identifying strengths and weaknesses and highlight potential opportunities for improvement based on the insights drawn from my interviewees.
This process also allowed me to gain a better understanding of common UI patterns and existing mental models (Jakob’s Law) across a range of apps that compete in the same market.
Honing in on the problem
To further understand the problem space I performed a competitive analysis of popular e-book/audiobook apps, including any mentioned in the user interviews. I examined common features to begin identifying strengths and weaknesses and highlight potential opportunities for improvement based on the insights drawn from my interviewees.
This process also allowed me to gain a better understanding of common UI patterns and existing mental models (Jakob’s Law) across a range of apps that compete in the same market.
Honing in on the problem
To further understand the problem space I performed a competitive analysis of popular e-book/audiobook apps, including any mentioned in the user interviews. I examined common features to begin identifying strengths and weaknesses and highlight potential opportunities for improvement based on the insights drawn from my interviewees.
This process also allowed me to gain a better understanding of common UI patterns and existing mental models (Jakob’s Law) across a range of apps that compete in the same market.
Synthesising user insights with market opportunities
Cluttered or unfriendly user interface
Desire for the option to both read and listen to books on the same platform (Low awareness of Whispersync feature in Audible)
Desire for more personalised recommendations and ease of use
Users prefer to read during commutes or to relax, and listen to audiobooks whilst multitasking or before bed
While audiobooks provide convenience, users reported decreased concentration, or “zoning out”
Synthesising user insights with market opportunities
Cluttered or unfriendly user interface
Desire for the option to both read and listen to books on the same platform (Low awareness of Whispersync feature in Audible)
Desire for more personalised recommendations and ease of use
Users prefer to read during commutes or to relax, and listen to audiobooks whilst multitasking or before bed
While audiobooks provide convenience, users reported decreased concentration, or “zoning out”
Synthesising user insights with market opportunities
Cluttered or unfriendly user interface
Desire for the option to both read and listen to books on the same platform (Low awareness of Whispersync feature in Audible)
Desire for more personalised recommendations and ease of use
Users prefer to read during commutes or to relax, and listen to audiobooks whilst multitasking or before bed
While audiobooks provide convenience, users reported decreased concentration, or “zoning out”
Getting Agile
I wrote several user stories to help crystallise some of the research findings and approach them with a user centred mindset. I then used the user story mapping approach to expand on some of the essential user needs/goals and begin to understand the way in which these tasks would be broken down into interactions and help visualise the products overall flow in logical, achievable increments that meet users’ needs.
Getting Agile
I wrote several user stories to help crystallise some of the research findings and approach them with a user centred mindset. I then used the user story mapping approach to expand on some of the essential user needs/goals and begin to understand the way in which these tasks would be broken down into interactions and help visualise the products overall flow in logical, achievable increments that meet users’ needs.
Getting Agile
I wrote several user stories to help crystallise some of the research findings and approach them with a user centred mindset. I then used the user story mapping approach to expand on some of the essential user needs/goals and begin to understand the way in which these tasks would be broken down into interactions and help visualise the products overall flow in logical, achievable increments that meet users’ needs.
MVP
The user story map provided an outline to guide my design process towards a product ready for usability tests on the key flows. This Agile approach ensures that development is validated by the target customer and allows for early design alterations. The goal was to create a design that is easy to use, engaging, and valuable for the user, whilst identifying flaws in any assumptions.
While a real-world scenario would require additional design iterations to track user engagement, this approach enabled me to efficiently arrive at a point where I could prototype and test the product.
Outline for a minimum viable product (MVP) :
Onboarding process that allows users to select their preferred genres and areas of interest to personalise their experience and receive relevant recommendations
An easy-to-find option for users to switch between written and audio format.
A progress indicator for books that users are currently reading
Reading goals and reminders
MVP
The user story map provided an outline to guide my design process towards a product ready for usability tests on the key flows. This Agile approach ensures that development is validated by the target customer and allows for early design alterations. The goal was to create a design that is easy to use, engaging, and valuable for the user, whilst identifying flaws in any assumptions.
While a real-world scenario would require additional design iterations to track user engagement, this approach enabled me to efficiently arrive at a point where I could prototype and test the product.
Outline for a minimum viable product (MVP) :
Onboarding process that allows users to select their preferred genres and areas of interest to personalise their experience and receive relevant recommendations
An easy-to-find option for users to switch between written and audio format.
A progress indicator for books that users are currently reading
Reading goals and reminders
MVP
The user story map provided an outline to guide my design process towards a product ready for usability tests on the key flows. This Agile approach ensures that development is validated by the target customer and allows for early design alterations. The goal was to create a design that is easy to use, engaging, and valuable for the user, whilst identifying flaws in any assumptions.
While a real-world scenario would require additional design iterations to track user engagement, this approach enabled me to efficiently arrive at a point where I could prototype and test the product.
Outline for a minimum viable product (MVP) :
Onboarding process that allows users to select their preferred genres and areas of interest to personalise their experience and receive relevant recommendations
An easy-to-find option for users to switch between written and audio format.
A progress indicator for books that users are currently reading
Reading goals and reminders
User Flows
I created user flows to visualise the journey my users would take. By mapping out the screens I needed to design, I was able to plan most efficient routes to achieving user goals. This helped me to better understand the way my users would navigate through the product and set the parameters for subsequent ideation.
User Flows
I created user flows to visualise the journey my users would take. By mapping out the screens I needed to design, I was able to plan most efficient routes to achieving user goals. This helped me to better understand the way my users would navigate through the product and set the parameters for subsequent ideation.
User Flows
I created user flows to visualise the journey my users would take. By mapping out the screens I needed to design, I was able to plan most efficient routes to achieving user goals. This helped me to better understand the way my users would navigate through the product and set the parameters for subsequent ideation.
Rapid Sketching
To begin exploring solutions for the MVP, I used the Design Sprint sketching approach to rapidly ideate and generate multiple potential solutions for my user flows. This helped me quickly visualise the product that my research suggested and where certain UI patterns would be best employed.
Following several rounds of crazy 8’s, I set a timer to refine my sketches and expand upon a solution idea. At this stage I referred back to Material Design and Human Interface Guidelines to ensure that I was adhering to best practices and was aware of native components and solutions.
This process proved invaluable for clarifying how I expected users to interact and navigate between screens, however, at this point it would have been beneficial to validate my solutions through a simple survey or a poll replicating a dot voting presentation, or better still, to carry out a round of guerrilla usability testing.
Rapid Sketching
To begin exploring solutions for the MVP, I used the Design Sprint sketching approach to rapidly ideate and generate multiple potential solutions for my user flows. This helped me quickly visualise the product that my research suggested and where certain UI patterns would be best employed.
Following several rounds of crazy 8’s, I set a timer to refine my sketches and expand upon a solution idea. At this stage I referred back to Material Design and Human Interface Guidelines to ensure that I was adhering to best practices and was aware of native components and solutions.
This process proved invaluable for clarifying how I expected users to interact and navigate between screens, however, at this point it would have been beneficial to validate my solutions through a simple survey or a poll replicating a dot voting presentation, or better still, to carry out a round of guerrilla usability testing.
Rapid Sketching
To begin exploring solutions for the MVP, I used the Design Sprint sketching approach to rapidly ideate and generate multiple potential solutions for my user flows. This helped me quickly visualise the product that my research suggested and where certain UI patterns would be best employed.
Following several rounds of crazy 8’s, I set a timer to refine my sketches and expand upon a solution idea. At this stage I referred back to Material Design and Human Interface Guidelines to ensure that I was adhering to best practices and was aware of native components and solutions.
This process proved invaluable for clarifying how I expected users to interact and navigate between screens, however, at this point it would have been beneficial to validate my solutions through a simple survey or a poll replicating a dot voting presentation, or better still, to carry out a round of guerrilla usability testing.
Mid-fidelity wireframes
Usability testing
I moved onto designing mid-fidelity wireframes for both Android and iOS using the HiG & Material 3 components. This allowed me to further explore the key differences between the two systems and gain a far better understanding of specific components use cases and specs. It was also a fascinating insight into design systems and how they promote consistency and efficiency.
At this stage I implemented a 4pt grid system and paid close attention to the balance of the interface elements. This allowed me to ensure that even at mid-fidelity, I was able to effectively work on the visual hierarchy, the use of whitespace and overall consistency.
Interaction Design (IxD)
Before proceeding with usability testing I organised my screens into primary, secondary, and miscellaneous categories to ensure that I had designed for each of the steps outlined in my user flows. This helped me to keep track of the different screens and ensure that each one was meeting the user's needs.
To further clarify the interactions that would be possible on each screen, I annotated the wireframes with notes on how different elements would function and how they would impact the user flow between different functionalities.
Mid-fidelity wireframes
Usability testing
I moved onto designing mid-fidelity wireframes for both Android and iOS using the HiG & Material 3 components. This allowed me to further explore the key differences between the two systems and gain a far better understanding of specific components use cases and specs. It was also a fascinating insight into design systems and how they promote consistency and efficiency.
At this stage I implemented a 4pt grid system and paid close attention to the balance of the interface elements. This allowed me to ensure that even at mid-fidelity, I was able to effectively work on the visual hierarchy, the use of whitespace and overall consistency.
Interaction Design (IxD)
Before proceeding with usability testing I organised my screens into primary, secondary, and miscellaneous categories to ensure that I had designed for each of the steps outlined in my user flows. This helped me to keep track of the different screens and ensure that each one was meeting the user's needs.
To further clarify the interactions that would be possible on each screen, I annotated the wireframes with notes on how different elements would function and how they would impact the user flow between different functionalities.
Mid-fidelity wireframes
Usability testing
I moved onto designing mid-fidelity wireframes for both Android and iOS using the HiG & Material 3 components. This allowed me to further explore the key differences between the two systems and gain a far better understanding of specific components use cases and specs. It was also a fascinating insight into design systems and how they promote consistency and efficiency.
At this stage I implemented a 4pt grid system and paid close attention to the balance of the interface elements. This allowed me to ensure that even at mid-fidelity, I was able to effectively work on the visual hierarchy, the use of whitespace and overall consistency.
Interaction Design (IxD)
Before proceeding with usability testing I organised my screens into primary, secondary, and miscellaneous categories to ensure that I had designed for each of the steps outlined in my user flows. This helped me to keep track of the different screens and ensure that each one was meeting the user's needs.
To further clarify the interactions that would be possible on each screen, I annotated the wireframes with notes on how different elements would function and how they would impact the user flow between different functionalities.
Framing discoveries with usability heuristics
User insights
Conducting mid-fidelity user testing helped me to understand how users interact with the product. By observing their touch and swipe gestures, and engaging in a dialogue about their expectations, I gathered invaluable insights into usability heuristics such as findability, discoverability, and user control and freedom, which were crucial in creating more user-friendly, high-fidelity prototypes.
One test involved a "Tinder style” swipe interaction for users to add proposed books into their library during onboarding, however, all 5 users expressed confusion about this feature. I ranked it as critical in severity.
The issue seemed to be a combination of misunderstanding its purpose and finding it unfamiliar given the context.
Adjustments made prior to high-fidelity design
Provide clearer instructions during the swipe stage of onboarding to ensure user understands the interaction and verify affordance (Consistency and standards)
Add a mini-player to sit above navbar when the user has left the audio-player screen (Flexibility and efficiency of use)
Scale book cards to break the grid so that users see the horizontal overflow and know that there is more scrollable content (Findability)
Replace segmented control on book detail page (Material and HiG guidelines)
Framing discoveries with usability heuristics
User insights
Conducting mid-fidelity user testing helped me to understand how users interact with the product. By observing their touch and swipe gestures, and engaging in a dialogue about their expectations, I gathered invaluable insights into usability heuristics such as findability, discoverability, and user control and freedom, which were crucial in creating more user-friendly, high-fidelity prototypes.
One test involved a "Tinder style” swipe interaction for users to add proposed books into their library during onboarding, however, all 5 users expressed confusion about this feature. I ranked it as critical in severity.
The issue seemed to be a combination of misunderstanding its purpose and finding it unfamiliar given the context.
Adjustments made prior to high-fidelity design
Provide clearer instructions during the swipe stage of onboarding to ensure user understands the interaction and verify affordance (Consistency and standards)
Add a mini-player to sit above navbar when the user has left the audio-player screen (Flexibility and efficiency of use)
Scale book cards to break the grid so that users see the horizontal overflow and know that there is more scrollable content (Findability)
Replace segmented control on book detail page (Material and HiG guidelines)
Framing discoveries with usability heuristics
User insights
Conducting mid-fidelity user testing helped me to understand how users interact with the product. By observing their touch and swipe gestures, and engaging in a dialogue about their expectations, I gathered invaluable insights into usability heuristics such as findability, discoverability, and user control and freedom, which were crucial in creating more user-friendly, high-fidelity prototypes.
One test involved a "Tinder style” swipe interaction for users to add proposed books into their library during onboarding, however, all 5 users expressed confusion about this feature. I ranked it as critical in severity.
The issue seemed to be a combination of misunderstanding its purpose and finding it unfamiliar given the context.
Adjustments made prior to high-fidelity design
Provide clearer instructions during the swipe stage of onboarding to ensure user understands the interaction and verify affordance (Consistency and standards)
Add a mini-player to sit above navbar when the user has left the audio-player screen (Flexibility and efficiency of use)
Scale book cards to break the grid so that users see the horizontal overflow and know that there is more scrollable content (Findability)
Replace segmented control on book detail page (Material and HiG guidelines)
Testing the swipe function
My belief was that the thumbs icons would provide an additional hint, whilst also offering another method to add the book.
This only caused an additional layer of confusion, with users believing there was an additional function available. Moreover, there was confusion as to what happened if you swiped left.
In the end I settled on a solution that removed the focus on adding and focused on future recommendations. I also removed reference to swiping, only keeping this as an animation. The final prototyped version is seen below.
Testing the swipe function
My belief was that the thumbs icons would provide an additional hint, whilst also offering another method to add the book.
This only caused an additional layer of confusion, with users believing there was an additional function available. Moreover, there was confusion as to what happened if you swiped left.
In the end I settled on a solution that removed the focus on adding and focused on future recommendations. I also removed reference to swiping, only keeping this as an animation. The final prototyped version is seen below.
Testing the swipe function
My belief was that the thumbs icons would provide an additional hint, whilst also offering another method to add the book.
This only caused an additional layer of confusion, with users believing there was an additional function available. Moreover, there was confusion as to what happened if you swiped left.
In the end I settled on a solution that removed the focus on adding and focused on future recommendations. I also removed reference to swiping, only keeping this as an animation. The final prototyped version is seen below.
Establishing a visual identity
UI considerations
It was important that colour hierarchies were respected to ensure the softer brand palette remained informative. I used white space generously to keep the layouts uncluttered and counterbalance the competing colour of the book covers. My users had cited crowded interfaces as one of their problems with competitors. By setting the cover-art on “plinths” I was able to maintain the natural, rectangular book form without creating a density of content.
This "plinth" also acted to support the principle of common region by acting as a frame, helping users' perceive that items within its boundary share common characteristics or functionality.
Careful consideration of aesthetic and minimal design was important in establishing the visual identity and product’s credibility. In some cases visually pleasing designs can lead users to perceive the product as easier to use (aesthetic usability effect).
Establishing a visual identity
UI considerations
It was important that colour hierarchies were respected to ensure the softer brand palette remained informative. I used white space generously to keep the layouts uncluttered and counterbalance the competing colour of the book covers. My users had cited crowded interfaces as one of their problems with competitors. By setting the cover-art on “plinths” I was able to maintain the natural, rectangular book form without creating a density of content.
This "plinth" also acted to support the principle of common region by acting as a frame, helping users' perceive that items within its boundary share common characteristics or functionality.
Careful consideration of aesthetic and minimal design was important in establishing the visual identity and product’s credibility. In some cases visually pleasing designs can lead users to perceive the product as easier to use (aesthetic usability effect).
Establishing a visual identity
UI considerations
It was important that colour hierarchies were respected to ensure the softer brand palette remained informative. I used white space generously to keep the layouts uncluttered and counterbalance the competing colour of the book covers. My users had cited crowded interfaces as one of their problems with competitors. By setting the cover-art on “plinths” I was able to maintain the natural, rectangular book form without creating a density of content.
This "plinth" also acted to support the principle of common region by acting as a frame, helping users' perceive that items within its boundary share common characteristics or functionality.
Careful consideration of aesthetic and minimal design was important in establishing the visual identity and product’s credibility. In some cases visually pleasing designs can lead users to perceive the product as easier to use (aesthetic usability effect).
Some lessons learned
The design thinking value is clear.
Ideally I’d have had a far greater sample size of interviewees to begin empathising at the outset, supplemented by much more in-depth research. As I progressed I found lots of research papers on modern reading habits as well as market data. With more time I feel there was room to explore far more during the research phase.
Introducing additional techniques such as Affinity mapping and Empathy mapping to gain a broader understanding of my users and the ways they engage with e-books and audio books would have been beneficial. In doing so I could have better understood the broader reader experience, outside of a digital product, and perhaps drawn more valuable insights that weren’t influenced by an app focused approach.
Testing early and often. I should have had more rounds of testing with a larger pool of users. I experienced first hand the value of these sessions, however, I am also aware that the data was limited and the methods could have been greatly improved to draw more valuable insights. Introducing diary studies during initial research and during later product testing may have helped draw new insights.
Some lessons learned
The design thinking value is clear.
Ideally I’d have had a far greater sample size of interviewees to begin empathising at the outset, supplemented by much more in-depth research. As I progressed I found lots of research papers on modern reading habits as well as market data. With more time I feel there was room to explore far more during the research phase.
Introducing additional techniques such as Affinity mapping and Empathy mapping to gain a broader understanding of my users and the ways they engage with e-books and audio books would have been beneficial. In doing so I could have better understood the broader reader experience, outside of a digital product, and perhaps drawn more valuable insights that weren’t influenced by an app focused approach.
Testing early and often. I should have had more rounds of testing with a larger pool of users. I experienced first hand the value of these sessions, however, I am also aware that the data was limited and the methods could have been greatly improved to draw more valuable insights. Introducing diary studies during initial research and during later product testing may have helped draw new insights.
Some lessons learned
The design thinking value is clear.
Ideally I’d have had a far greater sample size of interviewees to begin empathising at the outset, supplemented by much more in-depth research. As I progressed I found lots of research papers on modern reading habits as well as market data. With more time I feel there was room to explore far more during the research phase.
Introducing additional techniques such as Affinity mapping and Empathy mapping to gain a broader understanding of my users and the ways they engage with e-books and audio books would have been beneficial. In doing so I could have better understood the broader reader experience, outside of a digital product, and perhaps drawn more valuable insights that weren’t influenced by an app focused approach.
Testing early and often. I should have had more rounds of testing with a larger pool of users. I experienced first hand the value of these sessions, however, I am also aware that the data was limited and the methods could have been greatly improved to draw more valuable insights. Introducing diary studies during initial research and during later product testing may have helped draw new insights.
