The first portfolio assignment for the Human Machine System Design course is to design and create our website. This document will explain:
- The reasoning behind certain design choices
- How the website was built
- How part of the website was automated
To create my website, I decided to use sites.tufts.edu to host my website. Since I am creating my website for a course I am taking at Tufts University, it seems logical to use a Tufts platform to create my website.
Designing the Website
Personae
Initially, I had considered my two user personas to be a type of person, rather than specific people (an occupational therapist and an engineering student). I then answered the prompting questions provided on the Project 1 assignment sheet. These answers can be seen in the table below:
However, after reading “The Complete, Actionable Guide to Marketing Personas” by Buffer, I decided to follow their device and view my two personas as specific, fictional people rather than as general occupations.
I mimicked the format of a template shown in the article (and provided by HubSpot) in order to organize my profiles. These profiles can be seen below.
Eva Smith’s (the Occupational Therapist) profile was largely based on my experiences working with occupational therapy professionals and students on assistive technology solutions. Though this profile is largely self-explanatory, I do want to explain why I chose some of the demographic information.
Age: 45 years old
I chose for Eva Smith to be 45 years old because I wanted her to have enough experience in her field to have acquired significant first-hand knowledge about the ineffectiveness of some assistive technology solutions. However, I wanted her to be young enough to feel that it is worth it to learn new skills and techniques and have the time to successfully apply them in her career.
Female
Eva Smith is female because roughly 90% of occupational therapists are female, so I thought it would be a better representation of her field [1].
Salary: $83,200/year
This salary was selected, because the median annual pay for occupational therapists in 2017 was $83,200/year, so it seemed a good estimate for the profile [2].
Education: Master’s degree, NBCOT certified
Since 2007, occupational therapists in every state except Colorado are required to have a master’s degree. Most states also require occupation therapists pass the National Board for Certification of Occupational Therapy (NBCOT) examination [3].
The profile for Brad Jenkins was drawn completely from my own experiences as an engineering student interested in working in assistive technology. The qualities and goals of Brad Jenkins are a combination of my own attributes and those of my peers I met that also were thinking about working on assistive technology devices.
InfoArcht
For my information architecture, I decided to use a “Strict hierarchy pattern”, as described on the engineering company altexsoft’s website [4].
Note: P1=Project 1, P2=Project 2, etc. and FP=Final Project
I want my home page to have an explanation of me and the website’s purpose. That way people do not have to go searching to find out what the website is about. I find, in my experience, that I usually use websites that make it clear from the home page what their brand and/or product is. Originally, this was the only content that I was going to have on the page, but ultimately I decided to switch to the blogs being on the home page. Since the first post is an introduction, that will replace the explanation about me and the website’s purpose that I was originally going to put on this page. Since the side menu on the screen lists some blog posts, I will always make sure that there is a link to this introductory blog post visible on my home page (without the need to scroll down to it).
The Portfolio will have its own menu and page. The only thing on the actual Portfolio page will be an explanation of the portfolio and each project name with maybe one sentence explaining what it is, and a link to that page. This is because I want people to be able to easily identify projects they are interested in.
Each project gets its own page for two main reasons:
- Easier for user to find projects of interest and keeps things more organized
- My presentation style will probably change over the semester. I want each page to be able to have its own format without detracting from other projects.
Originally, I wanted my blogs to be on their own page because they will take up a lot of space and I feared my home page would be too “busy”. During the implementation part of this process, I found that it was difficult to have the blog posts appear on a different page than the home page.
The most recent blog will always be at the top of the page to make it easy for my classmates to find the blog they are supposed to comment on.
The revised hierarchy is shown below:
Brand
I want my brand to be of a competent mechanical engineering graduate.
- I don’t want to focus too much on the fact that I am still a student (though a graduate one) because I want to be seen as someone with knowledge, rather than as someone trying to acquire it. As a result, I will emphasize my research experiences and accomplishments, especially in the field of assistive technology.
I want to be seen as someone with experience both working with assistive technology and having friends with disabilities unrelated to my assistive technology work.
- I want to show that I have both personal and professional experience in the area, because I think that it validates the opinions that have been shaped by my life, rather than books or papers. By building this reputation, it will give my words more weight and show that my knowledge is acquired from multiple facets.
Lastly, I want my brand to be more relaxed and easy-to-consume than some overly-technical articles. I hope to use lots of images and sometimes utilize humor in my blog posts. A student like Brad (from my persona profiles) already does a lot of technical (and arguably boring) reading. By making the blogs fun and “light”, he is more likely to enjoy reading them, and as a result, is probably more likely to continue reading them. For Eva, as an occupational therapist she uses a lot of interpersonal skills. Since I am in engineering, she might assume I lack these skills. By demonstrating that I am personable, I help build her confidence in me as an authority on the subject of assistive technology.
I am hoping this brand helps establish me as a knowledgeable person about assistive technology. In the future, this could lead to helping me promote projects/practices I think are useful, or maybe lead to a collaboration with an occupational therapist!
UX
As mentioned in the UX Planet article, “visual components like colors, fonts, layouts and even images, all come together in bringing an overall feeling of your website.”
I didn’t want my website to be too “busy”. Since I do not have a lot of experience in graphic design, I thought my website could quickly look overwhelming if I utilized too many colors within my website theme. This would detract from my overall message and brand.
As a result, I decided to pick 4 colors as my main focus for my website:
- Blue (because it is linked to intelligence and creativity [5])
- Grey (because it is nice to break up a page or images with different colors, and grey isn’t likely to clash with anything)
- White (as a traditional background color)
- Black (a text color that is easy to read on white)
I decided to use an image of the lower part of the wheelchair as my main-page image because I wanted to emphasize my interest in assistive technology. The lower-part of the chair was selected because I did not want to highlight a specific company or person and make it seem like I was promoting them.
I hope to include pictures in my blog posts of “cool” assistive technology solutions. This is for multiple reasons:
- Showing real-world solutions and assistive technology, rather than just talking about hypotheticals
- Images are engaging and can be useful for visual learners
- I can promote devices that work well
- Shows that I have done some research about different devices (this demonstrates the knowledge that I talked about in the brand section.
I used a drop-down menu to display my projects within my portfolio, because I thought that was a cleaner look than having each individual project listed across the top (it also makes it clear they are all part of my portfolio).
I also listed my projects on the portfolio page (and have a portfolio page), because some people do not navigate a website as intuitively as people with a lot of computer experience. As a result, I wanted to make it so all paths lead to my portfolio regardless of the interpretation of my website design.
I included descriptions of the portfolio pages, because I think people are more likely to read something if they know what they are getting into (like an introduction on a book jacket).
To see the website, you can go to https://sites.tufts.edu/abalaskaenp162.
Automation
For this part of the project, I was asked to automate one aspect of my website. As a result, I had to think about both what I wanted to automate and what was practical to automate.
Originally, I thought about aspects of my website that I could automate without worrying about the practicality of the automation implementation. I thought that the best thing to do would be to automate something that would be useful to me, personally, because I don’t necessarily know what someone would like my site to automatically do for them. Further automation may be useful later on, if I could conduct some “customer discovery” and learn what my readers find tedious about navigating my website (which I could then potentially automate!).
As a result, for this beginner stage of my website, I thought it would be useful to automate it so that whenever someone commented on my blog post I would automatically receive an email. This is because I check my email more than I probably will check my blog, and so I would know when someone comments on my posts much quicker. This will be useful for the peer review portion of the blog activity.
With this idea in mind, I began to explore the IFTTT website.
Because I have no experience with website design or automation using IFTTT, I decided to explore the pre-existing applets available on the website. These pre-made applets require knowing what media you are using. As can be seen in the picture above, there are applets specific to Twitter, Facebook pages, and more.
I found out that the Tufts publishing platform for sites.tufts.edu is WordPress. I assumed that less people use WordPress than email or social media, so I searched for that in the IFTTT database to filter my options as efficiently as possible. Using this search parameter, I was able to examine 35 possible IFTTT applets. Many were quickly disqualified, because I did not have accounts with the platforms (for example, I do not have a Reddit account).
Unfortunately, upon exploring the IFTTT website, I learned that there was not a pre-existing applet connecting a WordPress website to an email account. As a result, I decided to try a different platform to notify me when my blog posts are commented on, instead. I chose to connect my blog posts to my Twitter account, so any time a new post was made, my Twitter created a post saying that I had a new blog post up on my website. I decided to use Twitter because I already use it for academic purposes. Twitter is easier to check on my phone than the website, so this will still be useful. I struggled to identify when my website content was in published or draft mode, so it will actually make it significantly easier to have this confirmation that my blog post was successfully published.
I encountered some difficulty when setting up an IFTTT applet. I believe the error was due to my website not yet being published publicly. When troubleshooting the installation of an IFTTT applet, I recommend using the “Activity” section of your account. The drop-down menu to reach the Activity webpage and the Activity webpage itself are shown below.
However, once I changed my settings to public and confirmed that my website was published, I was able to get the applet to work.
I created a post called “Testing for Automation” on my blog (once I finished the test, I deleted the post).
When this was posted, my Twitter account then posted this message a few hours later.
So, my automation process was now successful. I do not know why there was such a delay between when the blog was posted and the Tweet was created. This is something I will explore as I continue to use my website.
I also used a pre-existing setting on the tufts.sites.edu platform in order to add another level of automation to my website. If someone leaves a comment on one of my blog posts, there is now a checkbox located beneath their comment box. If they so choose, they can select to automatically receive an email if someone replies to their comment on my blog.
This is a case of limited autonomy. The user still has to choose to enact the autonomous process, but once it is selected it saves the user both time and effort.
I selected this feature, because I thought it would be useful to users, if one of them asks me a question. Even though I will try and check my website regularly, the students in this class have no obligation to visit my website after they’ve left their required comments. As a result, if they are interested in hearing a reply to any comments they left, it is now easier for me to communicate with them.
Ultimately, I think that autonomy can greatly improve the functionality of a website. In the future, I would love to use IFTTT to implement the email notification system I described earlier.
References
[1] https://www.npr.org/templates/story/story.php?storyId=122970930
[2] https://otpotential.com/blog/occupational-therapy-salary-guide
[3] https://www.masters-in-special-education.com/faq/occupational-therapist/
[4] https://www.altexsoft.com/blog/uxdesign/how-to-create-information-architecture-for-web-design/