top of page
Writer's picturedanielclarke1981

Week 11 - Skilljoy and Case study

Updated: May 3, 2023

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.

figure 1. Clarke . 2023. Experimentation with colour, typography and icons.
figure 1.: Clarke 2023. Experimentation with colour, typography and icons.

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,

figure 2. Clarke . 2023. Updated Typography of Nunito and PT Sans
figure 2: Clarke 2023. Updated Typography of Nunito and PT Sans

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.


figure 3. Clarke . 2023. translation of new colour, typography and icons on existing skills screen
figure 3: Clarke 2023. translation of new colour, typography and icons on existing skills screen

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).


figure 4. Clarke. 2023 . Reducing the onboarding screens and copy using Everett McKay's hightlighter technique
figure 4: Clarke 2023 . Reducing the onboarding screens and copy using Everett McKay's hightlighter technique


figure 4. Clarke . 2023. Simplified onboarding flow.
figure 5: Clarke 2023. Simplified onboarding flow.

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)


figure 6: Hotjar 2023. Hotjar homepage, showing their illustrative style.

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.

figure 5. @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
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

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).

figure 6. Clarke. 2023. Onboarding flow with updated colours, illustrations and typography
figure 8: Clarke. 2023. Onboarding flow with updated colours, illustrations and typography

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.


Figure 7. Clarke. 2023. Skilljoy logo concepts
Figure 9.: Clarke 2023. Skilljoy logo concepts

The final logo was based on the letters ”S” and “J” which have been layered and rotated to provide the final composition (figure 10).

Figure 8. Clarke. 2023. Skilljoy final logo
Figure 10: Clarke 2023. Skilljoy final logo

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.


figure 9. Clarke. 2023. Example of Figma components on the Skilljoy project
figure 11: Clarke 2023. Example of Figma components on the Skilljoy project

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.

figure 12 .2023. Clarke. Endorsement screen
figure 12: Clarke 2023. Endorsement screen

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.

figure 13. Clarke. 2023. Slider to Delete feature for skills
figure 13: Clarke 2023. Slider to Delete feature for skills

The SkillJoy Prototype

figure 14. Clarke . 2023. SkillJoy App
figure 14: Clarke 2023. SkillJoy App

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






22 views0 comments

Recent Posts

See All

Comments


Post: Blog2_Post
bottom of page