Timeline
The 'Design' phase in co-design is shown in the model by one question: "How do we build on what is already strong?" That's the question that underpins my work for this week, not just seeing what's out there but building upon it for my project. My one of my Week 5 tasks I cover in this blog is furthering my brand guideline, which I see as one of my final tasks for this phase so I can try to break into the 'Test and Refine' stage with a rudimentary prototype.
I realised my 'Second iteration' milestone for the following week doesn't make sense to my process. I wanted to have a second prototype iteration by this time, but when following my natural process it makes more sense to aim to get a first iteration done in this week. I would love to get an app that I can use to test the flow of UX/UI. In the future I would rather instead plan ambitiously with my week's tasks but conservatively with my milestone tasks to ensure that I'm getting my process done on time (or early).
I also believe that because the co-design process is a cyclic methodology I hadn't planned my stages well to my timeline. I aimed to get a prototype done early so that I can wrap back around into the 'Building the Conditions' phase. I believe that this type of process is great for a more rounded design, however, it makes me more susceptible to falling to my 'Time Constraints' limitation. I aim to restructure my tasks and milestones going forward from my 'Identify Gaps in Prototype' task in Week 7 to ensure that I'm on track from that point onwards. I still believe that I can make the working prototype milestone in Week 8 if I work well in the next few weeks. The plans mentioned can be seen below in Figure 1.
Figure 1. My timeline for the 4 weeks from Week 6, Own Work
Brand Guideline Brainstorm
My initial aim was to nail down a visual identity for my project, however, I ended up brainstorming potential ideas and aim to get feedback on them. My lack of graphic design experience makes it hard for me to feel certain about my actions in this field, meaning I'm more inclined to seek feedback from others. This is good as feedback allows for an informed approach, but it's not great as it's hard to progress. To improve on this process I feel inclined to lean into it and do more brainstorming more often with more feedback so that I feel secure in my outcome. Alternatively, I can put more research behind certain areas and come to a conclusion on my own. I'm going to work with the former process for now.
Previously in Week 4 I had done a little bit of research into this area. I had identified that I wanted colours that related to mindfulness and positivity: and in my mind that was teal, tan, brown, blue, and white. I needed friendly, mature, and approachable fonts with a minimum text size of 16px. Key to my demographic was colour contrast - a contrast of at least 7:1 ensures that users with visual impairment can navigate easily.
Colour Palette
I consulted pre-made colour palettes to see if I could find any that I was partial to. To supplement this, I used WebAIM's Contrast Checker to ensure that the palettes I wanted fit my contrast specification. I didn't mind having some accent colours that didn't fit a contrast of 7:1, but I aimed for one lighter colour (close to white) and one darker colour pair that fit this rule. I found this page: Great Looking Websites With A Calm Colour Palette that analysed some websites and their palette. From here I grabbed some that I liked and put stars on the key colours. These key colours as the ones I wanted to primarily design with, and so were the ones I checked the contrast of. You can see this below in Figure 2, and although the hex codes aren't well visible in the photo, they are able to be seen with vector-enhanced scrolling in Miro. With these codes I will be able to prototype the colours easily in Javascript.
Figure 2. Colour palette brainstorming using text and stars. Own Work.
Through this process I seemed to lean heavily into blue and white palettes. Upon reflection, this may be because the brain training apps I tried all sported similar colour combos.
Logo Design
I took some time to build upon the logo sketches that I created in Week 4 to get some feedback. I leaned into some of the concepts that I liked, like using the double M to represent parts of the logo, such as #1, #3, and #5 in Figure 4. As UX/UI research proves that my demographic needs readability, I believe that I may not use any of the artistic logos and instead prioritise logos like logo #2 in Figure 4. This logo makes the name of the program clear while still incorporating a logo-like design. Ultimately I need feedback to move forward on this task due to my lack of graphical knowledge.
Figure 3 and Figure 4. Rapid logo prototyping. Own Work.
In the future I would've liked to work with a user as a co-designer to brainstorm many options for a logo. In this way I can better ensure the fit for my project and demographic. However, due to time constraints and methodology simulation constraints, this didn't work out, both in class and in co-design practice.
Font
I had found some guidelines for font text for older adults previously, so I went looking for more information. Brad Pettengill of the Change Conversations (2017) blog outlined a few key considerations for designing information accessibility for older people with impacted vision. Through this blog, he outlines three basic principles of good design:
Readable typeface and size
Well-contrasting elements and colour choices
Clear design, layout, and eye-path.
He also outlines a few of the factors that leads to needing these considerations. The most useful part of this article are the few fonts he recommends. I had a look through and grabbed some that I like, and you can see these in Figure 5. I intend to show these on Thursday with the rest of my brainstorming and get a consensus through feedback.
Figure 5. Font choices for my project. By Wikipedia, n.d., Retrieved 22 Aug 2023.
References
Pettengill, B. (2017, March 23). Vision changes: Typography for aging audiences. Marketing Partners. https://www.marketing-partners.com/conversations2/vision-changes-typography-for-aging-audiences#:~:text=A%20few%20typefaces%20that%20meet,the%20web%2C%20for%20good%20reason
Wikipedia. (n.d., Retrieved 22 Aug 2023). Gill Sans. https://en.wikipedia.org/wiki/Gill_Sans
Wikipedia. (n.d., Retrieved 22 Aug 2023). Helvetica. https://en.wikipedia.org/wiki/Helvetica
Wikipedia. (n.d., Retrieved 22 Aug 2023). VAG Rounded. https://en.wikipedia.org/wiki/VAG_Rounded
Wikipedia. (n.d., Retrieved 22 Aug 2023). Verdana. https://en.wikipedia.org/wiki/Verdana