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.

boshEvaulationGraph

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.

Tasks

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.

Walkthrough

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:

boshMenu

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

InitialSketch

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: