Steve Taylor’s Blog

Information Architecture for the New Orchard Website

2016-06-23T00:00:00+01:00

Information Architecture (IA) is all about organising, structuring and the labelling of content. The role of IA is to help the user find information and complete their goals. I’ve found that IA is by far the most debated areas during the planning phase and therefore I strongly suggest collaboratively working with at least two other people to ensure everything has been covered off.

Card Sorting

For larger sites, or for sites that are in industries that you may not be familiar with, it may be worth running a workshop with the client to logically group the content. During this workshop, it’s advised to concentrate purely on categorising the content and not worry about the navigation which can be added later. But as we’re working with a relatively small and familiar site we’ll skip this stage and roll it into the sitemap process and do both tasks at the same time.

Sitemap

A sitemap shows the structure of the site and how each page will be linked together. The sitemap’s job isn’t to show every page the site contains; this could be unwieldy (imagine trying to map out a site like amazon.com!), but should cover the primary, secondary and tertiary levels.

The sitemap needs to show the pages that support the user goals along with the structure of these key pages and labels for the navigation. The labels should reflect the users’ needs and use language that our users find familiar.

Like with other areas of the planning phase, I use old skool pencil & paper the most part, with Paper from fiftythree & Microsoft Visio when required. I find myself changing the structure and terminology at least 3 or 4 times before I run it past someone to gain feedback. Once everyone feeds back, it can then be finalised and form part of the specification document.

First Attempt

Analysis

The primary navigation has been reduced to five items. There is a theory that 7+/-2 is the ideal number of items on a primary navigation. There are people that think this is a UX myth but I’ve always worked to this as a general guideline as I think it’s common sense that too many items will be difficult to scan and design for.

The site’s primary CTA has been placed into the header which allows it to appear in the same place on every page. This means that no matter which page the user arrives to the site on, they can quickly try Orchard. This also mitigates the need to aimlessly putting in-page CTA’s that could detract from the content and the current journey that user is on. For example, we don’t want to target users with a ‘Try Orchard’ CTA when the are looking into an advanced topic in the docs as they are highly likely already a user of Orchard.

The first section of the site is labelled Support: I’m not entirely sure this is labelled correctly as the word “support” could mean commercial support. This section encompasses all information around working with Orchard. An alternative would be elevate the “Getting Started” section and have this as the label and when clicked through it would take the user to the page of getting started. This has the benefit of prioritising the information that most of the audience would be initially interested in, but it has the down side that it hides the other items in that section as the label isn’t encompassing of the other pages. A better alternative would be to call the section “Resources” which I think would solve the issues. I’m going to think on this a little and open it up to feedback.

Getting Started is a key piece of information that will directly aid adoption (a key objective). This page is likely to be signposted to from many other pages.

Learn is again probably not the correct labelling. I think it’s too generic and therefore will not appeal. This page is to act like the feed on the homepage of the current site but with advanced search and filtering. Maybe something akin to the built with angular website. This would just bring back the summaries and then link off to the author’s website. This page could also contain links out to other resources such as books and courses or if there is enough of these they may warrant a page of their own.

Documentation is a page that just explains how the documentation works and links out to the documentation website. Signposting to the “Get Involved » Documentation” section for users that wish to contribute would also be helpful.

Forum/Chat is a page similar to the documentation page. It explains how they work and links out to the codeplex forum and gitter chat.

Themes & Modules the labelling here has been changed from Gallery as I felt this could be misleading and mean a photo gallery. I think being explicit works well here. I did think about renaming modules with plugins as users may be more familiar with that terminology but a part of me wanted to keep the Orchard identity. Maybe this could be A/B tested and tweaked accordingly (validated learning). The page itself is a simple page explaining what themes and modules are and linking off to the gallery site.

Get Involved is a section that covers all areas where members of the community can help out. This page would talk about the weekly meetings and the community as a whole and links to sub pages for each area that people can contribute. I considered calling this section “contribute” but I felt that Get Involved seemed a little more encouraging. Again, this may be an area to split test.

Code, Localisation, Documentation and Themes are all content pages explaining how to get involved in each of the respected areas. Depending on the amount of content, these could be sections of a single page but for now they are a separate pages as I think there could be quite a bit looking at what we currently have on the existing site.

Showcase maybe too generic again in terms of it’s labelling. Maybe “Who’s using Orchard?” or “Customers”. I think “customers” make Orchard sound like a paid for product. Depending on tone of voice it could also be “Orchard in the Wild” or similar - feedback would be very much welcome here. The way is see this page working is that we would list some of the key companies that use Orchard along with relevant case studies (if that content is available) and then link off to the ShowOrchard website to show the rest.

