13 Oct

BOSH website feedback

BOSHrun updated website

BOSHrun.com has been up and running for 4 weeks now. The initial launch was successful, with only minor issues from a handful of users. This included routine things like lost passwords and activation emails going into junk folders.

The biggest problem since launch has been spam users registering on the site, once of which direct messaged a few users. This is obviously a very serious issue, and can cause huge annoyance for members. If the issue isn’t resolved quickly, it could cause members to stop using the site. I installed extra catches on the registration page, added report a user buttons and increased the spam security on the site. Since doing this, there hasn’t been a single reported problem.

I have also received a lot of positive feedback for the site:


website feedback 01

website feedback 02

website feedback 03

I set up a forum topic on the site where members can give their feedback and ask for help if necessary. It can be viewed here.

Another notable element of the site is the design of the new shop. The minimalist design really shows of the products, and I’m very happy with the increased functionality of the shop (including adding in dropdown lists to select size and fit).

Screen Shot 2015-09-03 at 09.57.26


I’m very happy with the outcome of this project, and am interested to see how the site evolves with the increase of users and content being produced.

As of today, there are 197 registered users.

Screen Shot 2015-10-13 at 21.39.43

Please follow and like:
03 Sep

WordPress Project Update

I started building the final BOSHrun website around two weeks ago. I had done a lot of the work previously, including extensive research, planning and prototyping as can be seen in earlier posts about this project, as follows:

  1. Client worksheet
  2. Surveys
  3. Concept maps and cultural probes
  4. Probing part 2
  5. Competitor analysis
  6. Cultural probe results
  7. Personas, user scenarios, use cases and user journeys
  8. Task analysis and content inventory
  9. Functional and content requirements
  10. Card sorting and information architecture
  11. Mood board and wireframes
  12. Clickable wireframe
  13. Visual design for BOSH prototype
  14. Summary and clickable prototype
  15. Evaluation
  16. Building from a prototype

The existing BOSH site was rarely used, with the main bulk of activity on their Facebook group. This allowed me to take the site offline while I work on it. For this, I used the Minimal Coming Soon & Maintenance Mode plugin.BOSH under maintenance

As for the rest of the site, only a handful of volunteer testers will be able to see an advance preview. The final site is due to go live at the end of September.




Please follow and like:
03 Jun

Building from a prototype

I am starting the process of building a WordPress site based on my prototype for BOSH.

I want to keep the structure of the site as it was in the prototype, but I am working on adding functionality, and in particular for registered members.



  • Aim to present BOSH as a community: open, friendly and helpful – sets them apart from other running clubs.
  • Minimalist, sleek design in keeping with the BOSH brand.
  • Fully responsive, mobile-friendly site.
  • WordPress CMS



  • Online community. Members can register to use special features.
    1. Communicate with other members.
    2. Leave posts and comments.
  • Member registration will allow you to collect data about your members.
  • Find a buddy/ find a group – registered members can search for other members.
  • Blog with specific categories, with the option of allowing certain members to upload posts.
  • Members page to sign in.
  • Forum replaces the free flow conversation that Facebook currently contains. Based on Mumsnet and Runners World forums. As it grows, we can add more means of organising the posts.
  • Photo gallery where members can upload photos and write comments (just as Facebook).
  • League table sorted by gender and race length.
  • Simple shop, uses Paypal.


To view my blog about the entire design process, please go to http://ashleynye.co.uk/category/web-design-2/boshrun/


To view work in progress, click here.

Screen Shot 2015-06-03 at 22.50.47

Please follow and like:
22 Jan

Web Dev: Evaluation

Expert Review

To evaluate my prototype, I added the site to the competitor analysis table I had previously used to compare the current BOSH site and two other running sites.

Screen Shot 2015-01-22 at 12.58.39

It is clear that the prototype is a clear improvement on the existing website, and scores better in the usability criteria than the competitors. There is room for improvement in the visual design category, to make it more exciting and stimulating visually, and this is something I would do in the next phase of the project, or if I had the opportunity to repeat this.


The reason I marked the navigation so highly, is because I designed the navigation directly from my user journeys and tested this with other people before eventually redesigning it to give me the current version. It is simple to use, and obeys principles such as only giving the user a small amount of options at any time, so as not to overwhelm them.

Cognitive Walkthrough

User input

My user is male, 22, and technologically able. He has not seen the prototype before, and has never accessed a running website either. He is, however, familiar with forums.


I have asked him to find a running event near his hometown.

I have asked him to find a popular running event.

I have asked him to show where he could get advice about running shoes.

Correct action sequence

The user is expected to click on “Run”, then “Events Page” in the navigation bar, followed by the “Events by location” tab on the screen. Here he can enter his hometown in the search bar and navigate to an event near his hometown.

