Journal | Fiona MacNeill | Macknowlogist

Hone Smart Home

Mon, 13 Feb 2017 00:00:00 +0000

At the end of my last entry I outlined my discovery that there was an app building company called Bubble, which would likely lead to brand confusion. As a result I decided to go back to some of the ideas on and consider other possibilities that would tackle some of the same goals. The following company traits need to be suggested by the name:

Organisation, finesse, attention to detail
Protection and/or care
Attentiveness
A connection to housing and or containment

Initially I came up with “Corral”, especially as I thought that this would appeal to the Smart Home market in the United States which seems to be more fully developed than that of Europe (I have sought data to prove this but a lot of the market research is behind pay walls, I did however find a nice snippet from Statista included below).

“Corral” suggests containment, gathering and shepherding something that is perhaps unruly. There could also be a potentially useful or possibly tacky mnemonic in that “IoT Corral” would remind users of “O.K. Corral” (O.K. Corral (building), n.d.) , another US connection. However, I decided this would likely err on the tacky-side. “Corral” is quite a specific idea so I tried out some new logo ideas and also had a think about rocking the minimalist boat by creating a more three-dimensional logo.

Shapes which could suggest a corral - essentially an abstracted animal pen.

Shapes with the shadow casting turned on. This allowed me to think about how these images would look if they were simplified into 2D shaded areas to provide the illusion of depth and perspective. I created these images in Sketchup (Trimble, 2017), a piece of software which I will undoubtedly use for some of the graphic prototyping in the app. I have a background in 3D modelling and the smart home visualisations will be more effective if they are modelled architecturally.

In this version I omitted the lines in order to see how pue shading would look.

[Was once a linked image to the logo for Badisches Landesmuseum Karlsruhe - link is no longer available in 2021 when this post was archived]

I was thinking of something like this logo but with a top and bottom section and more shading placed over logo text or on the left of the logo image (Stankowski & Duschek, 1992 as in Hyland & Bateman, 2011, p. 266).

The “Corral” concept although an equilateral has some similarities to a circle or oval and could suggest protective and nurturing qualities as we learned from the initial lecture with Phil Jackson. It could also be seen to bear representational similarity to an eye depending upon the placement of the logo title text.

“Corral” wasn’t quite working for me, it felt too fortified and possible too specific to the United States, it also started to remind me of a bank or credit card and there needs to be something more personal and homely about this product. Once again I changed tact.

The next idea that I pursued was to develop the word “Hone” as the company or app name. I immediately had a better gut feeling about this word especially when combined with my “IoT” trademark-style embellishment. On the surface level there is a nice mnemonic in that the word rhymes with “Home” and upon searching there aren’t any competing products with the same name.

“Hone” is a verb which when used with no object is often confused with the concept of homing in on something as opposed to sharpening, perfecting or focusing which is the correct meaning; another “home” association, even though it is incorrect it is actually of benefit (Hone in vs. hone in, 2015). The only consideration with the word itself is that if viewed from a distance in a font without a high ascender on the “h” it could be read as “none”; this may mean that a capital letter at the start of the word is preferable. With this in-mind I started with the typefaces I had explore of what I had first in the Adobe Creative Suite (Adobe, 2017) and then took a look at some Google fonts (Google, 2017a). Initially I started with quite chunky fonts and felt that I would like to include a powerbutton in the design to indicate control rather than making the home connection explicit by using a symbol. This also felt like it would allow space for the company and app to expand to the commercial sector if the connection was more subtle.

The first electronic Hone logo mock-up using the Montserrat Subrayada (Ulanovsky, n.d.) font and Prosto One (Lemonad & Emelyanov, n.d.) fonts.

This initial logo was too blocked and the plugged-in nature of the black lines, reminiscent of wires connecting each letter suggested an audio system or electronic music genre. I created a contact sheet of fonts based to keep for future reference and to trial in some logo designs: You can view this at the .

I tried out a few more ideas based on some hinting towards the futurism and vorticism art movements (see 2, 6 and 7), although these experiments proved to be overly busy and vaguely reminiscent of the cognitive dissonance I encountered the time I observed the design of the “It’s a small world” ride at Disneyland in CA, USA.

Gbklyn, CC BY-SA 4.0 , via Wikimedia Commons

