Date: 10th December 2010
This was the last group work before everyone going on holiday, and before handing-in the assignment. But this is the first time we work together at the same time, as this was a tutorial class. Usually work is done in different times depending on individual personal schedule and availability, and because we only meet up to decided how to divide the work between us.
First, and before getting into details of our last group work, I thought I wrap up in a nutshell how we progressed from a simple idea to a working website, in my opinion. Since I joined late, I had absolutely no idea about the work that's been done before I joined the group, but from our first meeting, I understood that they have made a couple of interviews (users, librarians, etc), and based on these interviews, they have created their user characteristics, profiles, and personas. I was able to help in creating the personas, since I joined at the same time they started working on it. And I have to admit, I wasn't very confident about what I was doing even though I have done this twice in my undergraduate, but probably because I was reserved because I'm around a group of people I have never worked with before. So at the beginning, my participation was very limited, but little by little, I got confident enough to talk, suggest ideas, and offer alternative solutions to problems we faced. That's happened when I started working on the user journeys for Maria and Sophie, the two personas I was assigned to work on. Then I've created the task model, or the site map, for our website using OmniGraffle, which I found easy to use after a couple of trials and errors. This task model, helped us to visualize how the website is going to look like, which we started working on in creating the wireframes, but since we thought we were running a little bit behind schedule, we finished the important wireframes as much as possible, depending on our user journeys, so I can start coding for these page while the rest of the wireframes get done.
Now, and going back to my main point, the last group work, I never thought a group work on designing a website could be very challenging, because we're all working on the same CSS file, so whenever someone decided to add new styles to it, everyone had to wait, or work on something else until that person is finished so we can all download locally the latest version of it, this way, we don't mess up the website, or start mixing up pages and styles. I have to admit, I was the first to fall in this mistake, as I started editing and adding new styles to the CSS file without notifying the rest of the group, which led some of the group member to either redo what they have done all over again, or, and since it was my mistake, I had to copy their work in the notepad application, download the latest CSS file, and paste it back again. This happened because it was the first time to work all together at the same time. But after that, everything worked fine, and whenever any member wanted to make new changes, we first ask if anyone is making changes at the same time to the same file, and if so, the most important one gets done first, then the next, and so on.
A couple of days back, Rosa suggested having a tab navigation at the top with the website's services, giving users the ability to move from one service to another without having to go back to the main page, which I got around doing perfectly, and we all agreed that they are fitted in the best place, but what I didn't do is styling those tabs with colors representing each with the service color we already agreed on before. That's the mistake I did while working on this project, moving from one thing to another without finishing the first thing. So, since everyone was already working on the rest of the pages we didn't get around doing, I thought I should take this opportunity to finally do that. At first I was confused and wasn't actually thinking outside the box, since those tabs are made in a "ul" list, and this list is style in a certain way, I wasn't sure how am I going to assign each item in the list a different color. First thing that came to my head was creating a div class for each item, and after Cath confirming that this is the way to do it, I tried working on this, but didn't give the results I was hoping for, to be honest it didn't give any results at all. Then Cath suggested I should assign each item a different ID class, which was possible to do, since the tab navigation I created had an ID class called "selected" for which when the tab is the current opened page. I did that, and it worked perfectly in the page I was testing on, but the trick was to actually implement this to the rest of the website, without disturbing my group members, and without having them to stop their work just so I can do this. First I made sure no body made any changes to the CSS file except me, so I uploaded my version, the latest one, to the server. Next, I had to make sure no body is working on the old pages we've already done before, but thankfully they've all creating new pages, so this was easy too. I implemented the new tab navigation to all the pages, and waited for them to finish the new pages they are working on to amend them as well.
After finishing this, I remembered I faced a problem before with one of the pages that has a search option and a detailed search option that the JavaScript wasn't working correctly. First I'll explain the purpose of this. The user has two options, a normal simple search, which includes the input field and the search button, another option is to click on "detailed search" to give him more options to define that search without having him to move to a different page. That was done using JavaScript that I was able to get from this website and this website. Now, the problem I was facing, was the link for "detailed search" has to be clicked twice at the first time the page is loaded for the options to show up, and this is not we had in our head to have. It was supposed to be done in a single click, and another single click to hide the options. When I asked Cath, she said that she's not very familiar with JavaScript, which wasn't the answer I was hoping to hear, But when I explained exactly to her what's happening, she suggested that I take another look at the JavaScript and make sure that the code is not mixed up, as she said it must be because the div class that's holding the hide-able content is actually hidden at first, and the first click is just doing the "hide" option again, and the second click is getting the code back on track to show it. I took a look at the code, and she was right, that was exactly what was happening. The div class is already hidden at first, and the code has an "if - statement", which is saying, in natural English: "If the content is set to hide, then change it to hide, otherwise change it to show", a simple but fatal mistake, in my opinion. This was fixed easily in the JavaScript file without making any changes to any page or the CSS file.
Another problem we faced that day, was that James PC when uploading pages to the server, it was uploading to a different folder than "public_html" which is the main folder we all are uploading to. So I had to work the Dreamweaver ftp to fix this up. First thing I did was editing the settings for the ftp and make it directly upload to the "public_html" folder and only there. Then I decided to take an easier step, and delete our pages from anywhere on the server except in that folder, since I was sure I already have the latest files stored locally on two different PCs, But here is when I made a mistake as that folder has been created twice for some reason I don't know what, one inside the other, and I deleted the main one, then when I refreshed thinking it's gone, I found it there again so I deleted it again and this was the mistake as the second delete was actually happening in the main "public_html" folder, I didn't realize that until I opened the website and I found it giving me an error which then made me realize that everything is gone, I was scared, and actually paranoid for a little bit, but I tried as much as I can not to show it, because I know that the group depends entirely on me when it comes to the website, so what I did next was upload the files stored locally on my PC to the server, then got back to James’s PC and downloaded those files locally, and uploaded the new ones he made back to the server. But it didn't go perfectly as planned, as one of the pages was there, but the style sheet for it in the CSS file wasn't there, but I guess getting out with one file missing after this whole scenario is not a big problem, all we had to do was to write the style for it again, and thankfully it wasn't a very long one, and everything went back to normal. But this experience made me realize not to always act and the first assumptions I make when encountering similar or even different problems, I should always study the situation from different angles and try to tackle it in a smart way, one thing I did right was actually having local copy, a backup, stored on several machines, and I have also learned this the hard way but from past experience with different projects.
The rest of the day, I dedicated my time helping the rest of the group finishing the last pages, and explaining to them if I did something different and why I did, this way they can learn and practice more, as I'm sure they wanted that. But most of the work they were working on, they have done it themselves with very little help from my side, and I'm definitely sure they have learned a lot from this project, because I'm sure I did.
Even though my part of the work in this project was focused more on the website rather than the other stuff, but I guess this is the benefit of a group work. The work gets divided naturally between members depending on their experience and strong points, and then each member explains what they have done why they did it this way to the rest of the group, to learn. I was more focused on the website and the coding and I helped them in doing it themselves.
I was confident enough from the beginning that we are going to finish everything in time, I had no doubts, even though we were a little bit behind schedule, my only concern was am I going to learn anything from this or not, which I'm it was answered clearly from the blogs. Even though the website is marked 20%, I still wanted it to be as perfect as possible, that's why I dedicated my time and effort on it, I'm sure I would've done a far better job if I had the time to, as I still think that it needs a lot more to get it to the level we imagined it. Perhaps more graphics, making it usable by people of all abilities and disabilities, or integrate libraries websites and functionalities within this website. There is always a place for improvement, but for this website, as a project for a module in a course, I'm still satisfied with the outcome, either visible like this, the website, the documentation, or invisible like the experience and the self-improvement we all got.
Date: 27th - 30th November 2010
I've split the work between 4 days, as it involves more work than before.
First, I started doing the "Book reviews" page as its the same as the "ask a librarian" page with the same design, I just needed to change the colors and text for that page.
As for the event results page, I had to look around the Internet to learn the best way of showing results, which includes a table filled with contents. I wasn't sure if I should use tables or there is some other way to do it in CSS. And I came across this website which include examples and ideas. The decision I've made was doing it using tables and CSS to reformat it. I've chosen one of the styles in that website, and tweaked it to best fit the theme of the website. At first I had some troubles, as the examples will only provide the CSS file, but not the HTML table, so I had to look the source of that website's page, and thankfully, it was easily accessible. I've copied the table to dreamweaver, and made the required changes to it, then configured the CSS for actions like hover, colors, and fonts.
The final version of the page can be accessed here.
While making those changes for the colors, I came across ColorZilla's website, and while fiddling around with their generator, I got an idea of changing the blocks for the services on the main page to make it look more like buttons, 3D buttons. So, using the same colors, I've managed to get the buttons to look exactly like what I wanted it to be. The website, after adding and changing the values, will give the CSS code to use, auto-generated. I've tried it on Firefox, Safari, and Chrome, and they all showed it perfectly without any troubles, but just incase if the user is using a different browser I didn't test it on, he can still see the same plain color with no effects.
We still have a lot more work to do in order to finish the entire website in time, I believe we can do it.
TO DO NEXT WEEK:
-Individual result for events page
-Other scenarios
Date: 25th November 2010
I've started looking through the Internet about navigation bar to get an idea of how to fit it in our website. I've thought about having the navigation on the left side, but after trying it out, it didn't turn out how I thought it's going to be, that because there aren't many options to put. So I've re-designed the page (after looking at BBC's website). I have extended the top dark bar to cover the entire page, but have the content of the page only in the middle area. Then, I have added the top navigation right under the website's logo (horizontal navigation), this way it doesn't interfere with the content of the pages, and it won't distract the user.
I've found this useful website, which helped me in creating a tab navigation bar. And I've chosen this tab to use, I've made couple of changes to the CSS in order to fit the website, like changing the direction of the tabs (up instead of down), colors, hover actions. We all agreed this is the best suitable place for it, so I applied it to the rest of the pages that was already designed before.
Next, I moved on to doing the "ask a librarian" page, and again this wasn't hard to do. It's almost the same as the events page, but instead of having one big block for the search, this page has two blocks. But it's still in the same concept.
TO DO THIS WEEK/NEXT WEEK:
-Book reviews page
-Event results page
-Individual result for events page
Date: 21st November 2010
We are supposed to design the website according to the scenarios we've made in the beginning of this project, this way, if we couldn't finish the entire website in time, we would've at least managed to finish the parts concerning those scenarios.
So, I've decided to start with the events page. This page is used when a user is interested to find events in a library near the post code they are providing in the search engine, the results will include information about events near that area (according to the user's preferences in choosing the proximity of their search). It will be shown in a grid view, including the date of the event, details about the event, and in which library, when a user choose a certain event, it will take them to that page's event giving more details about it.
First, I have to design the first page for "find events" which is going to include, as stated before, a search engine for the user to fill. And since I've got the general idea of how to do that, (using blocks), this is how I've done it. And to give each page its own identity, we agreed on using the color scheme to distinguish each service from the other easily, so the user can instantly by looking at the color can know he's on which page. So, I designed the search engine to be in a box in the center of the page with a background of the same color for this service.
I didn't face many problems with this one, as it's a straight page with no complications. The page can be accessed in here.
I'll keep on working on the easy pages so we can get over with those.
Date: 19th November 2010
In this week's lecture and group work, we set to finish the last wireframes for the rest of the pages. I've also made the required changed for the sitemap to suit the latest decision we have decided on.
Since we are late it starting the code, I've decided to start at least finishing the first page, the homepage, before the ending of the lecture. Because we my experience in website developing is quite old, I have had some difficulties getting along to use CSS. I'm still not used to not being able to use tables, or having only HTML to reconstruct the page, therefore I've decided to start coding using the test page we have made weeks before. Surprisingly, that wasn't a hard job and I've got along in understanding CSS quite fast, it only needed reading and searching the internet for what I'm going to do and get the idea of how to do it.
I had some troubles putting the services in the middle of the page, as we wireframed it, so I've ask for Cath's assistant as she explained how to do it, how to put and organize "BLOCKS" in a page using CSS's (float: left;).
Josh was responsible for searching for icons to use in the website, and contacting the author to get the permission to use it in our project, Rosa, James and Gordon helped in writing the descriptions of each service's page, while I was working on finishing the homepage.
The homepage wasn't that much of a hard work, which gave me the opportunity and time to explain to the rest of the group how I've designed that page, and how they are going to design the rest of the pages, as we agreed we are going to split the work between us, and I'll help them through it if they got into any issues while designing.
Cath setup the FTP server to upload our website, but it didn't go live yet, so we're going to have to wait until it's confirmed to use it, meanwhile, I'll work on some of the pages as much as possible to try and finish up everything before the hand-in date.
I've probably forgot to mention in the previous post that I've suggested having a Google group for this project, to exchange files easily, post discussions.
TO DO FOR THIS WEEK/ NEXT WEEK:
-Design as much as possible of the pages
-Help the group when needed
-Post all work to the group's page (task for the whole group)
Date: 18th November 2010
We're still working on finishing the remaining wireframes. For each page we worked on, we had a simple discussion about it, as we left the pages that requires a lot of user interaction and results for the last because it's a big task, and probably the most important for the website.
For the event calendar page, we had a discussion of how to show the events, by calendar or by a simple search by the postcode. In this, we wanted it to be as easy as possible for the user to find events that might interest them. We've all agreed on having the user to search by postcode or location, and show results of events in that area.
Another thing we've argued about was should events be added by the library, and whether we have to also design a page for that or not. Each event is going to be clickable, if the user is interested in one, a new page will open containing the name of the event, location, time, contact details, and a brief description about that event. And underneath that on the bottom right, there will be a link which will lead to "find a library" page.
Next page was the reading groups, and we've all agreed that its going to be similar to the find a library, a user can search for reading groups using the post code or area. I've also suggested that on the right side of the search, we can should have "add a reading group" option, this way, if a user was more interested in adding their own group instead of searching for one, they have the option to do without going through the search. Depending on the hierarchy of importance for the items on the page, the search is going to be the center attention then having the add option next to it.
Results will be simple, since there isn’t too much information to show, it's going to show the group name, what is it about, and contact details, for example:
-------------------------------------------------------------------
Group name | About | Contact
-------------------------------------------------------------------
group1 | book1 | mobile and email
And so on. Another option we're going to add at the bottom of the page, either if the search turns out with zero results, or the user didn't find a group with their interest, is the a link to "add a reading group" page.
(Can't find a reading group in your area meeting your interests? click here to start your own).
The "add a reading group" page is going to be a simple form:
Group name:
About/details:
Contacts: phone and email
Next, is find / browse reviews, browse and search should be in the same page, giving the user the browse option (list of categories) and also, the search. Each category will be a drop down list. As for the search, the user can either search by title, author, or keywords.
When we started the add a review page, we had an argument about if we should have the user put their name as the first field or not, I preferred that the username field should be the first one, this way he won't be confused between his personal details and the details of the review, but the argument ended by all agreeing to have the field right before the review textarea, and the user have the option to either fill it or not.
The form:
Book title:
Author:
Genre: (dropdown menu)
Tagline/review name: (This will show as the title for each review in the book's page)
Star rating: (graphics)
Your name:
Review: (with a max character counter)
While working the wireframes, we have made a few changed to the sitemap that I've done. This is the list of changes:
-Change the "individual details for events" page from 4.1.1 to 4.1.n
-Add a book page 6.2.n.1 under book reviews.
-Add a confirm page 6.1.1 under book reviews > add form
TO DO FOR NEXT WEEK:
-Amend the sitemap
-Read more about CSS
This is the first time for me to do a sitemap, and to be honest I was sure on how or what I'm going to use to do it, that’s why I took this task, to learn. In the beginning I thought about using ConceptDRAW pro, but it didn't do what I was expecting, as it wasn't suitable for sitemaps.
Date: 12th November 2010
Today's group work was more focused on finished the wireframes of the website, since we're almost behind in that, we had to finish all the remaining pages in order to start designing the website. We started doing the wireframe for the pages before having the new sitemap ready, that's what caused us a bit of delay in finishing, because we were thinking of the pages from the top of our heads without knowing the architecture of the website how it's going to be.
We started sketching the sitemap, depending on the wireframes of what we've already done, and on the scenarios for each of our personas.
We faced some problems in deciding whether we're going to have events in the website added by users or the librarians. We've also couldn't decide how the book reviews going to appear in the page when a user search for a certain book, I've suggested that each book should have it's own page showing the book cover, title, author, brief description, and under it the reviews should appear depending on the viewer's choice, either by date, or by rate.
The browse for book reviews was a bit tricky, as we couldn't decide on how are we going to categorize the books, so we had a look at different websites such as Amazon, Barnes and Noble ... etc, to find out how they categorize books.
I've chosen to take the sitemap and produce a digital, organized version of it, and also redo my scenarios with the template of which we decided to have it all to look like. The template was done by Rosa, and it fitted the process of our project, and was reasonably understandable when we are going to design the website.
TO DO FOR THIS WEEK:
-SITEMAP
-SCENARIOS
Date: 11th November 2010
Today we agreed to meet so we can try finish as much as possible from the designing process for each page we are going to re-design for the website. We have also finished the rest of the user journeys we didn't get around doing before.
The pages we wireframed are the homepage, search, and find a library. For each page, we agreed to have a slight description about the service.
The homepage is going to be slightly the same as the current one, we're just going to put all the services that the website is going to provide and a little description about it. This way, the user will be given a general idea about the website and it’s purpose, instead of having them going around the website trying to understand what is it for.
For the search, we decided instead of having to search pages, we could simply have one page and giving the user the option of either a simple search or a detailed search.
Find a library is going to stay the same for the search page and the results; the only changes we are going to make are in the results page. We're going to have the name of each library as a link to the library's website, and the distance for that library next to it.
In the details section, there is going to be the address of the library, the phone number, email, and Google maps for that library.
So far, things are going great, even if we are slightly behind schedule; I still think we are doing a great job, as we are paying attention to every little details concerning the user and the usability of the website.
We still haven't finished all the pages yet, but for now we agreed to meet every Thursday, to keep track of our individual progress, as well as the group’s one.
Date: 5th November 2010
This week's lecture covered sitmapping, Navigation, labelling and categorization. The point of these, is to understand what users are expecting from the website.
Visitors of any website are expecting some content to be put in the same place as they got used to it on many major websites, it means as its just a standard design, Such as the search box, the basket for ordering online, etc.
Also, it would be a good design if the website had a description about what is it for on the main page, this way visitors don't have to go around wasting time thinking what this website is going to be just to find out that they don't need anything from this website.
We didn't have time to have a group meeting, as we had a tutorial on designing the first wepage using Dreamweaver and implementing a Cascading Style Sheets (CSS). This wasn't a hard tutorial for me, as I have experience in designing websites as it was my job before coming to UK. So I took the time in this tutorial to help my group with this, explaining everything to them and giving them solutions if they had some troubles.
So far, I'm getting along with the group very well, and as I hoped, helping them at this tutorial has already broken the barrier between us and we already started to act as teammates in one project.
Date: 29th October 2010
As I joined this module late (because of my late application to the MSc course), this was my first lecture. But I've got a general idea about this module, and it's basically talking about how to best design a website so it can be suitable for the user, covering all aspects. As I have a previous experience from one of my modules in the undergraduate, this is going to be an easy assessment for me in my opinion.
For this week, we covered user journeys and the content for each website, so the user can navigate through the website without giving the user the feeling that he is lost, and we should consider all possible barriers and problems the user might face to avoid it.
In this also I've joined the group that I'm going to work with. Our project is about redesigning the website (http://www.peoplesnetwork.gov.uk/). The group already started with their work, so I had to catch up with them. It's not easy to join late and start working on such assignments or projects instantly, and also because the group already started to work on the assignment, I guess I'm going to have some troubles catching up and understanding the purpose of it. The group was trying their best to welcome me and to explain what's already done, and what's going to be done in the future. Unfortunately I always have troubles interacting with people I don't know yet, but I'm trying to get over this as fast as possible if I want to gain experience out of this, and also to get good grades.
For this week's group work, we had a brainstorm session about personas, the expected users for the website, depending on interviews done by the group. Then we implemented the same process for the user journeys that was taught in class with these personas.
For the user journeys, we have divided the work between us, we had 3 personas, I was doing the user journey for "Sophie", the librarian, and "Mary", the teacher.
For Sophie, her goals for using the website are:
-Contribute a book review
-Finds top10 sellers or Booker prize winners
Mary:
-Finds a reading group in her area, or start a new one.
At first, and because I still don't have the exact idea of the website, or how are we going to re-design it, I struggled in doing the user journeys, so I decided to do it as I would've imagined the website is going to look like, from the brief idea I got after the group work. Then in our next meeting, I'm going to discuss it with the rest of the group and see if I'm on the right track or not.