The About section gives us a place to talk about the Orchard story, the steering committee and core members. This content provides additional reassurance that the project has a long history and supported by an established team a large community.

2nd Attempt

After a bit more thought I decided to bring Getting Started up to the top as I think this is a key area for our audience who are looking to adopt Orchard. I’ve also renamed Support to Resources which I’m still not 100% on but feel it covers the contents better and is not misleading. I’ve also demoted the About to the footer due to it not being as strong as the other areas for our target audience.

View the PDF version of Sitemap v2

Wireframes

Wireframing is a common practice when planning websites and can be really useful in many situations. The problem with wireframes is that they mean different things to different people. Some think they are essentially lo-fi designs whilst others think they shouldn’t infer design but instead dictate the content and features of the page and their priority. Either way, I believe that you can do this work with prioritised lists and directly in Photoshop or the browser. On the sitemap above, you’ll notice I have listed content hints bellow each page which will aid me in the design phase.

Summary & Next Steps

There is a lot more we could do but I’m confident I have enough now to progress to the design stage….Yippee!!!

Objectives & Audience
Orchard CMS Website Audit
Comparing CMS Vendor Websites
Humanising our Audience with Personas
Project Requirements for the New Orchard Website
User Journeys for the New Orchard Website
Information Architecture for the New Orchard Website (this post)

User Journeys for the New Orchard Website

2016-05-27T00:00:00+01:00

User journeys are actions our users (see our personas) take to achieve their goals. The primary user goals have already been mapped to the project requirements so we can take those and map out the journeys. I find it good practice to look at the existing user journeys on the current site and then look at how these can be improved. It’s not feasible to map out every possible user journey as there could be thousands of scenarios, so it’s best to focus on the priority requirements for each of our target users.

Tools and Approach

As with most other planning documents, its not the actual deliverable but the thinking that goes into creating the document(s) that is valuable. Documents are great when sharing with other stakeholders but often need explaining and walking through and therefore I tend not to spend too much time on the presentation of the documents (who has time for that?). I tend to use good old fashioned pencil and paper when working solo but if I need to share with other people, then I tend to use Paper by fiftythree (You can follow me here) on an iPad Pro with an Apple Pencil or Microsoft Visio for more professional style.

With user journeys, there are many different pieces of documentation that can be produced but I tend to stick to just two for most of the time. These are:

User Journeys
Task Models

User Journeys tend to take a more holistic view of the user journey and can take into account other channels and offline journeys e.g. visiting a retail store for an ecommerce site. For our needs though, we only need to concentrate on the journey through the website or possibly from a search engine.

Task Models are finer grained with a view on a specific task in mind. For example, a checkout process. I tend to use task models for feature based experiences or if I just want to map out a micro journey.

NB: I use the term “User Journey” in a generic sense throughout this post and covers user journeys and task models.

User Journeys

Here are the primary user journeys we are going to cover in this post:

Try Orchard (All Users)
Download Orchard (Creators)
View Resources (Creators & End Users)
Product Reassurance (Researchers)

1. Try Orchard (All Users)

Based on all the research done to date it’s becoming obvious that the the website’s primary need is to appeal to users that are “new” to Orchard. Therefore, the ability to quickly try and evaluate Orchard is a must. Even though this is likely to fall into the End Users category of our audience, it could well cover all our target users, which puts this journey really high on the list of things that the new website should prioritise for. In the following journey, we take the place of a creator, in this case an ASP.NET developer that is looking for CMS’s with the aim to adopt one for their latest project. Due to the amount of CMS’s on the market they are looking to quickly evaluate 2 or 3 CMS’s and compare.

Current User Journey on orchardproject.net

Download the PDF

As you can see from the current user journey, the user is having to go through numerous steps just to try Orchard out. This is mainly around the lack of signposting to TryOrchard and DotNest services and therefore a reliance on downloading code.

Depending on the user’s ability and connection etc. it could take 5-15 minutes to get Orchard into a state to evaluate. This is obviously not an ideal user experience and we must fix this on the new website. The steps needed, require a level of technical know-how and would rule out a large proportion of our target audience.

Another big reason to promote a ‘try’ option is that if a user is visiting the site on a mobile/tablet/xbox/etc. then they can’t download and compile the code, so a ‘try’ option would cater for them too.

Proposed User Journey

