Page 1

A case study on creating a new website for Legacy Landscape Materials Inc.


Contents 1.

Creative Brief

2.

The Team

3.

Getting Started

4.

Content

5.

Use Cases

6.

Personas

7.

Card Sorting

8.

Site Map

9.

Style Tiles

10.

Wireframes

11.

Project Plan

12.

Building the Site

13.

Final Site


Creative Brief Overview Before starting, we presented a creative brief to give an overview of what we are doing. This lists what we plan on doing, and what the goals of the project are.

1

Overview

Re-designing a webpage for Legacy Landscape Materials Inc. The client’s goals are to have a more appealing webpage that is easily navigable and user friendly. We plan to stay in touch with the client roughly once a week by e-mail or phone and her response time will be a few days.

Team Members: Dylan Leakway, Aaron Scheidler, Adam Keen and Megan Fanelli Client Signature ____________________ Team Signatures ____________________ __________________________________ __________________________________

2

Target Audience & Message The target audience for Legacy Landscaping Materials Inc. is mainly landscapers and homeowners. However, the main focus will be to appeal more to homeowners and those looking to buy on a smaller scale.

__________________________________

3

Client Goal

Sandra’s main goal for her new website are to have the re-design be light and airy. She also wishes to have three main pages to her website displaying the three main aspects of her company. She also wished to have a coupon or some other way to let her know how many customers were accessing her through her new webpage. To help the re-design become more light and airy she requested new photos be taken (AAron Scheidler volunteered to take these photos) of her property and materials as well as a more suitable color scheme.

4

Creative Strategy

