1. Setting the scene
As I've moved from wireframing to creating high-fidelity prototypes for my volunteer matching solution, I've found that I've naturally gravitated towards a mobile app as opposed to a webview experience, or an experience for another kind of device like a tablet or smartwatch. While I did originally consider creating a website, a mobile app felt like a more personalised, portable format for storing all the information my users would need to have to hand before, during, and after their volunteering (for example, key details available at a glance and on the go, and the ability to directly message and leave reviews for matches).
Creating a native app rather than using a webview on mobile also allowed me to make my solution more user-friendly by designing to fit consistently with the wider architecture of users' existing mobile platforms, therefore creating a more familiar experience. An app also felt like a natural home for Voluncheer given how the 'matching' theme is reminiscent of other 'matchmaking' solutions like dating apps.
I decided to focus on the Android operating system specifically, largely because I have an Android device myself and am therefore slightly more familiar with the design patterns used, paired with the fact that Android controlled over 70% of the mobile OS market at the end of 2022/start of 2023 (Statista 2023). What's more, the time constraints of a 12-week course meant that I necessarily needed to limit my focus to one OS in order to create as polished a final product as possible.
That being said, I've found that much of the content in this week's web design module has been equally useful in refining my mobile app solution, particularly the use of grids to give structure and alignment, as well as the guidance around accessible design (building on my reflections on accessibility in last week's post).
2. Designing on a grid
2.1. Breadth of analysis: exploring key skills and domains – choosing and applying a grid
When working with tools like Canva, Adobe Illustrator, and Figma in both my professional work and throughout the course so far, I've made extensive use of the 'snap to grid' feature to align screen elements. However, I'd not given much thought to what this 'grid' actually referred to (or how it could help me make my designs more responsive).
According to Caldwell (2019: 158), grids help us to establish logic in our designs, adding "rhythm and pace" that helps the audience easily locate the same type of information over multiple pages, and also helps us work faster and more efficiently.
When it came to retrospectively adding grids to my designs to ensure consistent alignment across the screens, the benefit of designing to a grid from the very start of the design process soon became apparent. While the 'snap to grid' feature had helped me stay largely aligned when positioning similar elements on a screen, introducing columns soon revealed inconsistencies that I simply hadn't noticed – and that I now needed to rectify across my entire prototype.
Tang (2019) explains that traditional design systems typically use 4 columns for mobile, however, after some experimentation plus advice from my tutor, I decided to use a 2-column grid with a margin of 18px (given that much of my content naturally fell into a 2-column structure).
While perhaps only slight to the 'naked eye', the difference between my original unaligned elements and those aligned to the grid makes my designs much neater and more visually appealing (see Fig. 1):
Fig. 1: Page elements aligned to a grid (left) versus unaligned page elements (right)
2.2. Self-criticism and SMART goal: apply grids from the start of future projects
Given the clear and undeniable benefits of using a grid right from the start, I'm quite frustrated with myself for not having applied one much sooner in my design process. However, I'm trying to embrace the learning process and the often applicable mantra of 'you don't know what you don't know until you know it'.
So that I feel more confident choosing the correct grids for my future projects, I'd like to spend some time learning more about how grids work. Throughout this module so far, I've been dipping in and out of lessons in Daniel Scott's Figma UI UX Design Essentials course (2023). I plan on completing the lesson on 'How to work with Columns & Grids in Figma' over the next week to make sure that I'm implementing best practices as I introduce grids to my designs so far.
3. Accessibility
3.1. Depth of insight: enhancing my practice – exploring user research for accessibility and inclusion
Although I've tried to keep accessibility front of mind throughout my design thinking process, I haven't been as proactive as I should have been in finding ways to ensure that I'm focusing on accessibility and inclusivity in my user research.
Marsh (2022: 54-55) suggests a number of ways to conduct manual accessibility testing, including allowing people to change the colour contrast of the digital products they interact with, making sure the size of 'targets' such as buttons and checkboxes can be used by people with a motor impairment, and conducting usability testing with assistive technologies like screen readers, screen magnifiers, and speech recognition software).
I'm pleased that I've already started making some progress in these areas. For example, I've already tested the colour contrast of my solutions to ensure they're compliant with at least Level AA of the WCAG 2.0 guidelines. On advice from my tutor, I've also changed the contrast of my filter chips on the skills and causes screens to make the 'selected' state clearer for users with visual impairments (see Fig. 2 and Fig. 3):
Fig. 2: Less explicit colour contrast (left) versus bolder, more explicit colour contrast (right)
Fig. 3: Checking contrast with the Colour Contrast Checker tool
However, in my usability testing so far, I haven't explicitly sought out users of assistive technologies to check whether my experience is accessible to them. I'm not sure how I might be able to recruit users with disabilities to take part in research, but this is something I plan on discussing with my tutors before we reach the Final Major Project, so that I can make sure my testing plans have accessibility baked into them throughout the entire project.
3.2. SMART goal: Explore accessibility testing platforms
I recently came across a product called Fable (2023), a user research platform that offers tools to help designers test their solutions with people with disabilities. I haven't yet explored the product in-depth, but I plan on discussing it with my User Research team at work in Q2 2023 to see if and how we can use this or similar tools to ensure we are catering to all of our users in our research methodologies.
4. Conclusions
The concepts of designing to a grid and responsive design still feel very new to me, and I'd like to spend some time getting to grips with these and other visual design basics so that I have a more solid foundation for my future design work. As a relative newcomer to the world of graphic, visual, and UX design, I'm trying to get used to being 'out of my comfort zone', and pushing myself to explore areas that I'm less familiar and confident with. Writing has always been my big passion – but this module so far has opened my eyes to new areas, particularly visual design, that I would like to make part of my professional practice. Lots of food for thought...
4.1. How satisfied do I feel with my work this week?
1 = Very satisfied , 2 = Quite satisfied, 3 = Neutral, 4 = Quite frustrated, 5 = Very frustrated
Start of week (pre-activities): 2 – pleased with the progress I made on my prototype last week, and eager to explore ways to polish it and enhance accessibility
Grids/Responsive design: 3 – somewhat frustrated that I didn't know more about these concepts already! But eager to learn more and gain a more solid foundation in visual design principles
Accessibility: 3 – pleased that I've already taken steps to increase the accessibility and inclusivity of my design, yet slightly daunted by the amount of information and best practices I have yet to learn. Determined to make accessibility a core part of my ongoing learning as a UX professional
References
CALDWELL, Cath. 2019. Graphic Design for Everyone. London: Dorling Kindersley Limited.
COLOUR CONTRAST CHECKER. 2023. Colour Contrast Checker [online]. Available at: https://colourcontrast.cc/accb58/000000 [accessed 31 March 2023].
FABLE. 2023. 'About Fable' [online]. Available at: https://makeitfable.com/about-fable/ [accessed 31 March 2023]
MARSH, Stephanie. 2022. User Research. 2nd edition. London/New York/New Delhi: Kogan Page Limited.
SCOTT, Daniel. 2023. ‘Figma UI UX Design Essentials’. Bring Your Own Laptop [online]. Available at https://bringyourownlaptop.com/courses/figma-ux-essentials-beginners [accessed 31 March 2023].
STATISTA. 'Mobile operating systems' market share worldwide from 1st quarter 2009 to 4th quarter 2022' [online]. Available at: https://www.statista.com/statistics/272698/global-market-share-held-by-mobile-operating-systems-since-2009/ [accessed 31 March 2023].
TANG, Christie. 2019. ‘Responsive grids and how to actually use them’. UX Design Collective [online]. Available at: https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01 [accessed 31 March 2023].
Comentários