“Audioteka” is the most famous Lithuanian audiobook app having 9100 active users and 5 000 000+ downloads in Google Play. What I like the most about this product is the sparkling quality of sound, well-curated and translated audiobooks, and tight community feeling.
Since I’m a loyal user of the product and a fan of similar apps, I’ve decided to take up a challenge and improve the product’s experience — to redesign the user interface and experience using a well-defined design creation process. I was inspired by A. Ericsson and R.Pool book “Peak. Secrets from the new science of expertise” and pushed myself to try one of three professional improvement exercises — “Purposeful practice”. This kind of practice focuses on achieving specific goals that must be measurable, actionable, and time-bound. More information about this kind of practice here.
This case study focuses on visual representation to better reveal the differences between the before and after design stages and show my creative approach through the whole process of design.
I’ve chosen the product I really love and comprehend well, and I believe that when you are a good match with the domain of your work, positive surprises are bound to happen in the professional realm. And for me, this project was significant proof for this hypothesis. Let’s check it! 👇
Process
First things first, let’s define the anatomy of my design process. I am a fan of classical design creation schema:
1. Define the problem;
2. Do the research;
3. Design the prototype;
4. Test the final result.
The starting point was detecting problem areas in the current UI/UX design of the app. No research, just trusting my knowledge and my gut. For the redesign, I’ve chosen the app’s iOS version since I’m a regular user of this operating system.
The current abstract problems detected:
1. Hard to understand some navigation parts on the main audiobook player screen;
2. Some industry latest features missing (e.g.driving mode screen);
3. UI visual look & feel has a room for a new updated style.
Research
My research methods were very dependent on the information accessibility of the domain. I could access all public information on the internet, social networks, and combine my own experience as both a regular user and UI/UX designer.
For the research methods I’ve chosen:
- Brand field analysis.
- Brand voice. For better perception of current communication style, general brand traits. Gathered insights are handy for defining a new visual redesign concept.
- Competitors map. The app does not have direct competitors here in Lithuania, so I’ve chosen foreign audiobooks apps. Competitors map is handy for recognizing the strengths and weaknesses of the app’s competition and understanding where the product stands in the market and what additional functionalities could be added to achieve better results.
2. User persona design. My user persona was biased by my own experience using the product and combined with information I found on the internet regarding competitor’s personas. This research method humanizes all the gathered data about the target user of the app. It’s easier to empathize with the user, know what frustrates, and motivates him. All this valuable information is used to create functionalities that fulfill user needs and provide better experiences.
Results of research
The research brought data-driven insights towards the redesign solution. My initial hypothesis got confirmed :
1. Navigation problems. Research Results. Our user persona usually listens to audiobooks while multitasking: driving, commuting, and taking sports. Currently, the navigation causes some confusion, and it takes some time to learn what is what. My solution: Prevent error and trial curve while learning the interface, make the core functions in the interface bold, visually accessible, and intuitive.
New UI/UX design solutions:
✅ Increased usage of graphic icons instead of text labels for faster detection;
✅ Implemented higher color contrast, white space separation between different information groups, cleaner and more minimalistic UI, information grouped, and prioritized.
2. Additional features. Research results. After empathizing with the user persona’s ambitions and trying out feature-rich competitors products, I missed some functionalities in the current app. My solution: add the latest features that would build effective audio content consuming habits. For example, a recent suggested feature is “trim of silence” in audio tracks. Now you can control the silent pauses in the soundtrack — you can skip them and jump straight to the other part of the audiobook.
New UI/UX design solutions:
✅ Added new screens and functionalities: driving mode screen, edit bookmark screen, trim silence feature, audiobooks listening challenge;
✅ Made additional features more accessible on the main audiobook player screen. They are unfolded, not hiding beyond the click.
3. Modern app look and feel for the modern user. After brand field research, it became crystal clear that the app’s visual identity needed a facelift. The tone of voice of the “Audioteka” brand is dynamic, community-based, business goals are ambitious and innovative. The visual UI design of the brand should also convey the right brand qualities. My solution: Since the app’s target user is a modern and agile person, hustling for new inspiring information, the app should align its visual branding translating it to the new modern way of reading books. Seeing is believing 👁🙏
New UI/UX design solutions:
✅ Enhanced the app’s positioning visually by adding lively colors. The original blue was refreshed to a more vibrant and bluish tone and became the center of visual UI branding;
✅ Gradients and blurs introduced. The gradual blendings of colors add depth and subtle mildness to the designs making them more pleasant to the eye;
✅ Each audiobook holds a different background color based on the book’s cover to reflect its uniqueness.
✅ A visually rich splash screen was introduced.
Testing
For the testing part, I chose the A/B testing method and recruited test participants that are representatives of the user persona. My idea was to show the two versions of the design — the current and the redesigned one and gather feedback on which design is more convenient and pleasant to the eye. I created a high fidelity prototype in Figma, shared it with the participants on mobile devices, and analyzed how they use the interface, what emotions it triggers, and what overall experience it causes.
To assess and measure their responses I have used Nielsen Norman visual design testing questionnaire:
- Open-ended preference explanation: Users were asked to explain why they like a design;
- Open word choice: Users were asked to list 3 to 5 words that describe the design;
- Closed word choice (desirability testing): Users were provided with a list of terms and were asked to pick the words which best describe the design;
- Numerical ratings: Numerical ratings were collected on how much the design exhibits specific brand qualities. Users were asked to rate two parts (visual design, UI/UX design) from 1 to ten.
Results
Test results revealed that the redesigned screens of the app got higher scores than the current. What respondents mainly liked about the redesign is that it is more intuitive, and you don’t need to think about what is what while using it. Also, visual design difference was accepted very enthusiastically and conveyed as modern, bold, fresh, airy.
I’m thrilled with the final result and I hope that this project will be an inspiration for any digital web UI/UX design product, how a redesign is performed sticking to the well-defined design creation process. And also an inspiration for designers who are looking for different ways of improving their skillset.
My takeaway steps? If you want to practice your UI/UX skills purposefully you need to get outside your comfort zone and do it in a focused way, with clear goals and a plan for reaching those goals. Use specifically chosen research methods: I chose brand field analysis & user persona research. Base your design decisions on the findings. Monitor your progress, collect target user feedback on your upgrades, and based on it, improve the designs. Oh, and figure out a way to maintain your motivation!
