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:
20 May

Web Dev: Testing

I conducted a navigation stress test, as outlined here by Keith Instone, on the website prototype.

The following shows the table of questions I asked as described by Keith Instone, and my annotated web page.

Screen Shot 2015-05-22 at 15.13.56


The navigation is clear and the information is organised efficiently. The navigation is at the top of the page where users will expect to see it, and every page is consistent. The links in the navigation describe exactly what is going to be on each page, so users can navigate directly to the page they need.

Please follow and like:
19 May

Web Dev: Finishing Touches

Before testing, I completed little detail tasks such as creating a favicon using a generator to match the company branding, and writing the PHP to action the email form on the contact page based on this code.

I ordered the domain name “anitagunnschoolofdance.co.uk” to upload the site when the consent forms have all been signed and the site has been tested and approved by both me and the client.

I tested the website on different devices, including an iPhone 5s, a MacBook Pro and an iPad 2.

Sample screenshots are included below.

Screen Shot 2015-05-20 at 12.05.41





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: