Event Website: jQuery

I am going to do my event website on the Leukemia and Lymphoma Society’s Light the Night Walk in Lancaster, PA. It is Saturday, October 6, 2012 in Long’s Park. It will be a 2 mile walk in which participants will raise funds for lifesaving blood cancer research. I chose the following “event” websites to use for inspiration for their functionality and style, I couldn’t find any that had any kind of similar event to what I chose. I am planning on using the same colors and themes from the original website to make the connection, but I hope to make it look more fun and stylish because as of now it’s a pretty boring website overall. I think having a nicely designed website for an event like this would really help people to get involved and participate.

I will have different sections throughout this one page website which will describe the actual event itself (time, place, map, etc.) and then the details of the event, such as what time to be there. I will have a section describing Light the Night and what the cause is about, probably at the top of the page. An area for the participants to register and sign up a team will be necessary as well.

My Objectives: The point of the Light the Night walk is not to be sad or mourn about lost loved ones or loved ones that are currently ill. Inspiration is the key to the walk and what the participants and volunteers involved try to achieve at every event. People associated with Light the Night are raising money to provide educational materials to patients and families and also fund local programs and support groups. The two mile walk, along with the other festivities of the evening, are meant to be about celebration. Celebration of the lives we have along with the lives lost to leukemia and lymphoma and those fighting for their lives. I want my event website to portray this more then anything, that this is a positive event about celebration and bringing awareness. Yes, your team is encouraged to raise money, but we all know that not many people have extra money nowadays, so raising awareness and education by about these illnesses by participating in the walk will be key.

Personas: These are the three personas I created for my event site about the Light the Night walk. I tried to think of three different reasons that people would be interested in finding out information or participating in a local walk and how I can use my event site to persuade them to be a participant or volunteer.

personas-01
Wireframes: I browsed around looking at a few different layouts for smooth scrolling sites and I thought that these three could most easily convey my event simply while still being interesting to the viewer.

wireframe1

This first one would be basic, the main navigation staying fixed at the top of the page and when clicked on, the sections would scroll accordingly. I thought keeping the navigation visible the whole time is important for the user to be able to get back and forth from section to section and with this layout being the simplest I think it would be the easiest to use for the widest range of people.

wireframe2
This second one has the same concept as the first, but with the navigation staying to the right of the page, again fixed so it wouldn’t go away. I came across some sites with this and I thought they were still easy to use but the side navigation gave it a little bit of something different. I also played with the sizing and placement of the page elements on this layout.
wireframe3

This is stepping outside the box a little bit and trying to undertake a horizontal side scrolling layout. I like this concept because I had the idea to make the map of the route go along the bottom which I think would be really great for the user to see and interact with. The only problem I can think of with doing a website like this is it may be difficult for older users to navigate, I could always find one similar and try it out on older adults that I know to see how or if they figure it out.

mood board

Mood Board: A big theme that they have are balloons, the different colors symbolizing supporter, survivor, and in memory, so I really want to incorporate them. The slogan used for the general website is also very powerful, along with some photographs I’ve come across from previous walks. I want to incorporate some textures to make the site more visually appealing, but I’m going to try (hopefully!) to stray from my usual illustration style which is relatively childish. I’m not completely set on the typefaces I’ve displayed, but I thought they were classic and readable enough for this kind of event site that will be going to a wide variety of users.

 

Background/Nav:

I spent a long time trying to find a typeface that I thought was appropriate to remake the logo for this event, since I think that’s a pretty weak part of the current website. I ended up purchasing Jessica Hische’s font Buttermilk because I thought it fit perfectly for the mood of the event that I’m trying to portray. I had already picked out a texture I liked for the background and tried playing around with what words I wanted to include and the placement of the words.
This is the layout I came up with for the main page of the site. My website is going to be horizontal scrolling, so the top navigation bar will remain fixed (aside from the logo decreasing in size which you can see below) and the bottom navigation / map will change accordingly. I am also going to design it to stay within a 1024×768 display. I did some research and found that most older Americans, like my Primary Persona, are working off of this size monitor so I’m going to challenge myself to make the website stay within these dimensions since we are used to working on larger screens as designers.

I just changed some of the colors and patterns around here to see which worked better.

This would be the fully extended site with all of the sections listed: Home, About, Participate, and Contact. I made the logo less significant on the preceding pages because I think the other information on the page becomes more important.
Site Design:
This is the new direction my design has taken on. It’s about 85% finished, I need help thinking of ways to display the map at the bottom and what things to put on it. I tried creating a gazebo and the stage that’s at the park, but it clashed in size and concept. I’m happy with the way it’s looking overall, I started over again from scratch because I was unhappy with the previous design, and I think this is a lot more appealing and easy for my audience to follow. I also designed it with the intent that it won’t be impossible for me to develop. The javascript features will be the side smooth scroll, the slideshow on the about page, and the contact form on the last page.
Final/Revised Site Design:
event layout_redo

This is my final design for my website. The home page was giving me lots of issues but I think the solutions I came up with work really well. The footprints tell that it’s a walk without me having to write “WALK” anywhere (assuming someone would be viewing this website that wouldn’t know what Light the Night is). I kept in mind my personas the whole time and I think that the primary persona (the older woman) could easily be able to navigate and understand this site. I hope to include the jQuery features that I’ve designed. I think the simplicity of the map on the bottom was a good solution to the problem I was having of not making the illustrations match the rest of the page. The color underneath the map will continue down the page to symbolize to the user (if their browser is larger) that they are not able to scroll down but rather horizontally. I did design this keeping 1024×768 screen display in mind because that’s usually something I struggle with. I kept switching to check if everything could be seen, because for this kind of event there is a broad audience and I can’t expect everyone to have large format computer screens. Overall, I’m very happy with this website. I think it came together well and meets the objectives that I had stated at the beginning of the project; it portrays a fun event, although it’s about something serious it’s not a somber type of thing about mourning, it’s a celebration of life and a reason for the community, families, and friends to come together for a greater cause!

Development: The development of my event site came surprisingly easily. I didn’t run into too many problems. The jQuery was a bit difficult to implement at first but once it was explained to me a second time I understood it quite well. I did my best to make what text I could live text and not text as image. The bottom footer was giving me a bit of trouble but I got it to function the way I wanted it to. Overall, I’m very happy with my site. I didn’t have to change many things in the process of developing. I also conducted some usability testing on my grandparents and some other older people, and they were able to figure out how to navigate the page using the navigation menu and the horizontal scrolling without my telling them to do so.
Here is the link for the working website: Light the Night
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s