{"id":110,"date":"2023-11-26T22:29:00","date_gmt":"2023-11-26T22:29:00","guid":{"rendered":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/?p=110"},"modified":"2024-03-13T13:53:42","modified_gmt":"2024-03-13T13:53:42","slug":"week-8-details-and-adjustments","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/bsc2a\/project-3-experience-website\/week-8-details-and-adjustments\/","title":{"rendered":"Details and Adjustments"},"content":{"rendered":"\n

Now I had a fluently developed design language for my website, including title and body typefaces, colours and layouts, I worked on filling in the details and creating a more fluent website.<\/p>\n\n\n\n

Info<\/strong><\/p>\n\n\n\n

I developed my information page of the website, allowing users to gather more information on the event. As I developed the page, I considered the three main tasks the information page needs to do.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
    \n
  1. Show the user more information, answering any questions they have<\/li>\n\n\n\n
  2. Allow the user to request more information if their question remains unanswered following looking on this page of the website<\/li>\n\n\n\n
  3. Book a ticket. The main CTA across the whole site still needs to stand on this page.<\/li>\n<\/ol>\n\n\n\n

    Starting with the when and where.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    At the top, centre and bold are answers to the two main questions: when and why. A matching map which I modified using blending modes compliments this, giving the user context to the address. The user also has the option to open this in their default maps app, allowing them to get directions to the event in a way that best suits them.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Each info card was designed with hierarchy in mind, with the main information the card contains being the most attractive element, with the medium weighted text beneath containing more detail. I chose type for each button’s CTA specific to the specific function of the button rather than a generic ‘more info’, making each buttons purpose more obvious.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    When the button is pressed, the user is presented with more detailed information, as well as the option to receive more help. This allows the user to send a message through the ‘contact’ page of the site to get help from a human.<\/p>\n\n\n\n

    Also it’s worth noting at the bottom of the page is the main site’s CTA to encourage the user to purchase a wristband to the event.<\/p>\n\n\n\n

    Contact Page<\/strong><\/p>\n\n\n\n

    I designed a contact page to make getting human help as straight forward as possible.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    This contact page, while being straightforward provides a solid purpose. Allow users to pass on their requests to a human who will reply to them via Email.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    An interactive dropdown allows users to select their area of query.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    The user can then return home and continue to explore the site.<\/p>\n\n\n\n

    Booking Page<\/strong><\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    The booking page of the site allows users to see an overview of the tickets along with copy purposed to sell the products, rather than providing in-depth information. That is the purpose of the \u2018help\u2019 button, if the user still remains unsure about which wristbands they should purchase. Each interactive card allows users to input an amount and then proceed to their basket to checkout.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Now I had a fluently developed design language for my website, including title and body typefaces, colours and layouts, I worked on filling in the details and creating a more fluent website. Info I developed my information page of the website, allowing users to gather more information on the event. As I developed the page, […]<\/p>\n","protected":false},"author":1,"featured_media":118,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,11],"tags":[16],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/110"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/comments?post=110"}],"version-history":[{"count":3,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/110\/revisions"}],"predecessor-version":[{"id":174,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/110\/revisions\/174"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/media\/118"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/media?parent=110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/categories?post=110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/tags?post=110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}