https://github.com/jillmpla/runventure_dev_process
Project Overview for the RunVenture fitness app.
https://github.com/jillmpla/runventure_dev_process
case-study design documentation
Last synced: 15 days ago
JSON representation
Project Overview for the RunVenture fitness app.
- Host: GitHub
- URL: https://github.com/jillmpla/runventure_dev_process
- Owner: jillmpla
- Created: 2025-05-25T00:28:21.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-08-22T01:03:08.000Z (6 months ago)
- Last Synced: 2025-10-20T06:35:49.060Z (4 months ago)
- Topics: case-study, design, documentation
- Homepage: https://www.runventureapp.com/
- Size: 29.4 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 📁 Project Overview
RunVenture is a lightweight fitness tracking app focused on running, inspired by MapMyRun.com. The project began with a detailed analysis of MapMyRun’s web and mobile platforms, followed by redesign, prototyping, usability testing, and full development in React.js.
Built with React.js and multiple APIs, RunVenture enhances the running experience with route planning, live GPS tracking, Spotify integration, social challenges, training plans, and personalized run summaries. All user data is stored locally using localStorage, making it simple to test without a backend.
The final product delivers **five major feature enhancements** compared to MapMyRun.com, along with improved visual design and usability:
- 🗺️ **Route Planning & Conditions** – interactive maps with difficulty, surface type, elevation, and traffic
- 📍 **Live GPS Run Tracking** – real-time stats with integrated Google Maps
- 🎵 **Spotify Integration** – in-app music playback with playlist selection
- 🤝 **Social Challenges** – community-driven challenges with progress sharing
- 🏋️ **Training Plans** – personalized, editable plans with performance tracking
---
### 🎨 Figma Prototype
Before moving into development, I created wireframes and then built a fully interactive prototype in **Figma**.
🔗 [Figma Prototype](https://www.figma.com/design/6BvCH0NM26yDG286LXLDhb/RunVenture---Final-Prototype?node-id=19-286&p=f)
---
### 🚀 React.js Prototype
🔗 [RunVenture Live Prototype](https://runventureapp.com)
🔗 [Main GitHub Repository](https://github.com/jillmpla/runventure)
- Use any email and any password to create a test account (no real authentication).
- Login info is stored locally in your browser for demo purposes only.
- Once signed in, you’ll be redirected to a personalized dashboard to explore features like route tracking, training plans, and more.
⚠️ *Note: This is a prototype intended for demonstration and testing only. Do not use real credentials.*
---
### 📖 Case Study: From MapMyRun to RunVenture
The project began with a detailed **design critique of MapMyRun.com**, where I identified usability issues, visual inconsistencies, and opportunities for improved user engagement. Building on these insights, I developed the **RunVenture concept:** a fitness app designed to provide a more seamless running experience by integrating **Google Maps** for route planning and **Spotify** for music personalization.
This case study traces the project's evolution:
- **Critique & Concept** → defining goals, user needs, and feature direction
- **Wireframing & Early Testing** → static wireframes, concept testing, and feedback reports
- **Interactive Prototyping** → building in Figma, usability testing sessions, and iteration
- **Development & Implementation** → translating design into a working React.js prototype
- **Final Delivery** → presenting findings, outcomes, and the final app prototype
---
### 📂 Folder Structure
Each folder contains key artifacts from a distinct phase of the project:
- **`1_Design_Critique_and_Conceptualization/`**
Contains a detailed design critique of MapMyRun.com and the initial design concept for RunVenture, laying the foundation for the app’s goals, user needs, and feature direction.
- **`2_Wireframing_and_PrePrototyping_Usability_Testing/`**
Includes the concept testing handout and PowerPoint presentation, wireframes, a PDF outlining updated features, and the full Pre-Usability Testing Report based on early user feedback.
- **`3_Interactive_Prototyping_and_Usability_Testing/`**
Documents the results from the next round of testing with the interactive prototype. Includes the Usability Testing Report, details on the final Figma prototype, the testing handout, and the presentation slides used during the sessions.
- **`4_Development_and_Implementation_with_Reactjs/`**
Contains a direct link to the main GitHub code repository - [Main GitHub Repository](https://github.com/jillmpla/runventure).
- **`5_Final_Presentation/`**
Includes the final project presentation deck summarizing the design process, testing outcomes, and final product features.
> 📌 These folders document the full design and development process, offering insight into the app’s evolution from **critique to concept to final product**.