✧ Role & Responsibilities: UI/UX Designer
✧ Project Duration: 1 Week
✧ Tools: Adobe XD, Illustrator and Photoshop
OVERVIEW
This project was my first foray into the field of UI/UX design, and I am incredibly proud of what I was able to accomplish. Not only did I gain valuable experience working on a real-world design problem, but this project also played a crucial role in helping me secure my first job in the industry.
Company's design challenge task:
✧ Design a 4-screen audio app
✧ Show any features or elements I deemed important
✧ Show any features or elements I deemed important
When I received the project brief, I knew that I wanted to create something more than just a visually appealing design. I believed that it was crucial to identify and solve a problem that users of audio apps might face. Hence, I started my research on audio apps and the difficulties experienced by the users. During my research, I came across articles about dyslexic people and their struggles with reading, which led me to the idea of creating an audiobook app that caters specifically to their needs.
This challenge gave me the freedom to showcase my ideas and design skills while also fulfilling the company's requirements.
UNDERSTANDING DYSLEXIA
According to a study conducted by the UK's National Literacy Trust, audiobooks are an effective tool for dyslexic readers. The study found that audiobooks improved the reading comprehension of students with dyslexia by an average of 27%, and also improved their reading accuracy and speed.
USER PERSONAS
After conducting further research and gathering information, I began developing user personas to help guide the design process. I needed to understand the target users and their behaviours, pain points, and goals to create a design that would truly meet their needs. I wanted to ensure that my design solution would look functional and solve a real user problem.
INITIAL IDEAS/SKETCHES
My initial sketches for the audiobook app were informed by the research conducted on dyslexia and reading difficulties. I focused on incorporating features that would aid dyslexic users, such as a dyslexia-friendly font, appropriate font size and spacing, and intuitive navigation.
The sketches served as a starting point for the design process and provided a clear direction for the development of the final product.
WIREFRAME
Building on the initial sketches, I translated my ideas into a more detailed design concept through the creation of wireframes. The wireframes were developed with a focus on user experience, ensuring that the app's functionality and navigation were easy to use and intuitive.
The chosen fonts, including the dyslexia-friendly Open Dyslexic font, were incorporated into the wireframes, as well as appropriate spacing and sizing, the contrast settings, as well as the voice speed that allowed users to adjust the app's visual and audible to suit their individual needs.
HIGH-FIDELITY WIREFRAME
The high-fidelity wireframes expanded upon the initial wireframes with additional visual elements such as graphics and icons, while also incorporating colour to enhance the user experience. These wireframes served as the blueprint for the final design and provided a clear guide for development.
FINAL DESIGN
The final design was based on high-fidelity wireframes but underwent additional refinement to ensure a polished and engaging user experience. To further optimize readability for dyslexic users, the home screen heading font was changed to Arial as well as the back button description, which is a more accessible font option in this case.
The final design also maintained consistency with the chosen fonts for description and paragraph, appropriate spacing, and colour scheme established in the high-fidelity wireframes.
FONT SELECTION & VISUAL ELEMENTS
In the quest for inclusive design, careful consideration was given to font selection to accommodate individuals with dyslexia. The chosen fonts, Arial for headings and Open Dyslexic for paragraphs and titles, were selected based on their readability and unique design, which aids dyslexic readers.
A blend of icons sourced from Flaticon and an illustration from Pixabay were integrated. Leveraging these resources not only enhanced visual appeal but also ensured compliance with copyright regulations, contributing to a more accessible and engaging design.
CONCLUSION
My inaugural experience in UI/UX paved the way for future opportunities and underscored the importance of empathetic design. It is a reminder that every interface has the potential to shape experiences and enhance the quality of life for its users.
Moving forward, I remain steadfast in my dedication to crafting solutions that prioritize human-centric design principles. With each project, I aim to push the boundaries of creativity and innovation while staying true to the core mission of creating meaningful, impactful experiences.
