5

Energy Level Tracker Case Study

Get on Google PlayGet on Appstore

About the project

Platforms

Android Robot

The Approach

Development Stack

  • React Native: We chose this framework for developing the mobile app as it offers cross-platform compatibility and a rich ecosystem of libraries.
  • Expo: We used Expo to streamline development and provide easy access to device features and APIs.
  • TypeScript: We employed TypeScript to enhance code quality, maintainability, and developer productivity by providing static type checking.
  • i18n: We integrated i18n from the start to enable seamless support for multiple languages.
  • Jest: We leveraged Jest for unit testing to ensure the reliability and stability of the app.
  • JIRA: We utilized JIRA as the project management tool for efficient task tracking and collaboration.
  • Git and GitHub Actions: We used Git and GitHub Actions for version control and continuous integration, enabling smooth collaboration among team members.
  • Visual Studio Code, Android Studio, Xcode, EAS, Fastlane: We used these development tools and environments to facilitate the coding process.

User-Centric Approach

To ensure a well-rounded user experience, we fleshed out user stories based on user personas for the Energy Level Tracker app. These stories defined the needs and expectations of the app's target users. We then designed a prototype user interface (UX) using Figma, allowing us to visualize and refine the app's usability and aesthetics before development began.

Results

Phase 1: Requirements

During this phase, we focused on capturing user requirements through user personas. We defined epics, representing high-level user goals, such as "A user wants to track their energy level so they can work out their peak times." These epics were then broken down into features with detailed acceptance criteria using the GIVEN/WHEN/THEN syntax. For example:

GIVEN the user has installed the app
AND has high energy
WHEN the user selects the high level
THEN the high level is persisted

Deliverables for this phase included:

  • User Personas
  • User Stories (Epics / Features / Acceptance Criteria)
  • Prototype
  • Logo & Icon for app

The usage of JIRA and Figma greatly facilitated the efficient capturing and management of user requirements.

Phase 2: Development

During the development phase, we implemented the features defined in the user stories using React Native and Expo, employing TypeScript for enhanced development efficiency and code quality.

Deliverables for this phase included:

  • Build Pipeline (DevOps)
  • Mobile App (Android & iPhone)

The frameworks and tools used in this phase were:

  • React Native
  • Expo
  • TypeScript
  • i18n
  • Jest
  • JIRA
  • Git
  • GitHub Actions
  • Visual Studio Code
  • Android Studio
  • Xcode
  • EAS
  • Fastlane

Phase 3: Deployment

In the final phase, we successfully deployed the Energy Level Tracker mobile app to the app stores, making it available for download on both Apple's App Store and Google's Play Store for iPhone and Android users, respectively. Additionally, we created a microsite to provide additional information about the app and promote its features.

About Raven Code