Milestone Project - RunFinder

Developer: Seaghan Brosnan

• Project Brief
• Technologies
• UXD
• Wireframes
• Deployment
• Tests and Fixes

Project Brief

In this project, you'll build an interactive front-end site.

The site should respond to the users' actions, allowing users to actively engage with data, alter the way the site displays the information to achieve their preferred goals.

• Create a site that calls on the Google Maps API to allow users to search for their next running event.

THe site will help users:

• Naviagte through each event on the map
• Find running events
• Provide event locations in a manner that is visually appealing for your user (by drawing on the skills you have learned in User-Centric Frontend Development)

Technologies and Dependencies

• HTML5
• CSS3
• Bootstrap v3.3.7
• • https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
• • https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
• Font Awesome v4.7.0
• • https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

User Stories & User Experience Design

Strategy	Focus	User Needs	Business Objectives
	What are you aiming to achieve?	Find running events	Increase users
		Find locations of running events	Social currency
	For whom?	Users intersted in runnig and fitness	Increase brand awareness
	Target Audience?

Scope	Focus	Functional Specification	Content Requirements
	Which features?	Navigate - use the map to naviagte events	View events by country
	What’s on the table?	Discover - use the map to discover events	Navigate to an event using the map
		Explore - use the map to explore events	Display event names by hovering over the marker

Structure	Focus	Interaction Design	Information Architecture
	How is the information structured?	Where am I? / How did I get here? / What can I do here? / Where can I go?	Organizational / Navigational schemas (dashboard
			Home - landing page
	How is it logically grouped?	Mobile - landing page and button to map	Map - Find runnign event locations
		Desktop - landing page and button to map	Contact Us - book a consultation

Skeleton	Focus	Interface Design	Navigational Design	Information Design
	How will the information be represented?	See wireframes	Landing Page
			RunFinder map
	How will the user navigate to the information and features?		Contact Us

Surface	Focus	Visual Design
	What will the finished product look like?	Fonts: @import url('https://github.com/brosnans/milestone-project-2/tree/master/assets/css');
		fc0330
	What colours, typography and design elements will be used?	ff7e40
		eb7d34

Wireframes

https://github.com/brosnans/milestone-project-2/blob/master/assets/Wireframe%20%231.jpg

https://github.com/brosnans/milestone-project-2/blob/master/assets/Wireframe%20%232.jpg

https://github.com/brosnans/milestone-project-2/blob/master/assets/Wireframe%20%233.jpg

Deployed to Github Pages

• Project repository: https://github.com/brosnans/milestone-project-2
• Project link: https://brosnans.github.io/milestone-project-2/
• Go to project repo settings on Github
• Select master branch and click save

Tests and Fixes

HTML Validator Results

CSS Validator Results

Mobile

Tested on iPhone 5, 6, 7, 8 and X

PROBLEM

FIX

Desktop

Tested on Chrome, Safari, Firefox

Acknowledgements

This is for educational use.

All content on this project has been written and created by Seaghan Brosnan.

Credits

Media

Images used on landing page taken from https://www.itl.cat/pngfile/big/213-2136767_free-running-girl-jogging.jpg