Through the use of use cases, site maps, wireframes, and style tiles we will be prioritizing the new webpage to be easily navigable as well as creating a light and airy theme. Concrete 5 will be used to create custom templates and themes to accomplish these goals. Sandra currently has hosting for the existing web-page, the new webpage will be placed on that hosting when our XZWRMK\Q[ÅVQ[PML

5

Market Place & Competition

Being that Sandra just started this local business recently she has had a hard time competing with large chains such as Lowe’s and Stauffer’s of Kissel Hill. Despite that fact that she is not as recognized as these larger companies our re-designed webpage will help to show her competitive pricing, most of which is better than her competition. Customers visiting Sandra will see the extensive customer service she provides along with her competetive pricing and see that they can not get this service anywhere else!


The Team Megan Fanelli Megan was the first graphic designer on the team and took the lead as the Project Coordinator. She made sure everyone was working on their assignments and that everything got done on time.

Aaron Scheidler The second graphic designer on the team and the photographer, Aaron was in charge of taking and editing pictures. Healong with Megan designed the site and implemented the custom CSS.

Dylan Leakway The first programer on the team, Dylan was in charge of managing the database and manipulating the PHP code.

Adam Keen The first programer on the team, Dylan was in charge of managing the database and manipulating the PHP code.

Sandra Thomas The client and the owner of Legacy Landscape Materials Inc. Sandra was the person we built the site for. Using the direction she gave us, we built a site that is well designed and easily manageable.


Getting Started Concrete5 To get started, we first had to get familiar with Concrete5: the web content managing system that we would be using. This was easier said than done. We found many aspects of Concrete5 to be confusing, but we got a website for our team (which was named Gynu Force [though I am still not sure why]) designed.

Ypu can visit this site at: http://cs.millersville.edu/~CSCI406A/


Content Inventory What will be on the site? In interviews witn Sandra, we figured out what all needed to be on the site. From there, we created our content inventory to list everything that was needed, who had everything at that time and who was responsible for getting the rest of the content.

%2-3#-3$'-U#-325< %96#-3a$?#,&0<$?&-4"0&7#$V&3#56&9"$'-0E J#&*$'(a$%/%'$NPZ$b5287$B J#&*$V#*C#5"a$(<9&-$?#&QA&<L$B4&*$c##-L$B&52-$/0K#649#5L$V#,&-$>&-#996 .R#94"$*&<$-23$K&U#$U&98#"$8-19$<28$02*79#3#$<285$"63#$*&7 +&,#$ -&*#. !"#$%&"#$'( !"#$%&"#$)&*# /#012-$-&*#. %2-3#-3$4#"056712B99 B99 %2*7&-<$92,2 ?22Q6-,$87$+5606-,L$?22Q6-,$87$ +524803"L$?22Q6-,$;25$"7#06R0$7524803L$ HLMLILNLHOLHFL )#A$!"#5$%2*7&56-,$+560#"L$S463$+&,#"L$ !74&3#$+524803$?6"3L$!74&3#$+560#" MP ?22Q6-,$87$+5606-,L$?22Q6-,$87$ +524803"L$?22Q6-,$;25$"7#06R0$7524803L$ )#A$!"#5$%2*7&56-,$+560#"L$)#A$ HLMLILNLOLHOLH +524803"L$S463$+&,#"L$!74&3#$+524803$ FLMP ?6"3L$!74&3#$+560#" ?22Q6-,$87$+524803"L$?22Q6-,$;25$ "7#06R0$7524803L$!"#5$A&-3"$32$"3&C9#$&$ K25"#L$!"#5$A&-3"$32$K28"#$&$U#K609#L$ MLILYLZLOLHOLH -#A$7524803"L$S463$+&,#"L$!74&3#$ FLMH +524803$?6"3L$!792&4$+K232" ?22Q6-,$87$+5606-,L$?22Q6-,$87$ +524803"L$?22Q6-,$;25$"7#06R0$7524803L$ )#A$!"#5$%2*7&56-,$+560#"L$)#A$ HLMLILNLOLHOLH +524803"L$S463$+&,#"L$!74&3#$+524803$ FLMP ?6"3L$!74&3#$+560#"

YLZLHO

!"#5$A&-3"$32$"3&C9#$&$K25"#L$!"#5$ A&-3"$32$K28"#$&$U#K609#L$S463$+&,#"

YLHO

!"#5$A&-3"$32$"3&C9#$&$K25"#L$S463$+&,#" !"#5$A&-3"$32$K28"#$&$U#K609#L$S463$ +&,#" ZLHO %K#0Q$?20&12-L$%K#0Q$\8"6-#""$'-;2L$ S463$+&,#" FLHYLHO HHLHMLHILMILM %K#0Q6-,$3K#$C92,L$%2**#-3L$/K&5#L$ N !74&3#$\92,L$^#"72-4$32$_8#56#"

HNLHO HZLHO `LMM HPLHO

(#6U#5<$'-;2L$S463$+&,#" +&<*#-3$'-;2L$S463$+&,#" /7#06&9$(#&9"LB4U#51"#$&$"7#06&9 ?22Q$87$02-3&03$6-;2L$S463$+&,#"

+524803$?6"3

%855#-3$920&12-$:6;$ &-<= >69#:"= (527C2D 92,2E7-,

(527C2D

+560#T?6"3"T%58"K#4T?6*#"32-#E74;$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$+560#T ?6"3"T(#025&1U#T/32-#E74;$+560#T?6"3"TV6"0#99&-#28"E74;$ +560#T?6"3"TJ27"269WV890KE74;$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$+560#T ?6"3"TX6-3#5T+524803"E74;

/7#06R0$7524803$ 4#"056712-"

FGHIGHI /&-45&$JK2*&"

/&-45&$JK2*&"

+524803$+K232,5&7K"

B&52-$/0K#649#5

+560#$?6"3$2;$+524803" (527C2D BU&69&C9#$+&0Q&,#"$;25$ C2&546-,$&-4$ 7&5Q6-,G"325&,# (#"056712-$;25$[25"#$ \2&546-, (527C2D (#"056712-$;25$ +&5Q6-,$&-4$/325&,# (527C2D (#"056712-$2;$ 02*7&-<$&-4$K6"325<$

+560#T?6"3"T%58"K#4T?6*#"32-#E74;$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$+560#T ?6"3"T(#025&1U#T/32-#E74;$+560#T?6"3"TV6"0#99&-#28"E74;$ +560#T?6"3"TJ27"269WV890KE74;$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$+560#T ?6"3"TX6-3#5T+524803"E74;

FGHIGHI /&-45&$JK2*&"

[25"#\2&546-,(#"056712-E5]

FGHOGHI /&-45&$JK2*&"

[25"#\2&546-,(#"056712-E5]

FGHOGHI /&-45&$JK2*&"

/&-45&$JK2*&"

/&-45&$JK2*&"

>65"3$\92,$+2"3"

(#96U#5<$(#"056712+&<*#-3$@712-" /7#06&9$(#&9 %2-3&03$'-;2

?&"3$874&3#4 @A-#5 FGHIGHI /&-45&$JK2*&"

/&-45&$JK2*&"

(527C2D

+560#T?6"3"T%58"K#4T?6*#"32-#E74;$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$+560#T ?6"3"T(#025&1U#T/32-#E74;$+560#T?6"3"TV6"0#99&-#28"E74;$ +560#T?6"3"TJ27"269WV890KE74;$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$+560#T ?6"3"TX6-3#5T+524803"E74;

FGHIGHO /&-45&$JK2*&" /&-45&$JK2*&" /&-45&$JK2*&" /&-45&$JK2*&"

%2**#-3"


Getting the Content Taking Pictures Since Aaron is a photographer as well as a designer, we decided to take pictures of the products ourselves. This included a trip for the entire team to Legacy Landscaping Materials to not only take pictures, but to also get a better idea of what all they offer. During this visit, we took approximately 400 pictures.

Product List With the pictures taken care of, we just needed Sandra to send us her list of products and body text for the home site. She got the list of products to us rather quickly, but their descriptions and body text took a bit longer. However, She did get them to us with plenty of time to get everything done.


Use Cases How will people use the site? In order to get an idea of how to design the site, we made a list of use cases. This is a list of things that a person visiting the site will want to do. At the beginning, Megan and Aaron had no clue what these were or how to do them, so Dylan and Adam took the lead.


Personas Who will be visiting the site? Personas are made up people who would be using the site that we would make. This gives us an idea of who we need to design the site for and how technically adapt they are. Megan and Aaron took the lead on these creating the profiles and making up clients.

Jim - Contractor

Mark - Homeowner

Likes and Dislikes Age: 36 Gender: Male Demographics: Rural Pennsylvania Family Life: Married with two children

Age: 26 Gender: Male Demographics: Pennsylvania Suburbs Family Life: Married with two dogs Profession: Insurance Salesman

Jim enjoys Auto and Home repair, outdoor activities with his family and watching baseball is one of his favorite pastimes. One of Jim’s biggest dislikes is chaos. He is always on time and tardiness is unacceptable.

Background Some of Jim’s favorite places to go online are ESPN to keep up with avid baseball interest in baseball, Kelly bluebook so he can compare prices as he finishes up auto projects and Jim loves using Google to find local destinations to buy materials for building and landscaping. Jim always wants a personal touch and quick service no matter who he is working with. To run his business properly Jim needs good prices from a reliable and consistent vendor!

Mark and his wife enjoy going out on the town, visiting friends and hosting gatherings as often as possible! Mark dislikes wait times in lines and online if he is required to wait while a website is loading.

Background Some of Mark’s favorite places to go online are social media websites but he also loves using websites such as stumble upon and tumbler to get great ideas for at home do it yourself projects. Mark seems to always want help with a specific landscaping project he also wants the materials to be delivered and relatively quickly. Being young Mark is also in need of good pricing for any materials he may buy.

Goals

Goals S S S S

Likes and Dislikes

S S S S

Personal Customer Service Reasonable Prices Quick service A long term relationship with a vendor

“I enjoy using small businesses for my products because of the personal attention and customer service I receive. The downfall is they may not always carry the specific product I need.”

“As a homeowner I am looking for tips and tricks to landscaping, I have a large yard to keep up with and not much knowledge on what products to use or how to properly use them”

Gina - Young Proffesional Age: 24 Gender: Female Demographics: City Suburbs Family Life: Single, lives alone Profession: Nurse, just out of school

Informative Customer Service Being able to compare prices quickly Finding flexible delivery services Materials to be delivered within a week

Likes and Dislikes Gine enjoys some pretty typical passtimes for a woman of her age including, shopping, cooking, visiting her family and entertaining friends whenevery the opportunity arrises. Some of her dislikes include clutter, weeds, noisy neighbors. She likes to have things neat and organized whenever possible!

Background A few of Gina’s favorite places to go online include clothings stores, the daily news and pintrest to find great ideas for do it yourself projects that can stay within her small budget. This includes interior design as well as keeping up with the small yard she has outside of her townhome. She also leans towards using her tablet and labtop whenever possible rather than her phone.

Goals S Small quantites but good quality S Receiving materials quickly S Local, help service to help find a great product

“I always seem to have a few gardening projects as well as interior projects and it is nice to have a local business nearby to help me find the products I need at a great quality and price!”


Card Sorting Where does everything go? After we knew what all will be on the site, we did card sorting with Sandra and a few other people to see where they would put different items. This is so we get a good idea of where people expect to see certain things.


Site Map Site Layout With the results from our card sorting, Megan and Aaron started to make a Site Map. This would become the official layout of the site. It was durrin the design of this that Sandra decided to put “Horse Boarding” and “Vehicle Storage” back into the site after she said she did not wanted them. Despite this last minute change, it was completed on time.

HOME

PRODUCTS/ SERVICES

CONTACT US

Delivery

Contact Information

Topsoil/ Mulch

Topsoil/ Map Mulch

Decorative Stone Crushed Stone

Blog Posts

Other Services

Horse Boarding Horse Boarding Content Care Packages/ Horse Products

Team Signatures:

Vehicle Storage Vehicle Storage Content

Seasonal Products Misc.

BLOG

Client Signatures:

Care Packages/ Vehicle Products


Style Tiles Site Design

Textures

The style tiles were prliminary designs for how the site will look. Both Megan and Aaron designed one and despite looking similar, Sandra wanted a combination of the two for the site.

Heading Noticia Text, Regular

This is a sub-heading Arvo, Regular

Megan

Afta Sans, Regular Tired of mulching every year? Would you raer apply a once and done product and add an original lk to your propey? Then our large selecon of decorave stones may be just what youâ&#x20AC;&#x2122;re lking for. We have 5 kinds of decorave stone in various sizes to give you 12 choices total.

This is a text link

Button Stac State

Button Hover State

Aaron


Wireframes Page Layouts Wireframes were probably one of the most imprtant parts of the design. They gave a visual representation of what Megan and Aaron had determined was the best layout designs to Dylan and Adam. Once they had these, the two of them started working with Concrete5 and the code to create these layouts.


Project Plan What is left to do? At this point, Dylan and Adam had created a project plan listing everything that needed done and who would do each of these tasks. Using this plan, we divided tasks and got to work making the site.


Building the Site Constructing the final product By following the project plan, we were able to keep on schedule and get things done. Dylan and Adam were making custom blocks and laying out the site while Megan and Aaron were stylizing these elements and putting in content. Even though this was going well, we still ran into some proplems.

Problems with the main navigation caused us to change custom themes.

The footer would not always stay at the bottom of the page.


Final Site The end After nearly four months and lots of hours each week, we finished the site. Without the efforts of everyone involved and even some of whom were not a part of the group, the site would not have been completed.


Visit the finished site at: http://legacylandscapematerials.com/

Legacy Landscape Materials Inc.  

A case study on the design and building of a website for Legacy Landscape Materials Inc.

Read more
Read more
Similar to
Popular now
Just for you