As mentioned previously, the website needs to cater for ‘new’ Orchard users and as such, needs to promote try over download. This doesn’t mean we hide the download away as we still have a large proportion of users that will want to spend the time to evaluate in-depth - we just make the download a secondary CTA.

If we had a simple and easy form (email, password), this could post to DotNest in a new browser tab and provision a free trail account. What could also be nice is that the default content of the newly provisioned site contains useful infomation such as a getting started guide, case studies etc.

It’s important that the journey doesn’t end when the user is directed to DotNest and so this boilerplate content can help, facilitate or convince the user that Orchard is right for them. A follow up email can be automatically sent after a period of time to provide guidance or support - most probably via a CRM such as Microsoft Dynamics. This is how the new user journey could look:

2. Download Orchard (Creators)

Trying out Orchard frontend/backend is not going to cut it for everyone that wants to evaluate Orchard. There are some users that still want to get down and dirty with the code, either after they have tried it or straight away.

Current User Journey on orchardproject.net

The current download journey isn’t too bad. There are clear links on the homepage and there is a dedicated section on the primary navigation. The problem comes when entering the site from a page that isn’t the homepage or educating the user on which download is best.

Proposed User Journey

There is no need to map a new journey for this scenario. All we need to do is to make the download available throughout the website (most probably the header) and on a dedicated page explaining to the user which is the best option for them. It may be even worth combining Download and Try options on the same page for when users land directly on that download page - as this page could be linked to quite often.

3. View Resources (Creators & End Users)

The resources are from the community and hosted on their websites/blogs. Currently, the Orchard website lists them in a feed along with some teaser information. I think this is a good idea as it encourages the community to contribute and get recognised for their effort. The downsides are that this list is not searchable or filterable. The tags don’t link to a filter list and there is no categorisation. This means that the user needs to paginate through the feed to find all the posts that are relevant. For example, the following journey shows a user looking for all articles related to module development.

Current User Journey on orchardproject.net

Proposed User Journey

Keeping the feed is still a good, but giving it it’s own section of the site and providing search and filter tools will help users find what they are looking for. In addition, each article teaser can have related articles which aids discovery. It may well be beneficial to index parts of the documentation too - such as the guides.

4. Product Reassurance (Researchers)

Initially for most users they want to know and understand what Orchard is and what it can offer along with reassurances that not only it can deliver on the user’s requirements, but it’s a product that people use and isn’t going to die overnight.

Current User Journey on orchardproject.net

Currently there is no on-site presence of example sites, except for website links that are shown in the notes of the podcast articles.

ShowOrchard is a community site that showcases sites that are built on Orchard and has a small set of interviews, but is not massively promoted or signposted on the Orchard website - it’s just a small logo on the homepage.

Proposed User Journey

The Orchard website needs to show some key case studies along with accompanying testimonials and just like the article feed, if the user wants to explore more, then we pass them through to the ShowOrchard website. If possible, it would be good to enrich the content on the ShowOrchard website with case studies.

Summary & Next Steps

Now we’ve mapped out the key user journeys we have identified inefficiencies and failings with the current website in how it caters for our target users. Without these journeys we couldn’t look at how these problems can be addressed in the Information Architecture(IA) of the site; which is the next step.

Objectives & Audience
Orchard CMS Website Audit
Comparing CMS Vendor Websites
Humanising our Audience with Personas
Project Requirements for the New Orchard Website
User Journeys for the New Orchard Website (this post)
Information Architecture for the New Orchard Website

Humanising our Audience with Personas

2016-05-09T00:00:00+01:00

Personas are essentially fictional characters that represent the different user types that use our website. I’m not a huge fan of personas as they are one-dimensional and can be misleading, for example, our first persona represents a Developer but our ‘Creator’ group could also be a designer for example. With that said, they do a good job of humanising our audience and communicating the types of user we need to cater for, which can help keep the user in mind when designing the site.

The personas below are ‘typical’ users for our website that stem from the research we did in the first post. To help with the personas I used uifaces and uinames.

Vincent Martinez - Creator

Age: 19
Job Title: ASP.NET Developer
Goal: Download or try Orchard and get up and running
Notes: Very technical and seasoned developer. Has used other CMS’s so will be conscious how it compares. Concerned with the technology, extensibility of the platform and how easy it is to develop for.

David Tran - Researcher##

Age: 38
Job Title: Chief Technology Officer
Goal: Ensure that the product is trustworthy and well supported
Notes: Time poor, high level technical knowledge, architectural. Concerned with commercial viability, security and support.