I ran the logo contact sheet by a few people via social media, just for some initial thoughts and they gave me some good things to think about particularly the difference between European and US design tastes (an even split of EU and US comments). This also challenged some assumptions I had made about the better designs, so I will work up the best ideas in time for the session with Phil in order to get his feedback on the concept.

As a final piece of research to confirm that “hone” was a solid choice of word for branding I looked at the Google Ngram viewer (Google, 2017b). The Ngram Viewer allows you to search Google books content from 1800 - 2008 based on boolean word queries. So I searched for “hone” and I was interested to find that the capitalised form of the word was at the peek of it’s popularity around 1910 right at the end of the Edwardian era. I have made comparisons between the current state of Internet of Things (IoT) to the disarray around .

For example, during the Edwardian period there were different current voltages for electrical supply in different areas of England surly a recipe for fire or electrocution; IoT has many different wireless frequencies and no common consensus on standards so it isn’t all that different (although accidental death is less likely). This Edwardian connection provided more design inspiration and made me think that deriving inspiration from Edwardian architectural etchings and engravings may look more modern than 3D models which look dated very quickly. For example, Hive which is British Gas’s Smart Home thermostat has a lovely simulation interface, but the home simulated with 3D graphics looked like an early 2000s computer game (it seems that British Gas might have realised this too and the demo is now harder to find on the site, but still seems accessible via this link: [link no longer available]. With this in mind I considered what a banner could look like for hone, the logo needs some tracking adjustments, but this was a first try with some basic layer blending and a clean finish.

Phil also suggested that I look at some different wood finishes if I stick with this aesthetic. After coming back to this header test after a couple of days the current wood finish sort of reminds me of that cheap MDF coated board, so I definitely need to look at some alternatives. Something with more of a creamy background like this futurist drawing might be better.

By Antonio Sant'Elia - Utopie metropolitane, la mostra (in Italian). Style & Design. l'Espresso (2013-03-28). Retrieved on 2013-04-01., Public Domain, Link

References

Adobe. (2017). Adobe creative cloud [Computer software]. Retrieved from https://www.adobe.com/uk/creativecloud.html

Google. (2017a). Google fonts. Retrieved from the Google fonts website: https://fonts.google.com/

Google. (2017b). Google Ngram viewer. Retrieved from the Google Ngram Viewer website: https://books.google.com/ngrams

Home in vs. hone in. (2015) [Blog post]. Retrieved from http://blog.dictionary.com/hone-in-vs-home-in/

Hyland, A., & Bateman, S. (2011). Symbol. London, England: Lawrence King Publishing Ltd.

Lemonad, J., & Emelyanov, P. (n.d.). Prosto one. Retrieved from https://fonts.google.com/specimen/Prosto+One

O.K. Corral (building). (n.d.). In Wikipedia. Retrieved February, 18, 2017, from https://en.wikipedia.org/wiki/O.K._Corral_(building)

Trimble. (2017). SketchUp Make [Computer software]. Retrieved from http://www.sketchup.com/download?sketchup=make

Ulanovsky, J. (n.d.). Montserrat subrayada. Retrieved from https://fonts.google.com/specimen/Montserrat+Subrayada

Naming - initial ideas

Sat, 11 Feb 2017 00:00:00 +0000

On this page of my sketchbook I used a dice rolling exercise (Barnard & Briscoe, 2016) to explore different name combinations for the potential company. Initially I gravitated towards BubbleHome as a concept.

I then completed two iterations of the Lean Business canvas and fleshed out the idea a bit more. To summarise the main points, as this plan is likely to evolve over time:
Problem - top 3 problems

Each device has its own management system - this is a lot to keep track of
There is not a user-friendly way to map and monitor a smart home ecosystem in one place
Devices can have significant security issues when not setup correctly

Solution - top 3 solutions

Aggregate operational updates from devices via open api
Provide a mapping tool allowing users to position devices in a model of their home and review synchronous operations
Provide security advice based on device ecosystem and configuration patterns.

The cost structure versus the customer segment is a bit of a sore point in the canvas plans. The development costs seem like they will be very high in comparison to the small audience for this product in Europe. Marketing this product to US consumers might reap more benefits as there are a greater number of smart home products specifically marketed in the United States. The research to prove this is largely behind heady pay walls (NPD, 2017) but the main products such as Nest (Google, 2017b) and SmartThings (Samsung, 2017) were initially launched in the United States and therefore logically it makes sense that they may have larger customer segments in the United States as opposed to Europe. Another factor which I was able to locate recent research on was that security cameras are the most popular devices (NPD, 2016). This emphasis on security could serve my solution as well, as IP cameras are for security, but if they are compromised that could present some huge privacy issues and security issues for the end-user. It reminds me of the Shodan baby cam story (Porup, 2016) from last year and this thread on Reddit (jenn_and_tonic, 2016):

I spent a bit of time sketching logo ideas for a logo. I felt like I wanted BubbleHome to be approachable so initially I considered a bespoke serif script font. However, this would be rather unconventional for a tech-focused company where clean sans-serif screen fonts are the norm. I tried out the idea of including a house pictogram in the logo, but it kept looking more like an upload symbol than a house/home and I felt that it would narrow the scope of the solution (visually exclusive; what about apartments?), and there might be future expansion into corporate solutions.

This version was too busy and was really just a test. The blue background seemed caring and trustworthy, as did the circular bubble formation. I decided to take these elements forward to the next version. Font: DIN Alternate Bold // Background colour: #448ccb

I really liked this version and the evolution of “IoT” for Internet of Things becoming a trademark-like descriptor providing immediate context. To back up my assumption that IoT is an understood concept, I did a bit of digging in Google Trends (Google, 2017a). I compared several search terms and was interested to find that the interest in IoT now far outstrips “Internet of Things” although it could be that some are searching to find out what the acronym means! I also looked at “Smart Home” and “IFTTT” (main competitor in theory) for comparison. Another interesting observation was that the “Smart Home” term seems to be greater interest in the United States and the United Kingdom and “IoT” seems to be more prevalent elsewhere - this might be partially explained by the translation of Smart Home into different languages. This is something to bear in mind though with regard to marketing.

[Had to remove older Google Trends data]

I got as far as creating a Hero image for the Bubble or BubbleHome concept and then found that there was app builder with the name Bubble ( ) and very distinctive logo and I felt that this would like affect the success of the concept as an independent brand.

Plus there is a danger that people might think of a house like this:

Back to the drawing board…

References

Porup, J. M. (2016, January 23). “Internet of Things” security is hilariously broken and getting worse. ArsTechnica. Retrieved from https://arstechnica.com/security/2016/01/how-to-search-the-internet-of-things-for-photos-of-sleeping-babies/

Barnard, D. & Briscoe, R. (2016, June 14). Workshop on creating games and playful interations for adult learning in public spaces. Workshop presented at the first conference on Playful Learning, Manchester, UK. Abstract retrieved from http://conference.playthinklearn.net/blog/programme/full-abstracts-thursday-14th#10

Google. (2017a). Google trends search [Computer software]. Retrieved from https://www.google.com/trends/explore?q=smart%20home,IFTTT,Internet%20of%20Things,IoT

Google. (2017b). Nest learning thermostat. Retrieved from the Nest website: https://nest.com/uk/

jenn_and_tonic. (2016, June 19). I bought and returned a set of WiFi connected home security cameras. Forgot to delete my account and I can now watch the new owner [Electronic forum post]. Retrieved from https://redd.it/4ortwb

Maurya, A. (2016). Lean canvas. Retrieved from https://leanstack.com/lean-canvas/

NPD. (2016). Network connected cameras account for the majority, 61 percent, of U.S. home automation industry revenues. Retrieved from https://www.npd.com/wps/portal/npd/us/news/press-releases/2016/safety-and-security-are-lead-drivers-in-smart-home-technology-interest--according-to-npd-connected-intelligence/

NPD. (2017). Home automation. Retrieved from http://www.connected-intelligence.com/our-research/home-automation

Samsung. (2017). SmartThings - smart home system. Retrieved from the Samsung SmartThings website: https://www.smartthings.com/uk/

Timeline tool identified

Fri, 25 Nov 2016 00:00:00 +0000

After a lot of consideration, struggle and annoyance I finally gave in and decided to use a pre-existing tool for the timeline section of my front page. I looked a few different contenders in this final pass. Essentially, I came to the realisation that I would not be able to learn the requisite Javascript in order to build something sophisticated enough from scratch. I did a bit of trying out in this jsFiddle project, but kept running into deadends (this project is in a partially built state - so please do not judge me - the javascript is largely erased by this point): Initially I found only jQuery examples - but as I have previously stated, I really wanted to work with Vanilla Javascript, due to load times, future proofing the code content. I also feel that it will be more beneficial to my learning to stick to learning Vanilla Javascript (or rather Ecmascript 6) so that I truly get the language prior to becoming too invested in specific frameworks. Also having looked at these two resources: and then the From - vanilla makes much more sense to me.

jQuery example 1: horizontal timeline ( | )
jQuery example 2: vertical timeline ( | )

After looking at these and searching quite a bit, I came across a tool called lory ( ). It is essentially a code package or widget for creating interactive slideshows or gallery. I thought that there might be some milleage in creating a slideshow or gallery and somehow customising it as a timeline. After testing I found that lory also was overly complex for my needs. Then I came across a really helpful article about a widget tool called on css-tricks.com ( ). It was love at first sight! Here is an example on codepen showing how the Flickity slideshow originally looked: - Flickity is both responsive and touch optimised and had a vanilla option in addition to jQuery. It seemed like a good solution. Before my modifications:

After my modifications:

Main modifications were: - the timeline-line- size of slides - outlines for references - big dots on the timeline (need to figure out how to label these) - overflow to ensure that the content doesn’t wrap strangely on a mobile device. There is still a lot to do and I need to fix an issue when the keyboard keys, when used for navigation make the web page scroll-right in a strange way. I also need to unite this with the other parts of the page that I have started to build. Finally, Flickity is a paid solution unless it is used under a . I am passionate about open source and was already licensing my work under an so I have decided to set the rest of my project to . This means that the license information needs to be included in the header of each source file. As the portfolio site will not contain any original research and will only provide an overview of the project this will also comply with the University’s Intellectual Property rulesAs a student and employee I need to be aware of the university’s Intellectual Property rules, which are available here: . However as portfolio site will not provide software with potential for commercial value and the project information itself is in the early stages it complies with the rules.. Also in the markup of the html, CSS and Javascript I have indicated where pieces of code have come from and if/when licenses apply. Update: Shortly after writing this post I solved the issues outlined above (see: “There is still a lot to do…”) and these discoveries are outlined in the next couple of posts. I realise that I forgot to mention how I solved the issue of the number labels on the dots below the Flickity carousel. This problem turned out to offer me a very valuable lesson in the . I have used the former, “before::” as this was introduced in CSS3 and is compatible with IE9 based on my testing. I figured out that the dots themselves could be used as a counter-increment for the addition of the number labels. .dot { position: relative; overflow: hidden; display: inline-block; width: 40px; height: 40px; margin: 0 20px; background: #a9a9a9; border-radius: 50%; cursor: pointer; counter-increment: flickity-page-dots; } .dot::before { display: block; text-align: center; content: counter(flickity-page-dots); padding-top: 11px; font-size: 20px; color: #FFF; } As the dots themselves are automatically produced by the Flickity Javascript, this meant that my number labels were now produced too. A nice solution.

References

Coyier, C. (2015, March 5). Creating responsive, touch-friendly carousels with Flickity

\[Blog post\]

. Retrieved from Flickity - freeScroll. Retrieved November 26, 2016, from Flickity License. Retrieved November 26, 2016, from Flickity. Retrieved November 26, 2016, from Free Software Foundation. (2007). GNU General Public License. Retrieved November 26, 2016, from Heinz, M. (2015). Lory minimalistic slider. Retrieved November 26, 2016, from Horizontal Timeline in CSS and jQuery. (2014, February 28). Retrieved November 26, 2016, from Mozilla Developer Network. (2016, July 24). :Before (:Before). Retrieved November 26, 2016, from Open Source Initiative. The MIT license. Retrieved November 26, 2016, from Saunders, S. Intellectual property (IP). Retrieved January 4, 2017, from Vanilla JS vs jQuery. (2017). Gist. Retrieved 26 November 2016, from Vertical Timeline. (2014, June 12). Retrieved November 16, 2016, from Way, J. (2012, January 19). From jQuery to JavaScript: A reference. Retrieved November 26, 2016, from

Business Model Canvas and more tweaks

Sun, 06 Nov 2016 00:00:00 +0000

A shorter journal entry for today. I am going to provide a brief outline of what I have been working on, as I need to crack on with planning materials and more development work this week.

I have completed an initial version of the Lean Business Model Canvas, as mentioned referencing UX documentation and design artefacts. I obtained the template recommendation in Cao & Bank’s (n.d.) book on UX documentation.
I have asked my friend Jason to take a look at my code for the arrow button navigation, so I will work on some more tweaks to that tomorrow.
Due to extremely limited time this week as a result of some unanticipated work commitments, I haven’t got as much development work in as I would like. So I have focused on a few fixes on this site as they were smaller thinks that I could achieve in the time that I had.
- I removed a superfluous hyperlink in the footer.php - it was a copy and paste mistake.
- I decided not to “provide a choice of fonts” as it felt like it might offer too many options.
- I decided to install the - I have worked with it before and found it to be one of the best plugins in this area. It offers user-facing tools and some javascript additions to fix common issues in WordPress. Even though I have an accessibility tagged theme, there are additional tweaks that can be completed such as removing title attributes in areas where they aren’t needed and enforcing alt tags. It also allows you to add an active link highlight, which I am initially trying out with a contrast tested purple colour (essentially it puts a box around any active element).
- I worked on a few customisations of the plugin:
  - I added it to a sidebar widget instead of the toolbar that is typically used with the plugin. This is mainly due to some issue with the display of the toolbar and also it made sense to present the accessibility options above the background colour options.
  - I customised the font-family and font-size of the text in the accessibility widget.
  - I enabled the high-contrast and font-size (large text) options as part of the WP Accessibility Plugin.
  - I customised aspects of the large text display so that it worked better with the theme, initially some text was too and some was too small. For example, H2 was a too small in comparison to the paragraph text and stylistically and readability-wise it wasn’t great.
I also changed the text-transform settings on the widgets header text as I noticed that these were all uppercase. This is not the best for Dyslexic readers according to Gov.uk’s recent accessibility posters ( ). I find this series of posters to be very helpful cheat-sheets for accessible design.
- Related findings:
  - Gov.uk Accessible Blog:
  - Gov.uk Government Digital Service:
  - Gov.uk Advisory:
Also in my travels I found the Web Accessibility Evaluation Tool (WAVE) - this was recommended both by the WP Accessibility Plugin authors in the documentation and on the Gov.uk page above on the “making your service accessible” page.
The report (although it will change as the site is being updated) WAVE highlighted some more bits that I need to work on and I do still need to look at the contrast of the text in comparison to the background in the different colour schemes. The “making your service accessible” page states that automatic tools like WAVE can only detect a proportion of issues (around 20%-30%: ). So I need to ensure that I don’t regard these tests as exhaustive moving forward.

I feel that I have learned quite a bit about accessibility through my work on this journal site, as well as honing my existing skills. So I will take these ideas and techniques forward with me as I continue to work on my portfolio project.

More to come on the to-do list:

concept document
Task scenarios
Business Model Canvas
General characteristics for user groups
\[Tentative plan\] create a UML2 diagram
A paper prototype – the prototype may actually need to be made in a prototyping tool so that Theo and I can discuss it via email. So probably a change of plan on this one.

References

Cao, J. & Bank, C. (n.d.). The guide to UX design & documentation process. Retrieved from

Portfolio site concept and other news

Sun, 23 Oct 2016 00:00:00 +0000

Over the past three weeks since the start of the module, I have been working away on the development of my portfolio site concept and gaining domain knowledge to support the development process. I have found myself in a situation where I have been torn between completing the UX procedures and design artefacts that I learned about and implemented during previous modules and starting to code. It is like standing at the edge of an exciting, and slightly daunting, precipice wondering whether to make the leap. The good news is, I am close. I must also at this point, state that I aim to make a real and useful website. It will be short and sweet but it will, hypothetically at least, fulfill a real-world purpose. I also hope that it will be possible to use the site to support future research work that I plan to undertake.

Process: A minimalist approach influenced by LEAN UX

I have found that I cannot bypass the UX design artefacts and documentation entirely as they have become part of the fundamental fabric of my thought processes! So I have decided to complete a very stripped down version, to ensure that I have a solid architectural foundation for what I am about to build. This approach will be composed of the following elements.

A concept document in a bare bones form aka this journal entry!
Task scenarios - is the first version.
Business Model Canvas¹ - an artefact template that I found via Cao & Bank’s, The Guide to UX Design Process & Documentation (n.d.). This will be in a forthcoming journal entry.
General characteristics for user groups - this will also be in a forthcoming journal entry. Due to time contraints and available information, it is not possible to build thorough characteristics lists for all potential users. I am however, fortunate to have a real stakeholder who can provide feedback on my work and it’s hypothetical usefulness. (more on this later on in this entry).
\[Tentative plan\] create a UML² diagram to ensure that each page and section of the site includes the correct information and functions. I personally find UML diagrams to be very helpful for archictectural planning. It can be a fairly basic model for this project, but I do find that the process of making the models uncovers things that you haven’t thought about! I may find that this isn’t needed, but I won’t know until I start making it.
A paper prototype - as I am working with a real stakeholder, I want to show him something quick and easy so that he can visualise the concept and ensure that my representation and approach to the domain is accurate. I think that a paper prototype is the best way to do that, in order to move to the coding phase as quickly as possible.

Concept

The wait is over! Here is the concept. The project’s working title is patient pre-op anxiety infographic. It is a website structured around a central page, which leads the viewer through a fictional narrative of a patient’s experience of anxiety while awaiting a medical operation or procedure. In the narrative the patient will be using an electronic wearable device to track their own vital signs and also for logging their anxiety levels - the influence of this countermeasure will be explored. The narrative is represented through a navigable timeline enriched with the use of graphical, written and statistical information. The underlying project, to use wearable devices to measure patient pre-operative anxiety is attributed to and courtesy of Dr. Theofanis Fotis (School of Health Sciences, University of Brighton), whom I am collaborating with at this time.

Scope

The patient pre-op anxiety infographic will:

deliver an approachable overview of aresearch project - the proposed research project is to design a user interface for a medical wearable device to measure anxiety;
explain the issues that can result from pre-operative stress in patients;
provide a point of entry for those with little or no knowledge of the subject as well as explain the potential benefits of the project to experienced medical professionals.

The patient pre-op anxiety infographic will not:

provide indepth medical information;
provide any fully formed solutions or recommendations for implementation of wearable devices in a medical setting;
provide advice or suggestions for the production of patient care plans. As a narrative scenario it is exploring a hypothetical scenario in which a wearable device is used.

Benefits

The patient pre-op anxiety infographic will provide the following benefits:

it will provide a valuable resource for explaining the research project to potential funders and future stakeholders;
it will help to raise awareness of the potential issues related to patient pre-operative anxiety;
it will highlight potential ways that increased knowledge of a patient’s vital signs and self-reported anxiety could improve patient care;
it will provide an accompanying contextual information for the proposed future interface design project;
it will be a publicity tool, that can be used to explain the project within the academic and medical online communities.

Goals

The following goals are related to the successful creation of the patient pre-op anxiety infographic:

provide a valuable portfolio piece, not only in terms of web development, but also as a tool for the research team and collaborators;
contribute to the approval and ethics approval of this as a concept for F.MacNeill’s final graduating project;
stimulate dialogue around the issues and ideas raised by the patient pre-op anxiety infographic;
encourage potential funders and stakeholders to invest in the project.

Objectives

Create an accurate portrayal of a possible patient care scenario.
Provide information highlighting the benefits of the proposed project.
Pose the project concept as an open question in order to gauge feedback and interest from the medical community and potential funders and/or stakeholders.
The user audiences for this are diverse but have one thing in common, they have very limited time to engage with a website of this kind. This website should take no longer than 10-15mins to navigate, the equivalent of a typical coffee/tea break.
To be shared via social media between interested parties.
To be adaptive and easily viewed and navigated on mobile devices.
To be accessible to those on older web browsers (as far as possible).
To be accessible to users with disabilities, allowing for personal customisation (as far as possible).

The Research Team

Right now this is just me, however Dr. Fotis has agreed to review the materials and my hope is that if the site meets his approval then we will be able to use it to promote the real project. In the first instance it is a hypothetical project site, but that doesn’t mean that you cannot aim high as I have outlined in the objectives above.

Audience

More detail on this in a future entry. The user groups are: funding review panel members, academic staff at multiple Higher Education Institutions (HEIs), medical professionals.

Stakeholders

Intially Dr. Fotis is the main stakeholder, however I would take this site forward as evidence to support my final project proposal. In that sense academic staff in the School of Computing are also future stakeholders.

Research of the domain and existing websites

I have been using my as a place to collect links and resources. On the one hand I have been looking at the specs for potential wearable devices, it is out of scope to suggest an actual solution but I would like to supply some possibilities in terms of device form so that the project is tangible. I have also been reviewing materials that Dr. Fotis provided to help gain domain knowledge of a patient’s pre-operative experience. I have listed these sources in my reference list below.

Sketch of patient journey ideas.

Existing websites

As a general observation medical websites tend to be firmly on the utilitarian end of the scale. This is understandable as information is usually important and needs to be delivered quickly. So it will be important to strike a balance between something eye-catching, which is also substantive. Here is are few examples that I came across and wrote notes about (transferred from my trello board).

Notes/Observations

This . Some of the examples are a bit old and don’t work as well in contemporary browsers. This is something to consider. Most of these sites are in a long-form vertical format. This is great and modern, but considering the audio for this site, this obscures some key aspects of the journey. Viewers will be time-pressured and need to see the journey/timeline elements as succinctly as possible. The following sites are closest to what I want to design:

. This example is not very responsive, so that would be something to consider.
. This blog is quite nice but the scrolling right function would need to be made much more obvious.

Vertical timeline examples:

I like the intro page segment on . It isn’t keyboard navigable though which is not great in terms of my accessibility goals.
and it aesthetically simple and user-friendly.
I quite like , it is text heavy, but it gets the message across quickly.
I like the use of months on the timeline on , although accessibility and control might be an issue here.

Many of these are quite old or have changed format since the post was written. I found myself considering a horizontal layout due to the need to display data and the need for it to be readable, however horizontal layouts pose some real accessibility and navigation issues.

. An oldie, but a goodie …and some justification for my concept!

This site uses the , which I have used many times, mostly in WordPress sites. This is , but I want something a bit more contemporary.

This site has the kind of section feel that I am looking for, although I still wonder how I can visualise anxiety in a vertical layout versus horizontal. [This site](( ) has nice comment mark-up and makes clear use of the
element.

Journal development

A quick run down of learning journal development activities. A full rundown can be found on my github development page, I have added a handy link to to this in the “social menu” on the right-hand footer of this journal site (circular icon with octo-cat logo).

Created an iframe embed in a widget for my trello board so that I can display it in the sidebar. In order to create this I referred to this example on and . Tomorrow I am attending a in Brighton and as part of the event they will offer user testing. I thought why not add some functionality that I have always wanted to include AND get some tips.

I have added the option for visitors to this site to change the colour of the background (behind the text) for accessibility reasons. I did this as by creating alternate child-theme style sheet and by installing the . This idea is inspired by software like of Adobe Acrobat Pro and GoodReader App (for iPad) which allow you to customise background colours. I referenced for colour-palette inspiration. Visual stress when reading and/or perception of colour contrast are reasons why a user might wish to alter background colours.

hexidecimal colours used for initial function:
- blue 1: #dfeced
- blue 2: #9ab8fc
- green 1: #a6f8e3
- green 2: #aaf2a0
- yellow 1: #ffff8f
- yellow 2: #ffde75
- purple: #bf95df

I’ll write about any resulting feedback and actions on this site later. I added Google Analytics code to my version of the header.php file, this was not added to GitHub as it is specific to my version of the child theme. I decided against a plugin as I looked at a couple of options, but I didn’t feel that having access to a Google Analytics data on the dashboard of WordPress was that important as compared to the account authorisation that plugins require to run (e.g. that I looked at). I like to keep an eye on web traffic for security and publicity reasons.

Coding practice

I have a Lynda.com course to wrap-up and I will post the details here when I finish. In the meantime, collectively I have now completed 200 exercises in Code Academy! I didn’t do them all since the start of this module, but here is a screenshot of my badge

Just putting this here for later reference - found on my travels

10 Commandments of User Interface Design

]( ) Courtesy of:

References

Cao, J. & Bank, C. (n.d.). The guide to UX design & documentation process. Retrieved from

Gothelf, J. (2013). Lean UX: Applying Lean Principles to Improve User Experience (1st ed.). United States: O’Reilly Media, Inc, USA.

Prichard, M. J. (2009). Identifying and assessing anxiety in pre-operative patients. _Nursing Standard 23(_51), 25-40. Retrieved from

What can help relieve anxiety before surgery? (2014, May 21). In PubMed Health. Retrieved October 15, 2016, from

Business Model Canvas ( ), licensed under Creative Commons Attribution-Share Alike 3.0 Unported licenses ( ). ↩︎
Unified Modeling Language - more information at wikipedia: . ↩︎