Design and Build your Website!

The first portfolio assignment in my Human-Machine System Design course is to design and create a website to host my blogs and portfolio projects. In this document, I will cover the following:

  • Design choices and explanation
  • Building the website
  • Automation functions

Design Choices and Explanation

Persona

My website contains research projects that are related to robotics. For example, I have a description of my Unity application project, “RAIN”, that enables users of all levels of expertise to adjust robot-parameters that changes the robot’s perception of the physical world. For this portfolio piece, my visitors would possibly be fellow researchers in the field of computer science and computer vision and potentially job recruiters who may be reviewing my portfolio to see my projects. These projects should demonstrate my approach to problem-solving, organizational skills, and evaluation of systems. Although some of my projects may be ongoing, it is still important to describe my plan and current issues and how I will address those points. I included a table with a description of two potential personas who are likely to visit my website.

Brand

My website provides information regarding my academic work, so my brand will be a graduate student of mechanical engineering and computer science who has a very diverse background and skillset. My projects and research experience presented as a portfolio will be evidence of my skillsets and show how I am quick and willing to learn new skills. I am hoping that my website will convince visitors who may be job recruiters, colleagues, researchers that I am qualified for specific job positions, proposal grants, and those who may seek collaborative work.

Building the Website

I previously had a Tufts page containing my projects, publications, and CV; therefore, I decided to amend my site to include a Blog section and Portfolio posts. I debated back and forth whether I should host my website on WIX. I also have a personal account for my hobbies and non-school related work, but I didn’t want to start from scratch. In my opinion, WIX is a lot easier to navigate and control. Plus there is also the number of functions that can be implemented for visual aesthetics which I appreciate. For now, I will post the blog and portfolio pieces on my tufts site for content, then eventually I will transition to a more design-controlled website like WIX. I also want to have my own domain name in the future.

Information Architecture

I decided to continue with my existing architecture “Strict Hierarchy” to organize all the content on my page. I had selected this style of architecture for its simplicity and personal preference. The content I have on my website can be associated with a category. The Portfolio and Blog sections that I have added would be both have their own category each with subpages for different topics or ideas. More information about the website architecture can be found here [1]. Below is a visual aid of my website following the Strict Hierarchy structure. The Blog and Portfolio sections are added to the menu bar each containing pages that correspond to separate blogs and portfolio projects.

Automating Website

One of the requirements for designing my website was to add an automated function of my choosing. I decided that I should apply a function that broadens my audience as a means to demonstrate my projects to the general public who share the same interest in my field. Therefore, I wanted to automate my blog posts on WordPress and distribute them to my other social platforms. I chose Reddit as my outreach platform as I’ve come to learn about specialized communities on that site. There are subreddits that are home to several roboticists of all levels of expertise that I can share my projects and interests.

With this in mind, I utilized the recommended IFTTT website to carry out the automation process. IFTTT is a site that allows users to connect their apps and devices in a number of ways using what they call “Applets” seen in the image below:

Screenshot of Applets within IFTTT

Once you make an account on IFTTT, you can search for any particular Applet that meets your needs. After selecting the “WordPress to Reddit” Applet, IFTTT requests that you login to both accounts to fully apply the Applet. This is where I began to have problems…
I couldn’t log in to my WordPress Blog URL after typing in my Tufts credentials. I verified my Username and password and URL but I still could not sign in. As a test, I created a dummy WordPress account to see if there was anything wrong on the IFTTT end; however, I was able to successfully connect the Applet, letting me believe that it must be the Tufts security that is preventing me from applying the Applet.
After contacting IT with my issue, they responded with,

“We use Shibboleth (single sign-on) for WordPress authentication, so integrations like this aren’t going to work (Duo would break the process even if IFTTT could handle the redirects that happen with the Shibboleth login process). It’s also a very bad practice for an external application to ask for your account password. Unfortunately, their suggested workaround of using an “application password” isn’t something we currently support.”

With that now known, I began to look for alternatives to add an automated function on my Website. I began to look for tools within Tufts WordPress and found the RSS function. Here, I can subscribe to a feed by providing a URL. Using this method, I can apply an RSS function and subscribe to my posts on Reddit to the robotic communities. The image below shows the steps to apply the RSS function on WordPress

  1. Within WordPress, Add a Block and select the RSS function
  2. Obtain the URL address you want to subscribe to. Note that for Reddit users you add “.rss” at the end.
  3. Ensure that there exists a post from the URL you wish to subscribe to.
  4. Add the RSS widget to your website.

With the success of one automation process, I can apply this feature to further enhance my website. Although this may be more of an automation process on the side of Reddit, my post on Reddit will now be linked to my blog on WordPress.

References

  1. https://www.altexsoft.com/blog/uxdesign/how-to-create-information-architecture-for-web-design/
  2. https://ifttt.com/
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.