The user is then expected to click on the “By BOSH attendance” tab to show popular running events.

For the final task, the user is expected to click on “Blog” and then “Gear Reviews” in the navigation bar. Alternatively, he could use the search bar at the top of the page, or navigate to the forum, search the thread topics, or login and post his own question.

Definition of the interface

As the user hovers over the main navigation bar, subsection topics appear. These will lead the user to more specific pages, giving more description and allowing him to complete his task more efficiently.

Hovering over clickable elements also changes the cursor, allowing the user to see that it is an option to click on.


The user managed to navigate to the events page effectively, as there were only 4 options on the main navigation bar and “Run” showed a subsection of “Events”. There, the user was able to find the “Events by location” tab easily, by following the labels.

The user then managed to find popular running events by clicking on the “by BOSH attendance” tab, even though the label doesn’t mention popularity. This is because the wording is clear, and is in the same section as the other event filter options, none of which relate to popularity.

The user showed more hesitancy in the last task. He first went to “Blog”, “Gear Reviews” as expected, and scrolled down to view a post about running shoes. The user didn’t try to use the search function, and stated that he would have used the forum had he not found a post about running shoes on the first page of the blog.

Evaluation Summary

I think that the competitor analysis and the walkthrough shows that the navigation is very effective. As the semantics were rewritten to try to convey more running specific terms, I think the ease of use has improved. Now, when users are faced with the tasks they want to achieve, it is very clear where they need to go to complete this.

Please follow and like:
20 Jan

Web Dev: Summary and Clickable Prototype

This project has been very interesting. It has been a great experience designing a bespoke website for a very specific clientele. The research was integral to the project, as my knowledge of running is was limited. I now feel I have a grasp on the requirements most wished for by runners using a website such as this.

Much of my time was spent reading through posts on BOSH’s Facebook page to see how their existing members interacted with the community, and how I could design my website to best suit their needs.

For example, a lot of the posts were “who is going to [this event]?”, so as a direct response I included a by BOSH attendance option to filter events, and a counter on each event page to show how many other members of the BOSH community will be present at each event.

Screen Shot 2015-01-20 at 20.39.29

I followed this kind of theme throughout my design. The “find a buddy/group” forms are designed to match BOSH members together, to allow people to connect through the site and feel a sense of group spirit both online and off. This will obviously come with some safety and data protection issues that will need to be addressed, but as these functions are only accessible for registered members, it will give BOSH an opportunity to get people to read safety advice and opt into sharing of information when they sign up.

When I presented my prototype, it was suggested to me that I could take the BOSHERs theme further, and allow members to see who is attending each event. This is certainly a possibility, but again would come with its own data protection and safety issues.

Overall, I think this project went well. It was definitely interesting to see how my extensive research allowed for some innovative thinking in the design phase. It is possible to come up with useful ideas based on what the user wants, and I will be using this technique in the future.

You can view my clickable prototype here, and by typing BOSH101 into the password field.

Please follow and like:
18 Jan

Web Dev: Visual Design for BOSH Prototype

I used Axure RP 7 to start designing my prototype, based on my previous research in this project, and of others including my Human-Computer Interaction and Design for Digital Media projects.

I gained a lot of experience last year with user-centered design and the techniques available to research this concept.

“As a main component of our idea is organising large quantities of information, clarity is key. Use of negative space, use of colour to simplify and legibility are three things that will be priorities in our design.” – part of my HCI report.

I think my work really benefits from user-centered design, and the research I’ve done previously into design principles. My first mock-up of the design is below.

Screen Shot 2015-01-17 at 21.36.55

I’ve used quite a minimalist approach to the design, as the negative space aids clarity. I’ve echoed the shape of the logo in the navigation bar, and kept the colour scheme minimal too. I’ve used light grey boxes to break up the page, and separate different elements.

I designed the rest of the website using the same theme and structure, for consistency and ease of use.

I referred to other successful websites for certain parts. For example, the forum page was based on elements of the hugely successful Mumsnet forum and Runners World forum.

The design is purposefully simple, because not everyone using the site will be familiar with technology, as my Personas and other research highlighted. My competitor analysis also showed that other running sites were possibly too cluttered, and were overwhelming for first time users. My research showed that first time users and new runners are a big percentage of BOSH’s target audience, so this was very important.

Please follow and like:
13 Jan

Web Dev: Clickable Wireframe

I used my wireframes, created using Balsamiq, to make a clickable prototype on InVision. I showed this to some testers, who found the navigation simple and easy to use, but had some suggestions regarding the page headings.

It was highlighted to me that it could be beneficial to the user if the links were more specific to the end goals. As a runner, it could be confusing if they are trying to find a buddy to run with. Would they click on Events? Would they click on Members?

I need to refine the navigation to help people who know what they are trying to find.

