PARADIGM INDUSTRIES

119COM Project 4
New Product Development to Market
Team Paradigm 4/1/2014

Contents
Introduction ............................................................................................................................... 2 Site Map..................................................................................................................................... 2 Wireframe Designs and Justifications ....................................................................................... 3 Logbooks.................................................................................................................................. 17 Contribution sheet .................................................................................................................. 21

Introduction
We have been asked to write a report and create a website. Our team have carried this out by collecting data on wire frames. We have created our own wireframes for our website the website we made has been created on Dreamweaver so this gives us a pure start from scratch. We made sure that the members were delegated the tasks and also we made sure that there has been enough information for us to produce our website.

Site Map
Paradigm Industries site map for website: Home o Introduction o Masthead About Us o Paradigm Industry o Arafat Ahmed o Daniel Knowles o Khalid Sheikh o Jakub Plachta o Chan Yel Products o Image presentation o Information about products o Buy it now o PI-Tech Brochure o Paradigm Industry report Contact o Contact us form Name Email Topic Message Submit

Wireframe Designs and Justifications

Justification set 1
This justification document is based on a variety of possible wireframe design solutions which could be used to make up part of our web presence that Team Paradigm are making for our Raspberry Pi product. There are a total of four wireframe design solutions, each relating to a different section of the site. The pages we have decided to include, and feel are most important are: A Homepage An About Us page A Product Info page A Contact Us page

Throughout this document, the justifications made will be based on the wireframes designed; each will be critiqued based on the possible usability of the wireframe if implemented. A cop of each wireframe design will be displayed under each heading. Design one Homepage

Site Architecture and Navigation If this design were to be implemented, the user would easily be able to navigate around this page as it contains all of the relevant and brief information regarding both the company and perhaps the product coming under the spotlight topic section. The approach taken to come to this design conclusion was based around structure, structure is key to any website and its a necessity if it to appeal to the user. This web page has the opportunity to appeal to people because of its simple and organised layout. It was important for none of the features to overlap each other as the page may then have become cluttered, overall, the opinions on this design are that it is clear an easy to see and will prove to be easy when it comes to navigation too. Relevance of Content It is important that all content on the webpage to be relevant, and relate to either the URL, or to the company and its process. As this design was based around previous projects, as a group, we had previously decided on a product and how it could be build. All that was needed was a web presence to showboat it. As the product and other previous issues are resolved and known, the focus on information if it came to populating this page with information would not be a problem because the base and what we have so far would cater for this. Appearance If implementation were to go ahead, the appearance would be one factor that could be altered many times along the way. At this early stage of development it is difficult to describe the appearance of the wireframe. However, if populated with content and images, there is a good balance between images and text. The blocks of text would likely to contain paragraphing to improve the users experience with each section. Layout As shown by the picture, it can clearly be seen that a structured approach has been taken. This as a group we felt was the best path to take. Taking a structured layout will improve aesthetics if implemented, also with a structured layout; it may encourage the user want explore the site more. Visual Features

As for visual features, all of the necessary placeholders have been placed in locations where they will stand out from other features on the page. For example, the search and navigation bar at the top of the page can clearly be distinguished from the spotlight section underneath. Also, the useful links section could prove to be useful for the user and is situated on the homepage for ease of access.

Design two About Us

Site Architecture and Navigation The main talking point of this page (and for the other designs too) is that it follows on from the homepage in terms of structure and layout to a certain extent. The things included that will be visually the same on each page, is the industries logo, the navigation bar, the search bar and the section boxes at the bottom of the page. It is important for these features to remain the same on each of the pages as t shows consistency and also reassures the user that they know these features are in the same place no matter what page they are on. Relevance of Content

Again, like the other pages the content on this page was relating the Paradigm Industries. However this particular page has a slightly more personal ouch to it because the user can explore and learn more about the people involved with the development of this new product. This is an important feature as it shows that we are considering all aspects to a company website and not just focusing on the selling side of things. This page gives the website a good balance of advertisement for the product, but also offers the opportunity to find out more about the members of the company. Appearance Because this is a wireframe, the design has several routs it could take for it to be developed further. The main features on this page are the images. The images will give this page and the website a personal touch because it revolves around the team rather than the product. If this page were to be developed further, is could perhaps be less formal in the fact that its main purpose will be inform the user about team members, although this may not be a primary page for users to click on, it is still important that this page is considered in the development stages. Layout This layout is similar to that of the last, consistency is key when considering layout. The most successful websites are those which are consistent and simple. We would like tore-create this when implementing out site, so we have the potential to retain users and make them visit the site again. Consistent features like the navigation bar and search bar remain in the same page. Visual Features The photos are probably the most eye catching feature on this page. The photos will split up the text and make the page look less busy; this will make the page look less cluttered. There is a lot more white space on this page which will help improve the aesthetics of this page. This page isnt all about selling; it is used to find out more about the company and its members.

Design three Product Information

Site Architecture and Navigation For this page, the navigation ease remains the same as the other pages; the main features of navigation in this page are on the same page. The picture on this page could possibly lead to a link containing more information about the product; however this may not be of benefit as there is a useful links section to the bottom right which will feature on every page. This page and any of the other webpage wireframe designs have been designed so that the user, if implemented will not have to scroll left and right to see all content on the page. Relevance of Content This page, as shown by the title, is dedicated to providing information on our Raspberry Pi product. There is an image placeholder to the left and informative text to the right. The purpose of this website was for it to provide an online presence to show off what our product has to offer. With this design and this wireframe page design, the user is able to find out everything there is about the new product. If this design were to be taken further in to development, more information such as a background to the industry could be included, perhaps with examples of where our product would aid a rescue process.

Appearance At first glance, the overall appearance to this page is positive; there is a clear product image which is important for the user to see, whilst there is information which compliments the image next to it. The appearance is consistent with other web pages from these designs and the user should have no trouble navigating their way around the page. The paragraphing and perhaps the position of the image could be altered to improve reading; this would have to be taken in to more consideration of taken forward for development. Layout The positions of the logo, navigation bar, and search bar, and icons at the bottom have remained the same. The man content in the middle aligns with the title of the web page. There is a structured layout to the webpage and it follows on from designs of the other pages. Visual Features When users first load up this page, the first feature that they are likely to see is the image pf the product. It has purposely been designed this way to ensure that the user knows what they are going to read about on the webpage, also, images are more fun to look at that blocks of text. The use of this image, because of its size can also be used to break up the text on this page and make for more pleasant reading. There is also the opportunity to make use of smaller images dotted around the page rather than to use one large image. Design four Contact information

Site Architecture and Navigation The site architecture and navigation is generally going to be the same for this page too. The only differences there could be are added links to opening a new email window for example. Simple things could be included which would allow the user to get in contact with the company in a variety of ways. It is important to include several contact options as not everyone would prefer to contact the company via a phone call for example. Relevance of Content Contact information is essential for a web presence. Lots of people go to a companys website to find out contact information so they can get in touch with them. The email section to the let of the page for example will include a drop down menu. This can be used by customers in the fact that they will be able to state the nature of their message, this will help and improve clarification on the receiving end for the employee as they have the chance to respond quicker. Customer service levels need to remain at a good standard. Appearance The appearance of this page will consist of two separate sections including a variety of different ways in which the customer is able to get in touch. In particular, the section to the left will include a contact form for which the customer will need to fill out their details in order for them the send an email to us. In terms of colour, it would be a sensible idea to use bland colours such as white and grey, this should be of the same house style of the rest of the website. For error messages such as email not valid/recognised this should appear in red and stand out from the page. Layout The contact information will take up the majority of the page, however, like on previous pages the navigation bar logo, search bar and icons at the bottom will remain the same place. The message section in particular will be displayed as a white box where the customer will have a word/line limit to their message. This should be considered carefully when designing if taken forward as if the message box were to extend, it could cause it to overlap other features on the page. This could be eliminated by having the message section open in an external tab in the web browser. Visual Features As this page is titled Contact Us the main visual features will be the contact information itself. Users do not want to be looking around trying to find the information they are looking

form. Therefore it is recommended that a contact us section features on the navigation bar. It will consist of a simple format, having the user fill out one piece of information before, there will be a short explanation at the beginning explaining how the system will work, then short titles highlighting what information needs to be provided.

Justifications set 2
Wireframe is a very important phase of the web development process. It allows us to do several things more professionally, and the time and effort we put into this phase wages bonuses in the greater structure of things. However, by creating a wireframe, we are able to plan and distinguish how our pages would look like when theyre finished. Also how the positioning on the pages would look and how it would appear on the page when we create the actual electronic wireframe using HTML, therefore we will gain ideas on which bits to improve to make our wireframe more professional. Our wireframe is fairly basic and straight forward, its justly identifiable because it displays all the information in a clear context and makes it easier for users to use. All the information you need to know about Paradigm Industry are on the website as each page clearly gives you an explanation of all the things you should know about us and how we work. The colours on the wireframe pages were chosen because each member thought it would be a good idea as it will go moderately well with the logo of the group which made it stand out noticeably. Central position webpage (information) Navigation bar in every page Title clear outstanding in every page Footer at the bottom of the page is used to display copyright information

Determine the goals for the website from the prospective of the user and the business We follow the methods of HCI (Human Computer Interaction). We determine the goals of ensuring that our website is user-friendly, we made sure that the text was the right size to read, we made sure that the images were the right size to view, this is because between five of the members, we did a test to see how our website is used in the sense of a consumers point of view. Perform a competitive analysis To make sure that we carried out a competitive analysis, the members decided to look at websites that are already well organised for us to establish how our layout and structure would be to determine the needs of our website to make it the best that we could.

Based on user research analysis, model the user experience and then specify requirements for usability, user experience, functionality, data, the environment, and accessibility. When looking at the navigation tools we made sure that the website had a consistent colour theme and layouts making the website look as professional as possible and not to make the user feel as if though they were using a junk website. However, the team felt as though the

functionality and the accessibility are of purpose to the website, giving you a feeling of how professional team Paradigm Industry is. We created a Site Map based on usability requirements to describe the websites best navigation and organisation The team has come up with a very simple use of site-map because making it too complicating would disrupt user guidance and user-friendliness because the user of the website will want to stay attracted to the navigation and the organisation of the website. We used examples of websites such as Apple, Windows, Oxfam and Red Cross. Who our users are, what are their tasks and online environment? Our users are related to anyone who is interested in making a donation towards the fund of Paradigm Industry. We are a company who are making sure we help people when they are lost and making sure we give back. The Users are those who are making donations. We could look at getting sponsors from major companies to be a part of our big project such as Coventry University, helping us with donation and being our sponsor we look to aim the target market at students and full time workers who wish to make the world a better place. Perform quality assurance testing until all specified requirements have been met, including: business, visual design, usability, user experience, and technical Functionality requirements The testing we had done as a team making sure that we can all navigate through the pages. Our wireframes that we had created in the past for our planning was to make sure that they were user-friendly. Creative as we are an innovative company who look to bring you future technologies. This was provided by our IT team of making sure that each of the pages was attractive, professional and formal for users who will view the website to put in donations. Our donations box is very simple you have to get in contact with us through the website which is very simple as we have this on our contact page we are going to be able to take secure payments through PayPal. We are making sure that the details are safe and that no one could get a hold of this information just the company for the donations. Our webpage is using 1thousand pixels width from this reason we wanted to achieve the most from the homepage. we made 2 halves to give more information in one view (users/audience) Less images/scripts to achieve fast loading! for every page

Create final product (different views gives users feedback) We created our final product which will be helping people in need. It is also userfriendly. However, after creating the final product, each one of the team Paradigm Industry members did a simple test to gain customer feedback. The feedback we got back from the customers helped us improve our product as well as making sure that the website is suitable and easy to use as it was more professional and straightforward.

Home Page

About Us

Products

Contact

Logbooks
Name: Daniel Knowles Group: Team Paradigm

119COM Project 4
Work for Assessment Design of our product

DATE 11/3/14 12/3/14 14/3/14 15/3/14

TIME 11am 2pm 11am 2pm

WORK Wireframe design for upcoming website

Wireframe justifications (7 pages)

1/4/14

11:00am 2:00pm

Collect information and put report together

Name: Jakub Plachta Group: Team Paradigm

119COM Project 4
Work for Assessment Design of our product DATE 23/02/2014 TIME 4 hours WORK Research on modern website, on CSS templates, Looking for inspiration, Develop some ideas for group website, Learn basics in Adobe Photoshop, Use Adobe Photoshop for create an effective background, Use Adobe Illustrator to develop some buttons(trying), looked into java script Start creating web site for a team with using of HTML and CSS (Adobe Dreamweaver), Divs and IDs in HTML are prepared, so start using CSS positioning; Using Adobe Photoshop for saving images (as save for web), Exploring more features in Photoshop start create modern menu bar for our site

24/02/2014

5 hours

25/02/2014

5 and half hour

Menu bar finished- implement it into the web site- HTML + CSS positioning(of the menus background as well), Learning a lot from Photoshop (mainly layers, colors and gradient), Continuing work on page (mainly within the CSS) with using of Microsoft SharePoint Designer Improving CSS code in Dreamweaver Create 1st wireframe with Chan (based on my idea)

03/03/2014 04/03/2014

1 hour 1 hour

11/03/2014

6 hours

16/03/2014 17/03/2014

1 hour 2 hours

Change menu bar to more visible and adapting to the page font color; continuing work on my wireframe(add more specifically areas + static and dynamic parts); researching CSS contact forms, create new subpage Contact Us, then I have created a contact form for the group web site with using of PHP basics, in order to achieve the best design result I have used CSS shadows on contact form (later on add more specific source code to the CSS) Working on Contact us page Developing website design with the group, mainly focusing on design and improvement Completely finished (changed) agreed idea of design in the website on homepage + new background; finished 1st wireframe homepage sent to Chan for continuing work on wireframes; finished php file in contact us page; start next subpage called Products developed an idea about image showcase researched possible ways Continuing work on website Product page finished, all text and PDF files added, create a new site map for web page, About us page finished

18/03/2014

4 hours

25/03/2014 31/03/2014

2 hours 4 hours

Name: Arafat Ahmed Group: Team Paradigm

119COM Project 4
DATE 3rd March TIME 2:00pm 5:00pm 11:00am 2:00pm WORK Wireframes have been created

4th March

Website has been started the group have come together to start the website which has been started on Dreamweaver

10th March

2:00pm 5:00pm

Website has been completed

The report has been put together and the information has been gathered for it. 11th March 11:00am 2:00pm

1st April

11:00am 2:00pm Putting all the rest of the work together and to make sure everything is ready for use

Name: Khalid Sheikh Group: Team Paradigm

119COM Project 4
DATE 10/03/2014 11-2 TIME WORK Working on the questionnaire Looking over A.L.L. work Working on wix site

27/01/2014

2-5

Building 119COM report structure Producing specifications for product

17/03/2014 18/03/2014 1/04/2014 Name: Chan Yel Group: Team Paradigm

2-5 4-6 11-2

Working on the PDF file for 118COM Working on the 118COM report Working on 104KM work

119COM Project 4
Work for Assessment Design of our product DATE 10/03/2014 TIME 2 hours WORK On this day I helped one of my group members (Jakub) with the title/footer and images, as well as helping him with the colors of footer and the layouts on the page I made draft notes about the introduction of the report then I wrote the first part of the introduction 21/03/2014 2 hours I planned some of the pages of the wireframe which were suitable for our website

14/03/2014

3 hours

24/03/2014

1 Hour 30 Minutes

I started the wireframe justification, talking about all the things we covered on our wireframe as a group, and then I elaborated more on all the things we mentioned on our website

25/03/2014

3 Hours

I created the wireframes using Adobe Illustrator. I created the Homepage, About Us, Products, and Contact. I created them using Illustrator as I thought it was a unique and different way from others.

31/03/2014

2 Hours I spoke about Barriers to ITIL, and gave examples

Contribution sheet