Laura Curtis - End User##

Age: 26
Job Title: Marketing Manager
Goal: Evaluate out of the box features, along with admin UI and ease of use
Notes: Non-technical but MS Office proficient. Concerned with ease of use, out of the box features and flexibility.

Summary & Next Steps

I’ve seen personas with tons of information such as bios, income, marital status etc. but for most occasions this information is not relevant and only adds noise. We’ll revisit the personas when we come to do the user journeys, but first we need to establish our user’s requirements, which is the focus of the next post.

Objectives & Audience
Orchard CMS Website Audit
Comparing CMS Vendor Websites
Humanising our Audience with Personas (this post)
Project Requirements for the New Orchard Website
User Journeys for the New Orchard Website
Information Architecture for the New Orchard Website

Project Requirements for the New Orchard Website

2016-05-09T00:00:00+01:00

To help achieve the projects objectives and goals, the project must meet certain criteria. These requirements can be seen as “Success Factors” or “Victory Conditions” in which the project can be measured.

I tend to write requirements down as User Stories which forces them to be user related. By doing this, each feature has a reason to exist and we combat against stakeholders asking for features that stem from opinion.

Creator Requirements

As a Creator I want to be able to quickly and easily download the right Orchard package for me so I can evaluate it
As a Creator I want to be able to quickly and easily find out how to install and setup Orchard so I can evaluate it with minimal effort
As a Creator I want to be able to learn more about developing with Orchard so I can get the most out of it
As a Creator I want to be able to learn how I can contribute to Orchard so I can help make Orchard better

End User Requirements

As an End User I want to be able to quickly and easily try Orchard so I can evaluate it without the need to download and install it
As an End User I want to be able to learn how to use Orchard so I can administer and manage my site effectively

Researcher Requirements

As a Researcher I want to be able to quickly and easily understand what features Orchard offers so I can validate whether it’s right for me
As a Researcher I want to be reassured that Orchard is a well-supported and fully featured CMS and is not going away anytime soon
As a Researcher I want to be able to assess the benefits of Orchard and compare with other platforms so I can be fully informed when making my decision on adoption

Administrator Requirements

As an Administrator I want to be able to quickly and easily add, edit and delete pages so I can keep the website up-to-date.
As an Administrator I want to be able to quickly and easily add community videos and articles so it doesn’t take too long to keep the website resources up-to-date.

Summary & Next Steps

Hopefully we have recognised and defined all the key requirements for the site. There may be other requirements that surface as we build the site but these are likely to be edge cases and shouldn’t affect the design or development. Next we’ll map the primary requirements as User Journeys.

Objectives & Audience
Orchard CMS Website Audit
Comparing CMS Vendor Websites
Humanising our Audience with Personas
Project Requirements for the New Orchard Website (this post)
User Journeys for the New Orchard Website
Information Architecture for the New Orchard Website

Comparing CMS Vendor Websites

2016-05-06T00:00:00+01:00

Introduction

This is the third in a series of posts (see previous posts) where I’m blogging my approach in the redevelopment the Orchard CMS website. In this post we’ll look at what the other CMS vendors are doing with their websites and analyse the good, the bad and the ugly.

umbraco.com

Likes

Instantly offers the user to try the product with little friction (albeit for the price of an email address)
Lists house hold names as clients (provides reassurance)
Title tag has desired keywords (The open source ASP.NET CMS)

Dislikes

Header CTA is to ‘Call Sales’ which makes you believe that the product is not FREE
Too many conflicting CTA’s on the page; should I ‘Contact Sales’, Signup, visit ‘Our Umbraco’ or ‘Buy Support’
Design is too “template” looking
You automatically get signed up for email marketing even though I never opted-in to it when trying out the Umbraco as a service

drupal.com

Likes

The website is focused on “new” users existing users are directed to the community site which is on the drupal.org domain
The ‘Who uses Drupal’ has some good customers, some with case studies

Dislikes

110mb video that is difficult to see
The ‘Getting Started’ section isn’t getting me started but leading me off to the .org site
Weak testimonials and ‘Why use Drupal’ section
Many of the menu items with the mega navigation are disabled

wordpress.org

Likes

Download CTA is clearly shown and accessible across the site within the header
Concise intro
Themes & plugins easily searchable and accessible within the site
Support & documentation all in one area and contained within the site - great for SEO
Get Involved section highlights all the different ways people can get involved with the growth of WordPress
Blog that is used for official news

