Showing posts with label website. Show all posts
Showing posts with label website. Show all posts
Wednesday, 8 May 2019
How strategic design informed my research blog's 2019 update
Written for researchers interested in using design strategy and brand positioning for improving their online research presences (particularly via blogs, blogsites and websites).
A. Why Strategic Design?
Table 1. High-, mid- and practice level design disciplines.
HL Design Management (i.e. brand & software & service design mx)
|
HL Strategic Design (i.e. data analysis informing brand positioning)
|
ML Design Thinking (meta-disciplinary)
|
PL Surface design
|
PL Brand design management
|
PL User-centred and experience design
|
PL Software and information design
|
PL Service design management
|
PL Curricular and instructional design
|
PL Legal design
|
PL Business design management
|
As Table 1 illustrates, the disciplines of Strategic Design and Design Management are high level (HL) strategic ones. In business, these disciplines typically seek to define and improve the long-term, 'meta' design drivers. By contrast, Design Thinking is a mid-level (ML) meta-disciplinary approach that often seeks to tackle a ‘wicked problem’ space with varied perspectives in a short burst. At the bottom of the table are performance level (PL) practices whose designers' expertise is used for providing discrete, 'micro' solutions.
For an individual blog designer, strategic design considerations may be particularly helpful for answering a big personal challenge. For example, mine was 'How do I update my research blogsite to best support my post-PhD aspirations?' To answer this, I did a strategic design process that included data analysis, a review of my personal branding plus identity development exercises. These informed my creative brief to Jon, plus the ongoing development of this blogsite.
To improve my blog's usability and personal salience, I made the following design changes:
+1> My roles were simplified;
+2> I checked how each role and my research interests were reflected in my labels;
+3> My publication plan addresses my diverse roles and interests;
+4> I reordered my 'research' navigation to support the postdoctoral publication hierarchy;
+5> I also took other measures for improved reliability;
+6> plus security.
+1> Refined my personal brand positioning and roles
Online spaces can provide ready opportunities for individuals to experiment with digital personas. As part of my PhD's broader identity exploration project, my blog featured five roles in its navigation. These were 'researcher', 'designer', 'educator', 'public speaker' and 'volunteer'.
While accurate in terms of identity exploration as a PhD candidate, it made for a complex and potentially confusing navigation structure on the mobile phone (see left in Figure 1). It also seemed important to simplify identities to reduce that inevitable 'he's a jack-of-all-trades' perception!
 |
