Chummy Cakes Bakery

Chummy Cakes BakeryUser-Centered Information Design By Jacquelyn FarrarTable of ContentsStakeholder Overview .. 3Goals and Objectives ... 4User Demographics .. .. 5User Personas .. 6User Scenario ...9 Functional Specifications 10Content Assessment ... 15Architectural Map .. 21Wireframes . 22Main Global Interface 26Style Guide . 28Citation ... 29Contact Information ... 30

Stakeholder OverviewChummy Cakes Bakery is a local bakery that has grown in popularity and built a reputation for being one of the best bakeries in the city. The bakery is owned by two siblings, both of whom acquired the highest of degrees in Baking and Pastry Arts. Chummy Cakes Bakerys main success comes from the cakes they design for events and other special occasions, such as birthdays and graduations. With help of the siblings family members in the day to day operations of the business they have become the go to place for local families and businesses. Chummy Cakes Bakery has been in business for a little over three years and wants to update their web site to help expand their market to the surrounding areas.3Goals and ObjectivesThere arent many bakeries in the area that allow their customers to build and customize cakes online and Chummy Cakes Bakery wants to be one of the firsts. Chummy Cakes Bakerys web site will give their customers complete control over the design of the cakes for their special day from the comfort of their own homes or offices. The web site will be packed with a variety of cake options, from the size of the cake to the color of the frosting, as well as some of the bakerys most popular designs. The goal of the web site is to allow the users to tap into their imagination and create a cake to remember using the tools provided.

4User DemographicsThe target users of the web site are young to middle aged women, ages 18 35, living within a 50 mile radius of the bakery. There are a lot of major events that typically occur in this age range that would be a cause for celebration, such as, graduating high school and college, having a baby, and getting married, and women are the ones who usually do the planning. The women are creative people who are always looking to express themselves and their ideas. They are internet savvy, usually spending a great portion of their day on a computer, Tablet, or Smartphone. A large majority of the users are business women who are looking to complete an important task or two without the hassle of leaving their home or office. 5User Personas

6User Personas (cont.)

7User Personas (cont.)

8User ScenarioAnne types the bakerys url into her web browser. When the homepage loads she looks over the page and her eyes rest on the slide show. After briefly looking at the images she scans the navigation for a link to click. Her first thought is to click on Cakes and she quickly realizes that she should have clicked on Customize Your Cake. Once on the Customize Your Cake page, she reads the short instructions and clicks the button to begin. She likes that she can view a preview of the options in the window before she selects them by hovering over the image with her mouse. She thinks it is an easy process and is happy with how her anniversary cake turned out.9Functional SpecificationsMeeting the Objectives The objectives of the Chummy Cakes Bakery web site will be met by adding a customization page to the existing list of pages the web site already contains. The newly added page is to appeal to the customers whom are looking to be in control of their design and express themselves creatively. The web site will keep the companys neutral color scheme it has become known for to give its customers a sense of familiarity. A logo will be created to establish the companys branding identity. To ensure the user can move easily throughout the web site it will contain a global navigational menu. An updated shopping cart will also be incorporated to give the users the ease of paying online.

10Functional Specifications (cont.)HomepageThe Homepage of the web site will contain the companys logo in the top left corner of the page. The logo will be present on all of the pages and will contain a hyperlink that returns the user to the Homepage when its clicked. The companys name will be centered at the top of the page and the global navigation menu will run horizontally beneath it. The global navigation menu will store the following links: Home, Cakes, Cookies, Pies, Customize Your Cake, About, Contact, and Shopping Cart. The body of the homepage will have a flash animation of a few of the bakerys cake creations and other baked goods. It will also have the companys welcome text.

11The Cakes, Cookies, and Pies PagesWhen users visit each of these pages in the web site they will see pictures of the items on the left side of the page. Next to each picture, the name of the item will be present along with the items description. There will be a drop down menu on the right side of each item that will allow users to select the quantity of the items they want to purchase. Once the quantity is selected, the users will have the option to add the item to the shopping cart by pressing a button next to the drop down menu. When the item has been successfully added, the users will receive the option to continue shopping or finish and pay. If the user selects continue shopping the screen will return to the previous page. If the user chooses finish and pay the screen will go to the shopping cart page where she will be able to enter her information.

Functional Specifications (cont.)Functional Specifications (cont.)Customize Your CakeUsers visiting the Customize Your Cake page will be greeted with an interactive design with a button to get started. When the users press the button, a preview window will appear on the screen. At the top of the window, the users will see the number of steps in the design process and the number of the current step will be highlighted. On the left side of the screen the users will see options with the different sizes of cakes. The users will be able to hover over the options to view them in the preview window before making their selections. There will be a Next button beneath the options on each step in the process that the users will have to select to move on. When the users click the Next button, the options on the left will change to cake flavors. These flavors will have their names and descriptions and the users will be able choose the flavors and use their mouse in the preview window to change the flavor arrangement in the cake.13 Customize Your Cake (cont.)The next step in the process will give the users frosting options and contain images of the bakerys most popular designs. The users will see the designs in the preview window as they hover over the images. Next, a text box will appear that the users will use to enter a name and/or phrase. The user will use the mouse to position the text on the cake. Beneath the text box will be color options that will allow users to change the color of each part of the cake they click on in the preview window. The users will then click on a Finish button that will transfer them to the Shopping Cart page where they can enter their payment information. At the bottom of the page, beneath the interactive design, will be an Appointment field that will allow users to set up a time to meet with the bakery if they have a design they are unable to create online.Functional Specifications (cont.)Content AssessmentMeeting the Objective, Content Requirements, and Interactive Features Tables 15Project FeatureHow will the feature be implemented?What concerns do we have for this feature?ContentNavigationA global navigation bar will run horizontally across the top of the page to ensure the user can move easily throughout the web site. The navigation bar will have the following links:HomeCakesCookiesPiesCustomize Your CakeAboutContactShopping Cart

