Week 11 is really 3 weeks in one, as the University has been off for two weeks. I've taken this as an opportunity to push forward with my prototype and I've made considerable progress. I decided to take a week off work to dedicate my time to getting the project to a point near completion.
Change in Colours
One of the main insights from the user testing was the app was uninspiring and felt like a business tool. This was echoed in the first iteration I did with colour which made the app look bland. I wanted the app to be useful in building the user's skills but also one they wouldn't feel was a chore to use. I began experimenting with different looks, not particularly focussing on the functionality but rather on what it conveyed. (figure 1) One of the designs that really struck me was the yellow that was close to #F7B05B "Earth Yellow", which I had used in the previous iteration. In this iteration, the colour took a more prominent role and added some character to the design.
I also moved away from the material icons I had previously been using, as these were quite generic and wanted to use icons that convey character as well. The icons I decided on were designed by Iconsax Duotone Line icons, which I found on svgrepo.com (n.d.).
Typography
Things began to fall into place and a design vocabulary started to form. I decided to look at FontPair for a second time and I settled on the use of Nunito and PT Sans (figure 2). This sans-serif combination had what I was looking for. A legible, but fun and informal font for the heading in Nunito and a more straightforward, but equally legible font for the body copy and microcopy,
Applying the look to the current design
From here I began to translate the changes to the screens I have already and the look of the app started to take shape. I'm much happier with the direction of the design now than before.
One of the other things that the usability testing highlighted was the onboarding process needed to be more engaging with few steps, whilst making it clearer to the user that they could choose to use LinkedIn integration or not.
I used the highlighter technique by Everett McKay I mentioned in week 7 to reduce the copy and number of screens (figure 4) and I made the first few screens benefits orientated, with the third screen goal-orientated, whether they want to use the app for fun or professional purposes (figure 5). I've been reading up about the paradox of the active user - where the user is more motivated to get started achieving their goals using a product, rather than spending time learning it (Rosson and Carroll, 1987:1).
I was also keen to nail down some imagery for the onboarding screen. Initially, I thought about using photography of people doing skill (which in retrospect could have been anything) but I also wanted to have some animation on there, which I felt was more appropriate for illustrations. I love the look of the illustrations on the online tool Hotjar, which I use for work. The illustrations are simple line drawings but communicate a tone I wished to replicate, professional but fun, vibrant and engaging. (figure 6)
As I would not consider myself an illustrator, I decided to use the work of @vecorjuice (figure 7), a talented illustrator from Canada which I found on freepik.com. As an aside, all stock imagery sourced for the volunteering opportunities, profile images and skills were also from freepik.com.
The final design for the onboarding can be seen in figure 8. The screens with the illustrations use 'smart animate' transitions and ease-out easing for animations intent on drawing attention to the content, without creating obstacles (Head 2016: 44).
Branding
One of the glaringly obvious omissions to the concept was the lack of a name or any brand identity. I really struggled to get an idea for a name and brainstorm many that I didn't like. I wanted it to contain the works skill and/or volunteer but any shorting or hyphenation looked and sounded awful. For a time I had contemplated SkillingIt (as in killing it, like crushing it), but this was taken by a https://www.skillingit.com/ - a life Skills Video Lesson for Teens (n.d).
Eventually, I decided to go with the name SkillJoy, a play on words with killjoy... inverting it to something that's positive: ‘Why be a killjoy when you have Skilljoy?’’ a clear reference to the reluctance of user persona to engage with the volunteering space. The name also references skills and joy in an attempt to reframe the experience as fun and related to skills earned.
The final logo was based on the letters ”S” and “J” which have been layered and rotated to provide the final composition (figure 10).
Using Components
I'm so glad I took the time to look into the components for Figma, they have been a huge boost in my productivity. Not only was I able to use them to reduce the number of screens I needed to produce but also to produce some animations for loading like spinners and placeholders which I found a great tutorial for (Product Meow, 2022). It has been great for switching between different states for things like radio buttons and checkboxes as well as for the filter screen, although I don't think these will actually do the filtering now as I can't seem to find tutorials that indicate where one component can influence another, they seem self-contained.
Endorsements
Working throughout the Easter break has meant I was able to get the endorsements section done as well, where users are able to endorse fellow users of the app they have volunteered with. This was one of the key elements I was desperate to keep in the design, as users would see the skills they have endorsed in their Skills HQ area so I needed a reciprocal part for the whole concept to work. This section was planned to be tested as early as week 7 but languished in development hell due to the drain on resources the Skills area was causing. In the end, I decided to allow minimal variation with the skills HQ, as even using the components didn't allow for total coverage of every possible permutation.
Slide to delete
I did decide to go down the contextual action route of the slide to delete, but the lack of signifiers did make me feel uncomfortable. I wanted to mitigate this by adding a red marker on the right-hand side to at least show that something might be there. This kept the action of deleting tired to the skill and I felt was more intuitive. But really could have done with further testing.
The SkillJoy Prototype
The work to get the app to a somewhat completed state has been quite a challenge over the last two and a half weeks. At week 10, I really didn't have a clue how the app would really look aesthetically other than I was dissatisfied with it. I already had at that point I was a clearer idea of the functionality of the prototype and tested the sections (minus the Endorsements area) with users. With more time I wish I would have done more testing. This is something I have to live with now as I need to focus o the case study and the video.
Case study
Do I feel like I’m in a good place for my case study? I started compiling the content from the CRJ notes I had and I’m struggling to create a piece that’s 100% positive but is also authentic to my experiences in this module. I find myself having to justify not only the design decision I made but also the reason I’m so behind, which is not translating well into showcasing my work.
I asked my tutor LJ for some pointers on the case study and provided a first draft. In it, I mention the bottleneck in my approach during the prototype production and how that had impacted usability testing as well as agonizing over gamification in week 5. She came back with the following points that seem to confirm that I need to adopt a more positive approach.
“Your case study should be something that really sells the project and your skills, especially if you want to use it in your portfolio and for applying for roles. You can use the narration to be more reflective, but your CRJ is probably the best place to talk about what didn't go well, we are looking for self-criticism as part of the CRJ criteria. ”
(Hazzard, 2023)
This did help, and I was able to get a version that was less pessimistic together. I am immensely proud of what I have been able to achieve these last two weeks, which is not to diminish the work put in at the start of the module. I need to remember that the project started to languish at week 7 and not completely write off the work I had done previously. This reminds me of the peak-end rule
People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.
(Yablonski, n.d)
I need to reflect on the project as a whole and not just focus on the tougher moments and remember to celebrate the parts that were successful and that I was able to pull it back from the brink. With that, I am off to finish my Case study.
References
CARROLL, John M. and Mary Beth ROSSON. 1987. ‘Paradox of the Active User’. In Interfacing Thought: Cognitive Aspects of Human-Computer Interaction.
HAZZARD, LJ. 2023. Conversation with Daniel Clarke on Teams, 25/04/23.
HEAD, Val. 2016. Designing interface animation: Improving the user experience through animation. Brooklyn, New York: Rosenfeld Media.
Iconsax Duotone Line Icons. n.d. Retrieved from https://www.svgrepo.com/collection/iconsax-duotone-line-icons/
Product Meow. 2022 . 'How To Create Loading Spinner In Figma'. YouTube.[online] Available at: https://www.youtube.com/watch?v=3W_WHKg16HM [accessed: 01/04/23].
SkillingIT. n.d. 'SkillingIt-a revolutionary learning platform that’s getting back to the basics'.[online] https://www.skillingit.com/ [accessed: 01/04/23].
YABLONSKI, Jon. n.d. ‘Peak-End Rule, Laws of UX’.[online] Available at: https://lawsofux.com/peak-end-rule/[accessed: 01/04/23].
Figures
figure 1.: CLARKE, Daniel. 2023.Experimentation with colour, typography and icons.
figure 2: CLARKE, Daniel. 2023.Updated Typography of Nunito and PT Sans
figure 3: CLARKE, Daniel. 2023. translation of new colour, typography and icons on existing skills screen
figure 4: CLARKE, Daniel. 2023. Reducing the onboarding screens and copy using Everett McKay's hightlighter technique
figure 5: CLARKE, Daniel. 2023. Simplified onboarding flow.
figure 6: Hotjar. 2023. Hotjar homepage, showing their illustrative style. Available at: https://www.hotjar.com/ [accessed: 19/03/23].
figure 7: @vectorjuice. n.d. Free vector volunteering abstract concept vector illustration volunteer project community service altruistic job activity volunteering-animal-shelter nonprofit social organization abstract metaphor. Available at: https://www.freepik.com/free-vector/volunteering-abstract-concept-vector-illustration-volunteer-project-community-service-altruistic-job-activity-volunteering-animal-shelter-nonprofit-social-organization-abstract-metaphor_24122266.htm#query=volunteer&position=4&from_view=author [accessed: 17/03/23].
figure 8: CLARKE, Daniel. 2023. Onboarding flow with updated colours, illustrations and typography
figure 9: CLARKE, Daniel. 2023. Skilljoy logo concepts
figure 10: CLARKE, Daniel. 2023. Skilljoy final logo
figure 11: CLARKE, Daniel. 2023. Example of Figma components on the Skilljoy project
figure 12 .2023. Clarke. Endorsement screen
figure 13: CLARKE, Daniel. 2023. Slider to Delete feature for skills
figure 14: CLARKE, Daniel. 2023. SkillJoy App
Comments