I decided to go back to my research, and have a look again at what users really want. I also need to make sure some of the functions of the site are less hidden. For example, on the prototype above, it doesn’t show that you can find a running buddy if you sign up/in as a member. The semantics clearly need to be improved.

I want the find a running buddy section to be more prominent on the main navigation.

I redesigned the menu to look like this:


It has a lot more running-specific terms to reflect the feedback I received and elements of my research. I created this menu by looking back on my user journeys and realised that if the user didn’t search/land on the page they wanted straight away, they would have to use the navigation instead. My user wanted to find a particular topic in the forum, “running tips”, so as well as having a Forum link under the Members tab, I also added it as a specific category in the Blog.

The difference between the blog and the forum is: the blog contains blog posts and articles written by specific, pre-approved members. The forum, however, allows any BOSH registered member to post or reply to a thread. Having both the filtered (blog) section and the unfiltered (forum) on the same site, means that they can be linked to and discussed easily.

I then added to the navigation diagram, to show extra pages/functions that I would also need to design. These can be seen below, added in black.


Scan 20 Jan 2015 19_43

The website I’ve designed has a huge emphasis on community, on the BOSH running membership, and on members using each other for motivation. One thing I got from looking at BOSH posts on Facebook, and that I didn’t get from other running clubs, was their sense of camaraderie. I want to add special features that show events that other BOSH members will be attending, because my research showed that this is a big bonus for BOSH.

Please follow and like:
06 Jan

Web Dev: Mood Board & Wireframes

To begin my visual/prototyping phase, I put together a mood board. I tried to encapsulate the spirit of BOSH, and running in general. The branding of BOSH is blue, so obviously this features very heavily in the mood board, but I’m very happy that I managed to convey the intended emotion of the new website.

The key things I want to try and represent through the design are: achievement, community, freedom, motivation and inspiration.

BOSH mood board by Ashley Nye


My initial thought is to use WordPress, as it will be a great content management system, easy for the site owner to use and update. The current BOSH website is a WordPress site.

I have a sitemap, and a requirements list, so I know what I need to include in the site and how I am going to organise it. I started by sketching out some 5-minute ideas of how I expect the elements of each page to be arranged. It is important to keep to some design conventions, because the user will expect certain elements to be in certain places, and this aids navigation and makes the site easy to use. I came up with some initial wireframes using Balsamiq Mockups which can be seen below. I started with the Home page and the Events page. I would like the header image to be a slider, with various inspiring images to scroll across the top. I want the site to be quite clean looking and minimalist in design, because it has a lot of content to include and I don’t want it to look overcrowded and therefore less professional.

BOSH wireframe

Please follow and like:
10 Dec

Web Dev: Card sorting & IA

I used card sorting techniques to help with the information architecture for the new website.

Writing down each section and element that needs to be required in the project, and then sorting them will really help with organising navigation and arranging the elements priority within the page and the website itself. The following image shows the card sorting I completed myself.

Card Sorting Pic

I then used Optimal Sort to allow others to arrange the cards how they see fit. This will give me a different perspective on the matter, and see how other people naturally categorise elements. The following is an image of my online card arrangement.

Optimal sort

I created the following MindMap from all the information I’ve gathered over the last few months, which includes a brief design of the navigation and labels.

BOSH Run Home

I then finished my Site Map, which is a more organised version of the MindMap above. It shows the way I intend to organise the new website (download to view).


Click on the image to download and zoom in.


Please follow and like:
04 Dec

Web Dev: Functional & Content Requirements

Now I’ve identified the requirements of the client, and completed a substantial amount of user research, I need to scope functional and content requirements.

Functional Requirements

  • “HOW should the website meet client’s objectives and user’s needs?”
  • “WHAT do users need to DO on the site?”

I’m going to be using the MoSCoW method, which stands for Must, Should, Could and Won’t.


  • Have an in-site search engine
  • Allow members to register/login
  • Allow members to contribute to a forum
  • Allow specified “expert” members to contribute to the blog
  • Link to existing social networking sites
  • Have a suitable payment process (PayPal)


  • Error checking on the register/login form


  • Allow members to get an email notification when their comment/post receives a reply
  • Integrate Facebook comments
  • Have a function where members can enter their details into a league table


  • Integrate with tracking software such as Garmin, but this is a possibility for the future.

Content Requirements

Fortunately with this project, the majority of content needed is already available (see Content Inventory). There is a vast amount of imagery and text on both the existing BOSH Run website, and on their Facebook page. The logo is already existing, along with a strong brand. There is plenty to chose from, so the biggest task will be selecting those to use.

Therefore, I will only need to create the following; copy (instructions) for the register page, and rules of the forum, along with general text and locating the right imagery needed.

Plenty of existing content

Existing content on BOSH’s Facebook group.


Please follow and like: