This quarter I will be redesigning the West Seattle Tool Library website. Here is the homepage:

It has many familiar problems. Mostly, the lack of hierarchy hinders the user. It is difficult to parse through all of that information. My aim is to make this website a treat to go to, and to give the user the information s/he needs quickly. This will theoretically decrease the number of phone calls and emails made for basic questions of which my boyfriend is the only one that responds to.

I will also tweak their branding. I know that they want to keep the same basic idea, but I will streamline everything so they have consistent branding between different all venues.

The challenge in this project is integrating the open source “myTurn” software which shows an inventory of all of their tools.

Ideally somebody could see in real time whether the tool they want right now is checked out or not. However, there are 101 pages of what you see above, making this feature essentially unusable. There are categories on the side that could help, but these could be better displayed. If possible, I could combine duplicates and it could say “5 of 12 checked out.” I will have to see if this could be achieved. I will start by contacting the people who designed this originally, and reaching out to the creator of “myTurn.” This is an integral part of the website so it would be great if it was cohesive with the rest of my branding.

Other parts I have to take into consideration is just the fact that many people have had their hands in this website, so it may be difficult to parse through everything. There is also the fact that I will have to build this website somewhere and then migrate it to their existing URL which may have hiccups.

In any case, here is the loose timeline I have planned:

Click it for the live google spreadsheet.

This week I did not make any big sweeping changes, just a few smaller but still important ones.

I went back to making the first thing on the homepage an overview of the blog instead of the blog post.I also considered making the “new blog post” a dropdown but that might take quite a bit of time with my Axure skills.

However the problem is it is difficult to predict people’s workflows. For instance, many more experienced users won’t use the homepage at all to create a blog post draft, they will go into the “Posts” menu because they feel it is more trustworthy. It is still nice to keep the option to have that quick draft though so that’s why I put it after everything.

I also went back in this blog to revisit some of the more abstract changes I wanted to make to WordPress:

• Autosave for drafts (Like Google Drive)
• Confirming leaving the page if there are unsaved changes
• 1 column/2 column layouts
• “Distraction Free Writing” (Was I the only one who didn’t know about this?)
• This dude who redesigned google news.
• How to apply the simplicity of the WordPress mobile app in my desktop redesign.

Another thing I was thinking of integrating was a true WYSIWYG editor, so getting on the Live site and making text edits there. This and the list above is what I have to figure out to convey. The other part of this is that I wanted to make a short video with screenshots and some of the user testing videos I made. This is something I will start putting together this week and trying out in iMovie. I will also start putting together a script that will be read over the video.

After a slightly uninspiring week, I did another first-click user test. The person I tested showed me the new WordPress style (below). It is definitely more clean and modern but not necessarily easier to navigate. In some ways, it may even be more difficult. But I decided to take to clean parts of this new WordPress design and combine it with the original restructure I had made.

I also changed the home page and made it more focused on creating a new blog post. I was also considering combining the “Menu” and “Pages” items since those will always be in one way or another linked. Here is my newest version:

Next week, I want to work even more on the homepage and prioritize the most important sections.

So far I have rough drafts of three pages prototyped with Axure. Here is the link to the live prototype.

The Home Page:

Add a new blog post:

Add a new page:

These pages are all linked up on the homepage main menu. I will add more styling to these pages later, after a few more iterations of user testing and redesigns. I will make a copy of these pages so that I can show my process at the end.

I have been slightly concerned with what the deliverables will look like. At first, I thought the prototype would be the deliverable. However, at a glance, my redesign will not look dramatically different since I am not doing styling. Therefore, I have been toying with the idea of make a short video going through my process and iterations. This will be simple enough to do in iMovie hopefully. This way, I can more quickly communicate what changes I made. This will also make it easier to call out certain features that would be harder to convey with prototyping. “Automatic Saving” like in google docs, for one, and editing posts in the live view of the site.

This week, I am slightly behind schedule only because I have decided to prototype my WordPress Redesign with Axure. So I watched all of the tutorials on their website and a few on Lynda.com.

I was able to add a lot more interactivity on the homepage. I have started on the second page as well, I just have to add more options. However, now I know how to use Axure more efficiently, this should make the designing the rest of the pages a lot easier. I also interviewed a novice WordPress user and received some helpful feedback from her that I can use on my draft.

Here is the prototype I have so far:

This week I finalized the sitemap and the homepage of the Dashboard (which I am now calling the Control Panel). I use the word “finalize” loosely since I am working in an agile method. Once I get three or four pages prototyped, I can do another round of testing and edit accordingly.

In trying to think of ways to illustrate the changes I made to the sitemap, I created this slightly Frankenstein chart:

It’s more a way to visualize where I deleted or reallocated features of WordPress.

I then went ahead and redesigned the 1st page in InDesign with Interactive Features.

However, I realized that though this makes it easy to style, it will take too much time to make this whole project in Interactive PDFs. I then started using some prototyping tools. The one I settled on was Axure because it is very easy to get interactive elements online quickly. I have made the 1st page with the basic structure. It lives here. Here is a screenshot:

