Following the tutorial i didnt focus too much on the finer details or colour schemes that i will include in the final website. I kept a monotone colour scheme, and area outlines for where the assets will later be positioned.
The main focus for the wireframing was the layout and placements of all the main features.
Following the tutorial i downloaded the guide from 960 grids and worked from there.
I shouldve kept the wireframing even simpler than it is, i think the banner is too distracting and adds too much detail this early on and makes the rest of the features bare and boxed in.
The grid wasnt easy to work around, however it was essential when precise placements were desired. Ultimately the grids were turned on and off through out the photoshop stages of this wire framing work.
Organization and folders were crucial when working with so many layers for each screen.
The home page consists of three main features, Health, Social and the introduction of the helping tool, below each there will be a brief description of its main proprieties and uses.
The three blank areas at the bottom of the screen are for ads, helplines or events, this will be decided on by the sites administration team, but for now i will have one of three, or all helplines.
The banner is a constant throughout and contains all the major navigators, including the emergency reminder.
This home page like many is the starting point for all the sites uses, and so at the end of the wireframe prototype, the user will end up back at this home page to continue browsing.
As the homepage is the main welcome screen, i figured the biggest feature would be 'Smiley' as hes a major asset and its his one and only introduction on the site.
Following the user journey, the user will click the health section and be brought to the symptoms navigator, although invison wouldnt allow a hoover option on my account, when the cursor hoovers over the body parts of the person, they highlight and could be used as a filter before the search menu, as could the popular search buttons below the person, however the user will skip the symptoms navigator to show its only a useful option.
Regardless of what youve chosen on the symptoms navigator you will then be brought to the search screen above, although the navigator wouldve filtered appropriate suggestions.
The search bar is for clinic names, symptoms or keywords. The area would normally be for a town or city but as this is designed towards a certain area of Derry, the Area search bar would be for your zip code.
Note that throughout these screens, smiley is a constant and will follow the cursor, showing different emotions, and can be clicked on as a search engine or help tool at anytime.
Once the information has been submitted using the GO button, you can always change or narrow your search. Options with brief details appear and a map that locates each one, if you hover over the option box, a small box will appear near the destination indicator in the map, giving the user all the needed information to make an informed decision.
The user will click option three and be navigated to the full option details, with extra options below.
Here they can either navigate back to search results or book an appointment online.
The users may not want to book an appointment right away but want to remember this particular suggestion In this case there is the save option to the top right. somewhat like a book mark.
There will also be the option for the businesses, events and clinics to have a promotional photo alongside the details, when selling something its more beneficial to have an appealing visual for the user to have more incentive to choose that particular event/venue.
When booking an appointment the details will be essentials only, additional information is welcome but also optional. Once your personal details are entered, there is a time and date drop down menu, only available times and dates will appear, this type of menu is used on many sites such as cinema listings and concert tickets, both the time and date will serve as filters for the other.
There is also the choice of whether you want confirmation form more than youre computer screen whether or not you really have an appointment, after all the demographic have limited technology skills and may not be as trusting as most when it comes to booking online.
Once youve completed the booking, there is a thankyou page, but firs there is a pop up, asking whether youd like to add the appointment to your calander, if clicked YES the log in/register menu will appear.
However if you click NO, you will simply see the Thankyou menu with all its after care advice links.
The thankyou screen is both for confirmation that youve successfully booked your appointment, allows the option of after care or extra questions, but i think it also adds a friendly feel to the site and allows the site to be more personal than most of the health check finders already available.
After some further self evaluation on the design, the banner buttons ie Home, About, Events etc should be straightened. I dont want the website to look like a common flash site but the awkward angle of the buttons doesnt look professional when in a digital form. Although the torn pages and pinup style is still the end goal, the button will likely suit being horizontal and make the banner look less bare and messy.
Im quite pleased with the wire frames and the demo app that i created using invisionapp.com (LINK below) although there will be minor changes in the final website, i believe the designs are ready for the digital stages of this project.
The main focus for the wireframing was the layout and placements of all the main features.
Following the tutorial i downloaded the guide from 960 grids and worked from there.
 |
| Grids - The making of. |
The grid wasnt easy to work around, however it was essential when precise placements were desired. Ultimately the grids were turned on and off through out the photoshop stages of this wire framing work.
Organization and folders were crucial when working with so many layers for each screen.
 |
| Screen One -Home page |
The three blank areas at the bottom of the screen are for ads, helplines or events, this will be decided on by the sites administration team, but for now i will have one of three, or all helplines.
The banner is a constant throughout and contains all the major navigators, including the emergency reminder.
This home page like many is the starting point for all the sites uses, and so at the end of the wireframe prototype, the user will end up back at this home page to continue browsing.
As the homepage is the main welcome screen, i figured the biggest feature would be 'Smiley' as hes a major asset and its his one and only introduction on the site.
 |
| Screen Two - Symptoms Navigator |
 |
| Screen Three - Search |
The search bar is for clinic names, symptoms or keywords. The area would normally be for a town or city but as this is designed towards a certain area of Derry, the Area search bar would be for your zip code.
Note that throughout these screens, smiley is a constant and will follow the cursor, showing different emotions, and can be clicked on as a search engine or help tool at anytime.
 |
| Screen Four - Search Results |
 |
| Screen Five - Details |
Here they can either navigate back to search results or book an appointment online.
The users may not want to book an appointment right away but want to remember this particular suggestion In this case there is the save option to the top right. somewhat like a book mark.
There will also be the option for the businesses, events and clinics to have a promotional photo alongside the details, when selling something its more beneficial to have an appealing visual for the user to have more incentive to choose that particular event/venue.
 |
| Screen Six - Book Appointment |
There is also the choice of whether you want confirmation form more than youre computer screen whether or not you really have an appointment, after all the demographic have limited technology skills and may not be as trusting as most when it comes to booking online.
 |
| Screen Seven - Calander Reminder |
However if you click NO, you will simply see the Thankyou menu with all its after care advice links.
 |
| Screen Eight - Confirmation |
After some further self evaluation on the design, the banner buttons ie Home, About, Events etc should be straightened. I dont want the website to look like a common flash site but the awkward angle of the buttons doesnt look professional when in a digital form. Although the torn pages and pinup style is still the end goal, the button will likely suit being horizontal and make the banner look less bare and messy.
Im quite pleased with the wire frames and the demo app that i created using invisionapp.com (LINK below) although there will be minor changes in the final website, i believe the designs are ready for the digital stages of this project.
http://invis.io/2614MQRVX
https://projects.invisionapp.com/d/main#/console/1406809/31460043/preview
After some peer feedback i decided to make the minor changes in the wireframes and create an edited wireframe demo using invision.
https://projects.invisionapp.com/d/main#/console/1406809/31460043/preview
0 comments:
Post a Comment