https://stevenowen.github.io/wild-blodyn

Wild Blodyn (...that's flower in Welsh!) is a website for the North Wales based florist Bethann Owen.

The website's goal is to showcase Bethann's floristry skills for potential new customers and offer design inspiration for current customers. The site also aims to give previous customers a reason to return.

It is intended to be a central hub for the Wild Blodyn brand which will link multiple social media presences and give users the means to contact Bethann and engage her services.

1. UX
   1. Strategy
   2. Scope
   3. Structure
   4. Skeleton
2. Features
   1. Existing
   2. Future
3. Technologies Used
4. Development
   1. Tools Users
   2. Testing
   3. Deployment
5. Credits
   1. Content
   2. Media
   3. Acknowledgements

The primary focus for this website is to showcase Bethann's work to potential customers and develop the reputation of Wild Blodyn and Bethann herself. Whilst Wild Blodyn is present across social media, a custom website can be styled in the image of a brand in ways those platforms cannot. The key goals of this website are to increase awareness of Wild Blodyn and ultimately increase customers for Bethann.

The target audience has been identified by Bethann as people who are interested in the artistry of flower arranging and are looking for more from their flowers than what supermarkets and petrol stations have to offer. When considering this target audience, the images of flower arrangements become the key elements of the site and an 'about me' section that speaks to Bethann's love for the craft will add value. Technical data or any other verbiage that does not speak passionately about the subject should be avoided

The site is hoping to serve users that like to share and distribute their internet finds via their own social media accounts. Adding in the ability to do this will not only satisfy the visitor's requirements, but it will also increase brand awareness which is a goal of the site.

The primary goals of this website are:

• Increasing awareness of the brand
• Showcasing work
• Increasing interactions with existing and potential customers

Some other goals that were considered were dynamic seasonal price lists and the taking of online orders. Both of these features are of relatively low importance when compared to the goals above and both would be difficult to implement in the available time - for these reasons they have been excluded from the scope of this project.

Some example user stories which help outline the scope of this project:

As a customer, I want to view a series of photos that demonstrate versatility and ability in flower arranging.

As a customer, I want to the site to demonstrate the dates and events that are catered for.

As a customer, I want to either enter details into a contact page or be able to click through to social media in order to make contact and engage services.

As someone who is passionate about flower arranging, I want the ability to browse a variety of photos and easily share them to my social media timeline.

There will be four distinct sections to the site:

• 'About Me'
• Gallery
• Dates and Events Catered For
• Contact Page

Given the target audience, a single page, linear experience would be best suited. The site will be navigated in a similar way to a social media site's timeline. As the user scrolls down the page, the sections flow in a logical order: 'About Me' is a brief introduction, the gallery is demonstration of ability. The dates and events section gives customers the inspiration and reason to place an order and the contact form at the end gives them the ability to reach out and take the first steps in engaging the client's services.

Wireframes on Imgur

• Large prominent logo at top of page above a navigation menu that becomes sticky so is persistent when browsing

• Welcome message and photo (on suitably sized devices) from Bethann of Wild Blodyn

• Image gallery demonstrating ability and versatility of the client

• 'Calendar' in the style of a timeline which shows the events which are catered for throughout the year

• Contact form - temporarily posts to Code Institute form dump: https://formdump.codeinstitute.net

• Social media links

• Contact form that delivers message to client

• Sign up for a mailing list

• Social media share buttons on all images in the gallery

• HTML5
• CSS3
• JavaScript (for sticky navigation bar)

The IDE used was Visual Studio Code with the following plugins:

• Auto Close Tag
• Code Spell Checker
• Gitmoji
• Live Server
• Prettier

GitHub was used for version control and Balsamiq was used in the development process to produce wireframes.

Chrome Developer Tools were used throughout.

Page was tested using Chrome (desktop and mobile), Microsoft Edge and Mozilla Firefox.

During testing any bugs found were recorded in GitHub issues. Then referenced in the commit message once fixed or closed manually whilst referencing the relevant commit reference.

This site was deployed as a GitHub page.

Welcome section words and the contents of the calendar cards were provided by Wild Blodyn.

All media (including the logo) was supplied by Wild Blodyn. Wild Blodyn are the sole owner of all images and graphics used.