Using Axure did put me a little behind schedule, but I kept it pretty padded so that I could account for changes. In the long run though, this will be a lot easier and help keep me on track. Also, learning a prototyping tool with be helpful no matter what.

I also met with the E Fad today. Here are some things he brought up that I wanted to keep in mind:

• Autosave for drafts (Like Google Drive)
• Confirming leaving the page if there are unsaved changes
• 1 column/2 column layouts
• “Disraction Free Writing” (Was I the only one who didn’t know about this?)
• This dude who redesigned google news.
• How to apply the simplicity of the WordPress mobile app in my desktop redesign.

For my WordPress redesign, I have updated the sitemap a second time. The first (in the previous post) was based on the input I received from my Concept Codify results. I took that into consideration when I designed it again. This time however, I tried to understand the functions of all of the menu items. I even did a mini card sort of the “Reading” and “Writing” items in “Settings” since those titles do not clearly convey what their functions are. I could then hypothetically move its functions to other menu items. This also allowed me to delete unnecessary items and restructure the Dashboard.

Another change I made was changing the name “Dashboard” to “Control Panel.” Dashboard does not convey the fact that this is the main hub of where you edit your website.

Here are other menu items that I was able to delete:

• Links
• Tools
• Store
• Feedback
• Screen Options
• Omnisearch
• Appearance > Customize
• OpenID

Here are some other changes I made:

• Discussion to Notifications
• Sharing to Social Media
• Writing/Reading (combining into blog settings)
• Akismet Stats (combine with regular stats)
• Store combining with My Upgrades to “Upgrades”
• Added “Follower Settings” from Reading

Here are my updated sitemap: 

Here is the updated Control Panel. I still have to design the default home screen, then I can get into styling.

Click the sitemap to see it in 100%

The top half of the image above is the original, existing WordPress.com sitemap. I put all of these on Concept Codify for participants to card sort. Some of them were very familiar with WP, others have never touched it. I got around 10 responses which helped me formulate the sitemap in the bottom half. It is color-coded in these garish colors to track the changes of what moved to which category. This is not my final sitemap, but I will take it into consideration when redesigning the final.

Research was at first a bit more difficult to come by than I expected, but I did manage to find some helpful facts.

• As of August 2013, 23% of all websites are powered by WordPress. (Source: W3Techs.com)
• 61% of websites that use a CMS (Content Management System) use WordPress. (Source: Ibid.)
• Only 1% of WordPress users pay money to WordPress. This is generated mostly from WordPress.com sites that can host and buy domains through WordPress directly. This reinforces the importance of designing specifically the WordPress.com Dashboard. (Source: Forbes.com)
• In its own survey of 30,000 people, WordPress found that:
  • 69% use WordPress as a CMS (Content Management System)
  • 20% use WordPress of a hybrid CMS/blog
  • 6% use it as just a blog
  • 7% use it as an app platform  (Source: thenextweb.com)
• Matt Mullenweg, the founder of WordPress, has said that the future of WordPress is in the social, mobile, and as an application platform. (Source: Ibid.)

The fact that most users, almost 70%, are using WordPress as a CMS and not as a blog shows the importance of a complete redesign, not minor tweaks. Because WordPress was born as a blogging platform, it still has an innate focus and priority toward blogging. However, this is not the major goal for most people. For example, the difference between “Pages” and “Posts” gets easily confused and it is not clear which one pertains only to the blog. Also, it is not clear where the blog lives.

I gained this insight through some first-click testing. I have set up a default WordPress.com blog without adding or removing any pages or information. I then gave my users three tasks which I deemed were important through my research.

1. Create a new Blog Post
2. Create a new Page
3. Make this Page part of the Main Menu (and make this Menu visible)
4. (I also wanted to see how easy it was for users to switch from the dashboard to the live site.)

I have done two of these interviews and plan to do another one before tomorrow. Mac’s built-in Quicktime Player also has a handy “record screen” feature while using the mic so I was able to record exactly the steps my users took while talking through it.

My first user was a 65-year old female who is a beginner on WordPress.com and mostly uses the computer for writing on the word processor and normal internet use.

My second user was a 35-year old male who is also a beginner on WordPress but comfortable with more technically-advanced software and internet browsing preferences.

I gained helpful insight through this first batch of testing. My thinking is to tailor WordPress.com editing to a more novice user because the point of a CMS like WordPress is for it to be passed onto an individual or company. They are able to edit their website without having to know the nitty-gritty insides of it. Even the more advanced WP user can appreciate a more intuitive interface.

A screenshot of one of the first-click user testing

I thought if anybody would enjoy laser beams coming out of nipples, it would be Tom. Other then Tom not being here, I am excited about the upcoming year.

In Special Topics, I have decided to redesign the wordpress.com dashboard because it is bloated and not intuitive. It will be a lot of user testing which is an important part of user interaction design.

Here is a Timeline of my project:

I realized it was really difficult to plan out 11 weeks of a project, and obviously things will change as the weeks progress. However, I know that this is really important to learn how to do, especially since I would to to do a bit of freelance after I graduate. I thought I had gotten good at knowing how long it takes me to do something but sometimes I am completely off. The above is a link to my timeline and I will be consistently updating it.