Dislikes

Intro graphic means very little to me
Bottom half of the homepage is week and offer nothing
Conservative design

ghost.org

Likes

Clean design and not too much content on the homepage
Clear and immediate CTA to try the product with a low barrier (no email address)
Powerful testimonials
Product is shown in desktop and mobile views showing the product has been designed to be mobile first
Homepage is focused on selling the product and not trying to be a summary of the site - i.e. latest news, blog posts, ads
comprehensive and searchable documentation

Dislikes

No primary navigation on the homepage
Lack of community material

Conclusion

I’ve only highlighted a few sites I visited, but overall, there are no real big surprises here but there are some interesting points that demand more investigation and discussion. Traditionally, the role of the homepage on many websites is to act as a synopsis for the site, highlighting the different areas and pulling through bits of their content. But, over the last few years or so we have seen sites that use the homepage to sell the product to the user. Examples of this are: InVision, Xamarin, Basecamp, Spotify, AnyList and of course Ghost. Interestingly, Ghost take this approach and positions the CMS as a product - which it essentially is.

I’m keen to explore this area for the Orchard site and to see if it fits with the requirements and the user journeys.

Next Steps

Objectives & Audience
Orchard CMS Website Audit
Comparing CMS Vendor Websites (this post)
Humanising our Audience with Personas
Project Requirements for the New Orchard Website
User Journeys for the New Orchard Website
Information Architecture for the New Orchard Website

Orchard CMS Website Audit

2016-04-29T00:00:00+01:00

In the previous post we established the objectives of the site along with the target audience. As with any website redevelopment it’s worth looking at the existing site to see what it’s doing right and what needs addressing in the new site. This exercise can prove crucial and ensures that lessons are learnt and improvements are made. I’m not going to cover everything but I’m going to highlight the major issues, but as always I welcome your feedback if you feel I’ve overlooked anything; after all, more heads are better than one!

Design

Design is a delicate topic due to it being heavily influenced by trends and opinion. You can tell that the design was created professionally but over the years it has dated and needs a refresh. The design uses a fixed width layout and on today’s hi-res screens it looks tiny and this width carries across all devices and is not responsive or adaptive in any way.

Over the years, the content of the site has increased significantly and no doubt the design was never meant to accommodate such an amount. This is evident with the amount of items in the primary navigation menu and the terminology used to ensure it all fits in the 960px wide layout.

I kind of like how it uses the “nature” side of Orchard and maybe we could modernise and extend this in the next design.

Keep

Professionalism
Nature theme
Content first

Fix

Responsiveness
Navigation & content accommodation
Modernise

Usability

Following on from the design issues and due to the age of the website there are the common issues you find when a site was built pre-iPad. For example, the site isn’t mobile optimised in any way and as a result not touch optimised either. Today, touch is everywhere and not only on smartphones or tablets and must be accommodated for as standard. This means that links are not too close together and text is readable at different resolutions.

There is no clear hierarchy for Call to Actions (CTA’s) and instead there are too many links that are competing for the user’s attention. There is one exception to this, which is the Web Platform Install button which is orange and stands out on the homepage - but this is lacking on other pages throughout the site. Some links fire off to other sites, such as the Gallery, without any indication. On the plus side, hyperlinks are clearly defined and are visible at a glance.

Keep

Clearly defined hyperlinks

Fix

Mobile & touch optimisation
Use SVG’s to make the most of hi-dpi screens
Clearly identify external links
Clear primary, secondary and tertiary CTA’s
Add 404 page

Accessibility

There are a few images that don’t have an tag which is required by screen readers and by using a tool such as tota11y we can see that there are areas of the site that have less than the required contrast ratio required (WCAG 2.0 - AA). For example, the primary navigation items currently have a contrast ratio of 1.21 but at that font size, it should be a ratio of 3.00. Tabbing through the document works well.

Marketing

It looks like there was little to no consideration when building the site around how the site would be promoted and discovered and can’t help but feel that, as a result, has hurt Orchard in terms of product awareness. The content lacks any “sizzle” and is mainly product facts that fail to highlight Orchard’s strengths in an appealing and engaging way. There is also the conflict around brand positioning and search discovery and whether the term ‘Orchard’ is more preferable than ‘Orchard CMS’ or even ‘Orchard Project’ and when/where to use these. In fact, on a mobile device the main introduction disappears, so many users don’t even get to know what Orchard is without reading more.