HTML, CSSLogoThe companys logo will be present in the top left corner of each page and will link back to the Homepage.HTML, CSS Log in fieldThe log in field will have two boxes, one for the username and one for the password. Below the username field will be a box the user can check to stay logged in. The log in field will be placed above the navigation bar, on the right.A concern for this feature is ensuring the log in process is secure.

HTML, CSS

Meeting the Objectives 16Project FeatureHow will the feature be implemented?What concerns do we have for this feature?ContentSlide ShowThe Flash animation displaying the bakerys cake creations and other baked goods will be centered in the body of the Homepage. One concern we have for this feature is how quickly it will take to load.HTML, CSS Custom Cake DesignerThe cake designer will be centered on the Customize Your Cake page. Users will be able to see their design as theyre creating it in a preview window. The design options will be on the left of the preview window and the number of steps in the design process will run across the top of the designer. The design options will change after each step.This designer has to be glitch-free, easy to use and cannot be slow loading.HTML, JavaScriptShopping CartThe Shopping Cart will update showing each new item every time an item is added to it. The Summary Window on the right side of the page will show an updated total after each new item is added. This feature cannot contain any errors in the number of items in the cart or in the total.HTML, CSS, JavaScript Meeting the Objectives (cont.) 17AssetFormatDescriptionAssociated Assets/MediaOther InformationCompany NameTextCentered, at the top of the page above the navigation.HTML, CSSMay be created in Adobe Illustrator or PhotoshopNavigationHyperlinks Will take users to the different pages of the web site.HTML, CSSLogo.png, .gif, or .jpg Positioned in top, left corner of web site. HTML, CSS Must contain a link to the Homepage. Log in FieldText, textboxAllows users to load their personal information for faster checkout. Positioned on the top, right side of the page above the navigationHTML, CSS Headline and SloganTextPositioned in the body of the Homepage framing the Slide ShowHTML, CSSMay be created in Adobe Illustrator or Photoshop. Baked Goods Images.jpeg or .pngPhotos of Cakes, Cookies, and Pies. Positioned on the left side of each of those pages.CSSBaked Goods DescriptionsTextThe description of each item on the Cakes, Cookies, and Pies pages. Text positioned on the right of each item.HTML, CSS18Content Requirements AssetFormatDescriptionAssociated Assets/MediaOther InformationContact Page LinkHypertextGives users easy access to contact information. The link will be placed on the bottom, right side of pages HTML, CSSAppointment FormText, textboxAllows user to set up an appointment. The appointment form will appear under the custom cake designerHTML, CSSBakery HistoryTextBrief background on the Bakery. Text centered on the About page.HTML, CSSContact InformationText, textboxThe telephone number, street address, and email address of the bakery on the Contact page. Textboxes will be provided so users can send an email from the page. HTML, CSSCheckout PageText, textboxUsers will be able to enter their personal information to pay for their items.HTML, CSS, JavaScriptContent Requirements (cont.) 19FeaturePageWhat can users see and do?User log inGlobalUsers will see two textboxes with a login button next to it. They can enter their username and password and click the button to login.Drop-down menusCake, Cookies, and Pies pagesThe drop-down menus will be to the right of the item descriptions. The users will be able to click the arrow on the menu to select how many of the product they want to purchase. An Add to Cart button will be present next to the menus. Custom Cake DesignerCustomize Your CakeUsers will see checkboxes next to the designing options. They will see an enlarged image in the preview window when they hover over the options with their mouse. There will be a Next button under the options to move on to the next step. The users will see a textbox to enter text in the design and the users will be able to position the text using their mouse.Appointment fieldCustomize Your CakeUsers will see textboxes and they will be able to enter their name and number and pick a date and time for an appointment. There will be a Submit button under the appointment field.Email field Contact Users will see textboxes and they will be able to enter their email address and a comment or question. There will be a Send button beneath the textboxes.CheckoutShopping CartThe users will see textboxes and will be able to enter payment information. They will see Yes and No buttons when asked if they want to save their information for future use. There will be a Submit button at the bottom of the page. Print PageShopping CartThe user will see a print link on the top of the page after submitting their checkout information.Interactive Features 20

21Wireframe Homepage #122

Wireframe Customize Your Cake #123Wireframe Homepage #224

Wireframe Customize Your Cake #225Main Global Interface - Homepage26(DCL)

Main Global Interface Customize Your Cake27

28

CitationsDCL. Buddy's Cake Creations. Digital image. TLC: Family, Home, Style, Cooking, Weddings. Discovery Communications, LLC, n.d. Web. 23 June 2012. 29Contact InformationJacquelyn Farrar1310 Woodbend Dr. Stone Mountain, GA 30083jacquelynfarrar129@stu.aii.edu(404) 553-3537