Loader
Header Background

Running Log

UX/UI Lead

The main thing that sets this running log apart from the rest is the newsfeed aspect on its main page. The newsfeed allows for a user to easily see runs that people in their friend groups have logged. As a post collegiate runner, being able to see and interact with your friends as they run is a big motivator at times that it might be difficult to push myself.

The idea and implementation for this running log is from a fellow teammate of mine. I mocked up the UI/UX in my spare time, and he is currently moving forward in building the site with my designs.

The below screen is what a user sees when logging in. The left side bar holds important stats, the users groups, a leaderboard, and profile information. The rest of the screen is a newsfeed that updates each time a user logs a run. The feed shows the distance of the run and the time it took, any notes that they had, and space to comment on the run.

Project Image

The screen below is the users dashboard. This is where all of the stats from the runs that the user has logged are displayed. Stats include a graph of distance per day, and charts of distance per week, month, and overall. You can also use the countdown, or set a goal.

project2

Clicking on a day within the graph allows the user to see the details of the run, as well as notes they made and comments made by others. They are also able to reply to comments from this screen.

page 4

The calendar page provides a different view of your training, by displaying the distance each day on a calendar, and showing your weekly totals. You can also view past months and see what your training was like the previous season. Selecting a run allows the user to see the details of the run, as well as notes they made and comments made by others. They are also able to reply to comments from this screen.

page 5

The user is able to navigate to another users dashboard through clicking their name in comments, in the leaderboard, within a group, from the newsfeed, or by searching their name. The left bar will indicate whos page they are viewing. The user can navigate back to their page through the profile image in the top right of their screen.

page 6