My initial recommendation at this stage is to use ‘Orchard’ on its own in the context of Brand and use the term ‘CMS’ in conjunction with the technology e.g. “A great CMS built with ASP.NET MVC”.

A primary call to action should be on most, if not all pages and should lead the user on a journey to the desired goal. In most occasions this would be to download or try Orchard but could be different based on the desired objective. Either way, these user journeys need to be defined and catered for, ensuring the user is guided through to conversion.

Search Engine Optimisation (SEO) is a big part of the website being discovered, and again, over the years this area has evolved and several best practices have emerged that are not being utilised. I used a few tools to help analyse SEO best practices:

Here is a few things that could be improved:

Making the most of page titles
Adding meta descriptions
Adding SSL (for whole site)
Keyword optimisation
adding an XML sitemap
Canonicalise www - single preferred domain
Add robots.txt
Optimised friendly URL’s
Optimise headings and remove duplicates
301 redirects

Currently, the traffic and backlinks to the site are split across www and non-www domains, which in the eyes of Google could be seen as duplicate content and therefore trying to spam Google; this could have a direct negative impact on rankings. In addition, backlinks are watered down due to sites linking to separate subdomains. By having one preferred domain those backlinks are combined. Lots of websites, especially websites that are high traffic or seen as authorities that link back to the Orchard website is good for search rankings; especially when the hyperlink text has our desired keywords in.

It would be good to have the documentation and the forum on the same domain but I don’t think this initially feasible. Another nice addition would be for all the asp.net blogs that link back to Orchard to be optimised for the primary keywords. I’ll concentrate on the “on-site SEO” for now.

Keep

Main introduction (but maybe include ‘CMS’ in addition to ‘Content Management System’)

Fix

Product positioning
Consistent tone of voice
Defined CTA’s
All main SEO issues

Performance

The performance of the existing site isn’t too bad but can be improved. My tools of choice are:

The TTFB (Time to First Byte) is 0.354 seconds which is good (we want to be below 0.5s) and this is down to the caching within Orchard. But as you can see the actual load time along with the number of requests are higher than we would like. The number of requests can be reduced or nullified by moving to HTTP/2 compatible server. We have to be careful taking these figures on their face value though because with further investigation we can see that most of this time is taken up with async third party scripts and embeds, such as YouTube and Analytics. First render is 1.5s and the DOM loads at 1.6s. All these figures are taken from a fresh visit with no local cache and subsequent visits are a lot quicker.

Keep

Server caching
Small page size
Gzip
Minification

Fix

Reduce requests (or move to HTTP/2)
Optimise images & responsive images (deliver the right size image for the user’s resolution)
Use CDN
Consider using critical CSS

Information Architecture

Let’s first look at the primary navigation; there is currently eight items which is slightly more than I prefer as it’s more for the user to scan (cognitive load) and more difficult to design for and due to its single dimension it doesn’t scale well when wanting to add more content. I think the terminology of some of the items could be improved. For example, the word ‘Gallery’ could mean photo gallery and therefore I would prefer maybe ‘themes & modules’. Localisation could be grouped with Contribute and maybe renamed to ‘Get Involved’.

There is no obvious place for Orchard Harvest to live so maybe an ‘Events’ section may be required. This could also provide a place for meetups and webinars to live.

I think there is no clear route to getting started. This is one of the primary user journeys and needs to be a priority and currently this is lacking. Unless you land on the homepage or the download page then there is no easy way to download or try Orchard. This must be omnipresent across the site. For a first time user, which is the best download option? Should it be the full source or the WPI? This needs to be clearly explained along with setup instructions.

As a frequent attendee of Orchard Harvest (the official annual event) I can verify that the Orchard Community is awesome with many of them connected on social networks such as Twitter, Facebook and LinkedIn. I think there is room for improvement in this area but can be addressed post-launch.

Summary

I’ve tried not to be too critical; after all the site is over seven years old and has served us well and there is a lot that the site is doing that is good. We need to ensure that the good parts are not lost during the redevelopment. In the next post, we’ll look at what other CMS vendors are doing on their sites and see if there are anything we can learn.

Objectives & Audience
Orchard CMS Website Audit (this post)
Comparing CMS Vendor Websites
Humanising our Audience with Personas
Project Requirements for the New Orchard Website
User Journeys for the New Orchard Website
Information Architecture for the New Orchard Website

The New Orchard CMS Website

2016-04-27T00:00:00+01:00