Figure 1. travisnoakes.co.za navigations (version 2016 vs 2019) in mobile screen by Jon Wheelan, 2019.
|
To solve both challenges, I did an exercise for simplifying my identity by clearly defining the three roles I prefer to do. Such consolidation also supports a simpler overall online persona that is easier to keep coherent (i.e. I might describe the same roles on; LinkedIn for work, academic portals for research; Twitter micro-blogging or Facebook for friends). My roles were prioritised down to the big three of: 'researcher', 'design steward' and 'techné mentor'. Interestingly, researching design strategy introduced me to the unusual 'design steward' and 'techné mentor' roles: The former reflected how my career in design increasingly involved briefing designers and sharing their work, versus my own designs. As a ‘techné mentor’, I am involved in fluid, once-off educational interventions related to technology. My previous roles (such as speaker and volunteer) proved easy to re-house under the simpler navigation (see right in Figure 1).
+2> Checked that my Postdoctoral roles and interests are covered in Blogger labels
I've tried to make my blog easy to search by using Blogger 'labels' for each of its posts. By analysing my use of labels and how these relate to my roles, I learnt that there were far more articles that related to my role as a techné mentor, than as a researcher or design steward.
As a multi-disciplinary researcher, I also explored how well, or poorly, my label-use linked to my core research interests; 'online identity', 'cultural taste', 'connected learning', 'participatory culture' and 'design strategy'. The analysis (see Figure 2) foregrounded an opportunity for improving the labels I had used and the need to add key labels that were 'missing-in-action'.
It'll be a lengthy project on its own to simplify them; these labels reflect ten years of history in terms of the varied interests and projects they reflect. A big benefit of doing such work lies in it improving viewers' label search options, whilst helping me to better strategise on the blog's content development.
+3> Plan for publications linked to refined roles and interests
+4> Reprioritised researcher publications
Another important shift lay in switching the priority of navigation options under my researcher button. Back when I was a PhD candidate, it was most important to get feedback via conferences on my manuscripts and presentations. However, both are near the bottom of a traditional academic publishing hierarchy. Postdoc application requirements reflect this hierarchy in spotlighting emergent scholars' publication of research articles (and/or chapters). My revised navigation reflected this hierarchy by first featuring articles and first chapters. It then provided a link to my thesis' abstract, my conference papers and Slideshare account. Overall, this structure is fairly future-proof, since it is easy to add new research material to and for users to follow.
Blogger's widget layout system makes it very easy to add functions to one's blog. A downside of adding content from third parties (such as one's researcherID badge...) is that these may not have been tested in Blogger widgets, nor on all browsers. One side effect can be that widgets alter one's layout (... which influenced this blog's body text layout after it exceeded a certain width in Google Chrome). Running Google Chrome error reports also flagged issues with select add-ins. In response, I updated all profile badges and combined them into as few widgets as I could to increase reliability Defunct services, such as my Google+ profile and related pages, were removed. In their place, I added the curatorial accounts of Pinterest and Diigo accounts.
+6> Secured research blogsite with the https protocol
When I started this blog ten years ago, securing it via the https:// protocol was not even a consideration due to the high cost and the technical complexities involved. By contrast, today it is affordable and Internet Service Providers provide FAQs on shifting to https:// protocols that are easy to follow. With assistance from the helpful staff of grid-1.com, transitioning this blog to a secure protocol proved a surprisingly straightforward process that took less than two days from purchase to authorisation and implementation.
I hope this post will inspire others to apply strategic design practices and brand positioning for improving their online research presences.
 |
| Figure 2. travisnoakes.co.za label review |
Speaking of which, I have prepared a research publication plan that primarily includes research articles from my PhD, the online academic bullies and mobs project and this blog. Over time, I hope to feature more design-related posts on this blog, plus visual designs. This will create a clear shift with content previously dominated by my PhD research and related techné mentorship concerning e-portfolios.
Another important shift lay in switching the priority of navigation options under my researcher button. Back when I was a PhD candidate, it was most important to get feedback via conferences on my manuscripts and presentations. However, both are near the bottom of a traditional academic publishing hierarchy. Postdoc application requirements reflect this hierarchy in spotlighting emergent scholars' publication of research articles (and/or chapters). My revised navigation reflected this hierarchy by first featuring articles and first chapters. It then provided a link to my thesis' abstract, my conference papers and Slideshare account. Overall, this structure is fairly future-proof, since it is easy to add new research material to and for users to follow.
+5> Improved research blogsite's reliability
Blogger's widget layout system makes it very easy to add functions to one's blog. A downside of adding content from third parties (such as one's researcherID badge...) is that these may not have been tested in Blogger widgets, nor on all browsers. One side effect can be that widgets alter one's layout (... which influenced this blog's body text layout after it exceeded a certain width in Google Chrome). Running Google Chrome error reports also flagged issues with select add-ins. In response, I updated all profile badges and combined them into as few widgets as I could to increase reliability Defunct services, such as my Google+ profile and related pages, were removed. In their place, I added the curatorial accounts of Pinterest and Diigo accounts.+6> Secured research blogsite with the https protocol
I hope this post will inspire others to apply strategic design practices and brand positioning for improving their online research presences.
Tuesday, 5 July 2016
How to extensively customize your Blogger template with custom-designed, menu buttons etc. @Blogger #gHelp
+ Written for Blogger users who want a high-level introduction to extensively customizing their template. This includes adding custom-designed navigation menu buttons. I couldn’t find an FAQ topic addressing this topic anywhere on the web, so here’s a post to help close this gap :
This high-level ‘how-to’ is written as an interview between Jonathan Whelan (this blog’s designer and template coder) and I (his Blogger-using client). We cover the why’s and how’s of my old blogs’ custom template’s look-and-feel being completely reworked to look and function impressively. This includes the process he followed for adding custom-designed buttons to the navigation menu of a basic Blogger template.
Travis: This custom Blogger template that I last edited in 2009 had become way past its use-by date. It looks jurassic compared to contemporary layouts. It also did not work well on mobile phones, while its custom code seemed to obstruct Google’s add-in gadgets for social network sharing. Being close to finishing my thesis’ full draft, I wanted its design to reflect my aspirations for it as a ‘post-PhD’ blogsite. The new, next-level up, look-and-feel also needed to reflect broader personas than a ‘researcher’s blog’ could. It took a while to decide on a graphic metaphor that resonated with my different roles, but I eventually came up with the idea of a ‘plus’ sign. This suggests how each individual combines and expresses varied personas - a key focus of my PhD {The nerdy humorist in me also hopes that geeks will appreciate its tangential nod to ‘Google Plus’ ;) }. In my life, the roles of Researcher, Educator, Design Thinker, User, Speaker and Volunteer have become the most salient. So, I sketched some icon ideas for these pluses. These were incorporated into a creative brief (see travisnoakes.co.za look-and-feel update brief 2016), for Jon to quote on.
Jon: Being a graphic design professional, it was easy for me to rework the plus icon ideas into versions that would look good even at a small mobile phone screen scale.
Travis: Yes, it’s very easy to ignore these users when enjoying these designs on a wide, monitor screen in the office.
Jon: Right. For me another conversion issue was becoming familiar with how Blogger organises pages and add-ins, versus how Wordpress CMS supports in-depth design customisation. The way a Blogger theme is built is slightly different and it took some learning from my side appreciate how it applies html and css: Blogger themes are structured in sections and built out of widgets/gadgets. With this in mind, I proposed building the theme from the ground up to be more efficient than hacking a free or a paid-for one.
Travis: That proved the right way to go. Compared to WordPress, Blogger seems not to offer the same level of template customisation and control. This probably contributes to why Blogger seems not be as widely used as WordPress by Capetonian designers or academics. Nevertheless, I was not keen to shift to a Wordpress blog. I am pleased at my blogsite's search engine recognition, especially for its niche subject-matter. I also like Blogger’s ease-of-use and not having to worry about back-end maintenance, such as updating it. I was hoping to benefit from the multi-device compatible (mobile and tablet) publishing and fast page download speeds it provides. Then there’s the Google translate widget, which allows viewers to select their preferred language translation of a post. I’m especially happy that this makes it easy for its e-portfolio lessons to be viewed in Afrikaans, Sesotho, Xhosa and Zulu. I enjoy the live internet traffic stats that Blogger shows too. And its easy integration with Google Adsense has taught me how difficult it is for niche bloggers to cover one’s hosting fees. The unfortunate side effect of my Blogger fanboy-ness was Jon having to attend a crash-course at “Blogger University” ;) ...
Jon: True. I think that most locals also use WordPress, because it is extensible, easy to customise and manage. By contrast, Blogger has limitations with regard to adding custom features. My jump into Blogger’s “deep-end” proved daunting, given the tight deadline I was working towards and needing to follow a ‘site design and build method’ comprising wireframe-, mockup-, code- and testing phases. The wireframe was easy to mock up into two draft .html mockups for button varieties one and two. However, there were several stumbling blocks that needed to be overcome before the chosen design could be implemented in Blogger.
Travis: Correcting my ‘plus’ symbol ideas that might be perceived as medical or religious was a breeze in comparison?
Jon: Sometimes over-using the plus symbol seemed to take away from the simplicity that we wanted. Also, I spent quite a while reworking the icons to make sure their quality will not deteriorate as they scale down. The simplified design of the buttons was done to suit Google’s Material standards. Although quite literal, the new buttons’ advantages were that they quickly communicated what they were about. Once you had chosen a combination of icons from both sites, I broke up the html from the test sites. These were added to Blogger widgets in my test blogsite’s basic template. Only once I was confident that the template actually worked, was I then prepared to apply it to Travis’ live blogsite.
Travis: You made several backups and I was very happy that you didn’t need to use them. Another plan B was contracting freelance Blogger experts via upwork.com, such as Prayag Verma or Nicholas P. Both had many positive reviews in what seems to be a niche area of expertise.
Jon: It took a while to figure out ways in which the site could work like Travis originally wanted it to. For example, there was no online ‘how to’ on linking designed buttons from a navigation menu. I worked out that I could use a widget for writing html and css to address this potential showstopper. Travis gave me access to the CPanel service for his webhost’s domain. I needed to store the icon images in the domain, and link the images to his blog. This allowed me to add links from the button images to old and new pages, or addresses pointing to a label query (i.e. http://www.travisnoakes.co.za/search/label/design_thinking).
Travis: There was a minor technical delay before Jon could put this into practice. After trying to login unsuccessfully to the CPanel address, I logged a support ticket. The upshot was that we needed to wait for my webhost to activate the CPanel’s functionality and for my new access details to work. Hopefully our readers are now forewarned to check with their webhost and set up domain access early on. Do not confuse such access with their basic hosting account, like I did.
Jon: In working on the navigation menu widget, I also discovered that by removing the skin, I know it sounds painful, I could style the design better. I then did another iteration of the site to show what a possible working prototype would look like. I preferred to do this, so that the icons could be viewed from the user's perspective. This also helps me in my design process as I can see how it works online as opposed to a nice A4 printed presentation.
Travis: Yes, it was reassuring for me as the client to see a working prototype before the migration.
Jon: Then when it was time to do the transfer. I backed up the old site before I did anything. I organised his redirect page as I started applying the new look-and-feel, so that visitors to the site would not have access to the "renovations" and get a teaser of the imminent update.
Travis: While you were doing this, I could also log into Blogger and see the site running the new template. Jon used all the gadgets from its previous version and I could see this still running, which was neat.
Jon: Yes, I also refined the desktop navigation icons, which were center aligned to take up less space. I added a page to link to each button and checked the 'plus' favicon' was visible. The pageviews were still 95,867, as they were. All the other elements were there. I hardcoded a social media links tab to appear in each post… The reason I hardcoded the social media icons was to ensure the look and feel was consistent with the rest of the theme, the icons and also because there weren't any gadgets available to meet our needs. For the Adsense gadget, I just changed the sidebar one to be 'responsive' to make it look better on mobile.
Travis: On that, my blog’s appearance on mobile is light-years from where it was.
Jon: The desktop too, as we can see in my images.
Travis: I hope our chat has given Bloggers insight into an approach they might follow to extensively customise their blogs’ ‘look and feel’.
Jon: Yes, and if you need in-depth help, please contact me via http://www.jonathanwhelan.com/contact-jonathan-whelan.
Travis: And if you have any suggestions or concerns, please add a comment below, ta.
This high-level ‘how-to’ is written as an interview between Jonathan Whelan (this blog’s designer and template coder) and I (his Blogger-using client). We cover the why’s and how’s of my old blogs’ custom template’s look-and-feel being completely reworked to look and function impressively. This includes the process he followed for adding custom-designed buttons to the navigation menu of a basic Blogger template.
 |
| Image 1. www.travisnoakes.co.za in Macbook, May, 2016. Adobe Photoshop by Jon Whelan. |
Travis: This custom Blogger template that I last edited in 2009 had become way past its use-by date. It looks jurassic compared to contemporary layouts. It also did not work well on mobile phones, while its custom code seemed to obstruct Google’s add-in gadgets for social network sharing. Being close to finishing my thesis’ full draft, I wanted its design to reflect my aspirations for it as a ‘post-PhD’ blogsite. The new, next-level up, look-and-feel also needed to reflect broader personas than a ‘researcher’s blog’ could. It took a while to decide on a graphic metaphor that resonated with my different roles, but I eventually came up with the idea of a ‘plus’ sign. This suggests how each individual combines and expresses varied personas - a key focus of my PhD {The nerdy humorist in me also hopes that geeks will appreciate its tangential nod to ‘Google Plus’ ;) }. In my life, the roles of Researcher, Educator, Design Thinker, User, Speaker and Volunteer have become the most salient. So, I sketched some icon ideas for these pluses. These were incorporated into a creative brief (see travisnoakes.co.za look-and-feel update brief 2016), for Jon to quote on.
Jon: Being a graphic design professional, it was easy for me to rework the plus icon ideas into versions that would look good even at a small mobile phone screen scale.
 |
| Image 2. New button icon designs for www.travisnoakes.co.za, June, 2016. Adobe Illustrator by Jon Whelan. |
Jon: Right. For me another conversion issue was becoming familiar with how Blogger organises pages and add-ins, versus how Wordpress CMS supports in-depth design customisation. The way a Blogger theme is built is slightly different and it took some learning from my side appreciate how it applies html and css: Blogger themes are structured in sections and built out of widgets/gadgets. With this in mind, I proposed building the theme from the ground up to be more efficient than hacking a free or a paid-for one.
Travis: That proved the right way to go. Compared to WordPress, Blogger seems not to offer the same level of template customisation and control. This probably contributes to why Blogger seems not be as widely used as WordPress by Capetonian designers or academics. Nevertheless, I was not keen to shift to a Wordpress blog. I am pleased at my blogsite's search engine recognition, especially for its niche subject-matter. I also like Blogger’s ease-of-use and not having to worry about back-end maintenance, such as updating it. I was hoping to benefit from the multi-device compatible (mobile and tablet) publishing and fast page download speeds it provides. Then there’s the Google translate widget, which allows viewers to select their preferred language translation of a post. I’m especially happy that this makes it easy for its e-portfolio lessons to be viewed in Afrikaans, Sesotho, Xhosa and Zulu. I enjoy the live internet traffic stats that Blogger shows too. And its easy integration with Google Adsense has taught me how difficult it is for niche bloggers to cover one’s hosting fees. The unfortunate side effect of my Blogger fanboy-ness was Jon having to attend a crash-course at “Blogger University” ;) ...
Jon: True. I think that most locals also use WordPress, because it is extensible, easy to customise and manage. By contrast, Blogger has limitations with regard to adding custom features. My jump into Blogger’s “deep-end” proved daunting, given the tight deadline I was working towards and needing to follow a ‘site design and build method’ comprising wireframe-, mockup-, code- and testing phases. The wireframe was easy to mock up into two draft .html mockups for button varieties one and two. However, there were several stumbling blocks that needed to be overcome before the chosen design could be implemented in Blogger.
Travis: Correcting my ‘plus’ symbol ideas that might be perceived as medical or religious was a breeze in comparison?
Jon: Sometimes over-using the plus symbol seemed to take away from the simplicity that we wanted. Also, I spent quite a while reworking the icons to make sure their quality will not deteriorate as they scale down. The simplified design of the buttons was done to suit Google’s Material standards. Although quite literal, the new buttons’ advantages were that they quickly communicated what they were about. Once you had chosen a combination of icons from both sites, I broke up the html from the test sites. These were added to Blogger widgets in my test blogsite’s basic template. Only once I was confident that the template actually worked, was I then prepared to apply it to Travis’ live blogsite.
Travis: You made several backups and I was very happy that you didn’t need to use them. Another plan B was contracting freelance Blogger experts via upwork.com, such as Prayag Verma or Nicholas P. Both had many positive reviews in what seems to be a niche area of expertise.
Jon: It took a while to figure out ways in which the site could work like Travis originally wanted it to. For example, there was no online ‘how to’ on linking designed buttons from a navigation menu. I worked out that I could use a widget for writing html and css to address this potential showstopper. Travis gave me access to the CPanel service for his webhost’s domain. I needed to store the icon images in the domain, and link the images to his blog. This allowed me to add links from the button images to old and new pages, or addresses pointing to a label query (i.e. http://www.travisnoakes.co.za/search/label/design_thinking).
Travis: There was a minor technical delay before Jon could put this into practice. After trying to login unsuccessfully to the CPanel address, I logged a support ticket. The upshot was that we needed to wait for my webhost to activate the CPanel’s functionality and for my new access details to work. Hopefully our readers are now forewarned to check with their webhost and set up domain access early on. Do not confuse such access with their basic hosting account, like I did.
Jon: In working on the navigation menu widget, I also discovered that by removing the skin, I know it sounds painful, I could style the design better. I then did another iteration of the site to show what a possible working prototype would look like. I preferred to do this, so that the icons could be viewed from the user's perspective. This also helps me in my design process as I can see how it works online as opposed to a nice A4 printed presentation.
Travis: Yes, it was reassuring for me as the client to see a working prototype before the migration.
Jon: Then when it was time to do the transfer. I backed up the old site before I did anything. I organised his redirect page as I started applying the new look-and-feel, so that visitors to the site would not have access to the "renovations" and get a teaser of the imminent update.
Jon: Yes, I also refined the desktop navigation icons, which were center aligned to take up less space. I added a page to link to each button and checked the 'plus' favicon' was visible. The pageviews were still 95,867, as they were. All the other elements were there. I hardcoded a social media links tab to appear in each post… The reason I hardcoded the social media icons was to ensure the look and feel was consistent with the rest of the theme, the icons and also because there weren't any gadgets available to meet our needs. For the Adsense gadget, I just changed the sidebar one to be 'responsive' to make it look better on mobile.
Travis: On that, my blog’s appearance on mobile is light-years from where it was.
Jon: The desktop too, as we can see in my images.
 |
| Image 3. www.travisnoakes.co.za, viewed via iPhone, June, 2016. Adobe Photoshop by Jon Whelan. |
 |
| Image 4. www.travisnoakes.co.za viewed via desktop browser, June, 2016. Adobe Photoshop by Jon Whelan. |
Jon: Yes, and if you need in-depth help, please contact me via http://www.jonathanwhelan.com/contact-jonathan-whelan.
Travis: And if you have any suggestions or concerns, please add a comment below, ta.
Saturday, 30 June 2012
UCT CFMS FAM3008S volunteers needed to assist with school's website development.
Written for University of Cape Town third-year Online Media Production students.
A government secondary school* that I'm doing research at is getting ready to launch its official website and is interested in being helped by UCT CFMS student volunteers:
The school.
A government secondary school* that I'm doing research at is getting ready to launch its official website and is interested in being helped by UCT CFMS student volunteers:
The school.
The school is proud of its rich sporting, cultural and academic traditions. It also has an interesting history in which its educators played a key role in the anti-Apartheid struggle for a democratic education system, being particularly active from 1976 to 1985.
Its website.
Its website.
The school has developed a website template that volunteers can work within (and improve, if necessary). The site will be hosted on the school's server, which select volunteers can be given access to.
Support on offer to your website development group.
The school's ICT Manager is keen for a group of the media production students to assist from August. Should your group decide to do it, he can commit to providing the following support:Support on offer to your website development group.
- He will setup an introductory meeting with the school's Principal (if possible), its PR manager, the template's developer, your group and I to scope your contribution;
- He would like to meet with your group on a weekly basis to give them feedback on their progress and authorize any major changes your group may want to make to the live site on the Principal's behalf;
- He will provide access to a scanner, so your group can digitize material sourced from the school library's historical archives;
- He can sign-off improvements that your group recommends for the school's other online presences (such as its Wikipedia page) as well as any new services (such as a school 'YouTube' account) that your group develops and which the school agrees to sustain;
- He will also work with your group to organize a handover to the relevant staff once they have completed the project.
I will supervise your group and liaise with Dr Marion Walton if there are any major issues during the website's creation and maintenance this year.
Interested?
This is a rare opportunity for students to develop an official school website with an already-existing archive of photography, press-archives and high level of support. So, if you are keen to assist, kindly email Dr Walton ASAP: the first UCT group to email her, the first to secure!
* Please note that I must keep the school's identity private in this post to protect the privacy of my research subjects.
Subscribe to:
Posts
(
Atom
)
Posts
orcid.org/0000-0001-9566-8983