As a web developer and Orchard Community member it pains me every time I visit the main Orchard CMS website. Ever since the website’s first release back in 2009, the site hasn’t changed that much but as you know the web considerably has. With new mobile devices, higher screen resolutions, design trends and huge advances in web technologies the landscape has significantly changed how we build and experience websites.

I’m therefore delighted to announce that I’ll be redeveloping the site, working closely with Microsoft and the Orchard Community.

The process of redeveloping a website covers many areas such as research, marketing, information architecture, user experience, design, development, testing and project management. I’m hoping to document my approach by blogging as I’m going through the process whilst getting valuable feedback from the Community.

Objectives

Before embarking on any redevelopment, its imperative that we understand the objectives of the website. These objectives may be different from when the site was first developed so its worth just checking that there are no changes or additions.

The Orchard website has very simple objectives:

Get users to download and/or try Orchard (to hopefully then lead to adoption)
Support current users of the platform
Create awareness of the platform
Encourage users to participate in the growth and development of the platform

Each objective has a set of Key Performance Indicators (KPI’s) that we measure through Google Analytics. The KPI’s need to be measurable, e.g. ‘more than 1000 downloads per month’ or ‘20% extra tutorial views per month’. The KPI’s are used so we can determine if the website is achieving its objectives or subsequently if not, optimise accordingly.

The Audience

We need to understand the target and current audience to ensure we’re reaching the right people or whilst conducting our research, we may find additional markets that we are unaware of. Unfortunately, getting reliable information is not easy and in most circumstances, we need to combine several sources. Here are the sources of information I used:

Domain Knowledge
Google Analytics
Hitwise
User Interviews
Alexa

Based on the my research, I’ve grouped the audience into three groups:

Creators
End Users
Researchers

Creators: Typically, developers & designers but could include architects, DBA’s (for the few that still exist) etc. “Creators” that are new to Orchard are looking for the product detail such as technology, in-depth features, reassurance etc. If they are already using an existing CMS and are looking to switch, then they will be looking to compare with what they already know. Whereas existing Orchard users are more likely interested in the community support and documentation. Currently, the documentation, forum/chat and gallery are off-site so catering for existing Creators is more around sign-posting to the relevant external resource.

End Users: Typically, website administrators or semi-technical users such as “implementers” but could include users from the “Creators” group e.g. developers with a blog or a designer with a portfolio website. This group are looking for user guides, how-to articles and themes/modules.

Researchers: Typically, clients and managers that are needing to ensure that adopting Orchard is the right thing for them and their company. They may or may not have heard of Orchard before, so they will be looking for varying degrees of reassurance. Testimonials, case studies and client showcases are key areas for this type of user. They are less bothered about the technical detail but more about the commercial viability. So key things such as open source, free and on-going product development are a must to highlight.

Next Steps

Now that we understand the what we are trying to achieve, we can look at how well the current site delivers on this. In addition, it’s a good idea to look at similar sites.

Objectives & Audience (this post)
Orchard CMS Website Audit
Comparing CMS Vendor Websites
Humanising our Audience with Personas
Project Requirements for the New Orchard Website
User Journeys for the New Orchard Website
Information Architecture for the New Orchard Website

iFit Schedule Workout Fix for Shared Maps

2013-06-22T00:00:00+01:00

If you are a regular user of the ifit website you may have noticed that recently they have given the website a make over. As part of this revamp, they have taken away some key functionality - the schedule workout link from the workout details page. This has angered many customers and their frustration has been aired on the Zendesk support page. Even though these comments have been acknowledged, nothing has happened.

I looked at the code and found that the functionality exists but all that’s missing is the link that fires the action. So, I’ve create a bookmarklet that re-adds the Schedule Workout link back to the page. You can install it by dragging the link below to your bookmarks/favourites bar.

Add Schedule Workout Link

Once installed, go to the iFit Maps website and find a workout. Once on the workout details page, click the bookmark and the Schedule Workout link will appear at the top right of the map. click the link to add the workout to your schedule.

SMS Notifications with Orchard CMS and Twilio

2012-08-23T00:00:00+01:00

In this post I’m going to run through a quick example of how to set up SMS notifications in Orchard CMS.

Install the SMS Messaging Module

First of all install the SMS Messaging Module from the Orchard CMS Gallery.

Once the module is installed and enabled, go to Twilio and sign up for a free account.

When you sign up, Twilio will give you some credit so you can try out the service; with this credit purchase a number. This number will be used to send the SMS’s and will appear when the end user receives the message.

Configure the Settings

Go into the SMS Settings area and enter the information found in Twilio. You’ll need the following information:

Account SID
Auth Token
From Number

When entering the Auth Token, the textbox will appear empty. This is because the Auth Token is treated like a password and is encrypted in the database.

Set Up a Rule

Now we have everything configured we need an Event to happen so we can fire off a message. Under Rules, create an event.

In this example, the event will be when a new blog comment has been created.

Next we set up the Action.

The Action will fire an SMS to the administrator of the website but again, this could be an arbitrary number or even a collection of numbers using a comma to separate them. Next fill in the message that will be sent. The message can contain up to 160 characters and can contain tokens.

Now that the Event and Action are set up all that’s left to do is to do is ensure that the default messaging is set to SMS in the general settings and do a test.

Go onto a blog post and submit a comment. You should shortly receive an SMS with the message you wrote.

Image Carousel using Twitter Bootstrap and Orchard CMS Projections

2012-07-08T00:00:00+01:00

There are a few great modules in the gallery that can aid you in the creation of an image carousel but with the invention of Projections this functionality has become really easy to implement with very little code. If like me you’re a fan of Twitter’s Bootstrap framework you’ll no doubt have noticed they offer an image carousel component. This article will show you how to bring the bootstrap carousel into Orchard CMS.

Create a content type

First of all we need to create a content type for each of the images we want to show in our carousel. This type should contain a way of choosing an image as a minimum requirement - I’ve opted for a mediapicker field. I’ve also added a numeric field that acts as an ordering system.

Add a few images

Upload at least 3 images so that we can test the rotation and order and give each a different priority.

You should now have at least 3 carousel images in your content list:

Create Query

Next thing we need to do is create a new query and call it descriptive e.g. “Carousel images for homepage”. Add a new filter for the query that just brings back all carousel images that have images assigned. If you wanted to put this carousel on different pages then giving each image another field such as group will allow you to filter based on that otherwise a custom filter that uses the url of the page would work.

Next create a sort and chose the priority field and sort ascending. Alternatively, you can randomise the selection by selecting the random sort order.

The last item of a query is the layout. By default the two layouts that are out-the-box aren’t quite what we want so we need to create our own that uses the markup required from Bootstrap.

Create a Layout Provider

In your theme project create a folder called Providers and then under that create a new one called Layouts. Within there copy over the gridlayout.cs, gridlayoutforms.cs and layoutshapes.cs from the projections module.

Rename the files in your theme from Grid to Carousel:

Optionally, modify the CarouselLayoutForm.cs to expose the classes/properties of the carousel.

Next we add the html markup to the LayoutShapes.cs file that will determine how our carousel is rendered.

And finally we need to register this new layout, so we need to edit the CarouselLayout.cs file like so:

Now we have our query in place we need to re-build our theme project and we should be able to see a new layout.

If you have exposed the html properties on then be sure to fill them in.

All that’s left to do now is add it to our page. Go to widgets and create a projection widget in the you zone of choice and layer. Then select the query we just created with the new layout. You should have a fully working image carousel - be sure to include the Bootstrap JavaScript and CSS for this to work.

Steve Taylor’s Blog

Information Architecture for the New Orchard Website

Card Sorting

Sitemap

First Attempt

2nd Attempt

Wireframes

Summary & Next Steps

User Journeys for the New Orchard Website

Tools and Approach

User Journeys

1. Try Orchard (All Users)

2. Download Orchard (Creators)

3. View Resources (Creators & End Users)

4. Product Reassurance (Researchers)

Summary & Next Steps

Humanising our Audience with Personas

Vincent Martinez - Creator

David Tran - Researcher##

Laura Curtis - End User##

Summary & Next Steps

Project Requirements for the New Orchard Website

Creator Requirements

End User Requirements

Researcher Requirements

Administrator Requirements

Summary & Next Steps

Comparing CMS Vendor Websites

Introduction

umbraco.com

drupal.com

wordpress.org

ghost.org

Conclusion

Next Steps

Orchard CMS Website Audit

Design

Usability

Accessibility

Marketing

Performance

Information Architecture

Social

Summary

The New Orchard CMS Website

Objectives

The Audience

Next Steps

iFit Schedule Workout Fix for Shared Maps

SMS Notifications with Orchard CMS and Twilio

Install the SMS Messaging Module

Sign Up for a free Twilio Account

Configure the Settings

Set Up a Rule

Image Carousel using Twitter Bootstrap and Orchard CMS Projections

Create a content type

Add a few images

Create Query

Create a Layout Provider