BCycle Mobile App Rewrite

  • This complete app refactor project involved rewriting the entire code base of the BCycle Mobile app. Throughout the project, I served as project manager, business analyst, and UI/UX designer.

    I managed the project from inception to delivery, ensuring productive cross-functional collaboration, alignment with business objectives, timely execution, and active feedback channels to inform future improvements.

    This project brought with it a wealth of opportunities for me in UI/UX design, project management, data analysis, and strategy to future-proof the new app. I was fortunate to work directly with the UI/UX Design Manager to learn the principles of UI/UX design and to develop my skills as a designer while sharpening my analysis skills and approaching questions from multiple perspectives.

  • To start, I detailed all existing mobile app functionality, mapping it to future-state screen flows. This stage of the project also included analysis of existing features within the app to determine what would be added, omitted, or changed. This helped the team outline the baseline requirements for release on a tight timeline, as well as the nice-to-haves that would be added with future iterations of the app.

    I documented each decision and potential risk to simplify decision making down the road and foster transparency among the team. This made for easier discussions along the way when questions about design, functionality, or timeline came up.

    Each week, I provided a project update to senior leadership. I made these updates honest, sometimes telling leadership things they didn’t want to hear. Before important releases, this was crucial in procuring necessary resources without sacrificing the project timeline.

    This documentation provided a strong foundation for the project and included all members of the team, supporting transparent and open communication within the team and throughout the company.

  • As part of this project, I identified cross-system dependencies to optimize development timelines and broke large initiatives into manageable releases. This sped up the delivery timeline as software engineers were able to specialize in certain features or areas of the app. Digging deeper into the code, other dependencies cropped up along the way, requiring real-time adjustments and, at times, a full re-work of a feature.

    There were dependencies external to the software team, too. Working with bike share operators across the country, I navigated complex feature roll-outs required per operations contracts. These features added complexity to the rewrite schedule, requiring extra attention and development time alongside an already huge project.

  • As project manager, business analyst, and designer on this project, I did not have the final say on product decisions. I did, however, bring a wealth of options to the table for the decision makers.

    I analyzed current product usage, tested prototypes, conducted user experience research, and created informed mockups reflecting 3-5 ways of approaching a particular feature. I knew the ins and outs of the entire app in terms of both functionality and design. I presented detailed reports to support my recommendations for product decisions and backed up my suggestions and designs with thorough research and data. Feature designs would undergo a design review with the entire team, hashing out each detail as well as the technical feasibility of the proposed options before a final decision was made.

  • This project posed the opportunity for a modern re-design of the app. Excited to make the app as user-friendly as possible, I used the analysis of existing functionality to support team decision making about what should be kept, changed, removed, or added.

    I systematized screen flows in Figma, leveraging reusable components to create consistency across iterations and to make changes quickly and easily upon receiving feedback from the development team and leadership.

    One goal for the new app was to make the signup process less than a minute long. I worked with developers to optimize the app loading time and reduce the number of clicks required for a user to create an account and check out a bike. I tested different screen flows with volunteer testers (some familiar with BCycle and others not) to identify pain points in the user experience and improve the final designs.

    Clear and concise app walkthroughs show the user how the bike share works and with signup taking less than a minute, checking out a bike from a BCycle station has never been easier.

    I managed design documentation, worked closely with engineers, and ensured each increment delivered measurable value, ultimately increasing app adoption from 83% to 96%. This improvement facilitates access to bike share as an alternative form of transportation and the modernized app makes the platform more approachable to those previously unfamiliar with the product.

    The designs and ideas for this project are property of BCycle and therefore only publicly-released designs are shown here. See below for a few examples of the designs before and after the rewrite.

  • Throughout this app rewrite project, I gathered feedback from bike share operators and end users (those riding BCycle bikes in cities across the US) via interviews, polls, and virtual "suggestion boxes" to inform future work and system improvements from all perspectives.

    I combed through app reviews online and learned from bike share operators what improvements could still be made to improve users’ experience in their specific markets.

    This feedback informed decision making for future phases of the app and provided critical insight to current usability highlights and pain points. I brought this feedback to the development team and wrote detailed work items to address each improvement.

    Due to the fact that this is a private project designed for BCycle, these further development plans are not available for public distribution.

Before & After

A closer look at design decisions that transformed the BCycle app, making for a more modern and user-friendly interface and minimizing the number of steps it takes to utilize bike share.

Map Screen

The map screen is the general landing page within the app. From the map page, users plan their trips, take note of nearby stations, and see available bikes.

Before (left): the map screen provided users with the option to check out a bike, but all other information was effectively hidden without more clicking around. Station pins also did not provide available bike data when zoomed too far out of the map.

After (right): the map screen became a one-stop shop to see all relevant information with minimal clicks. Easy access to the Info and Support menus made getting help easy. The Profile icon indicates if the user is logged in or not, with the title “Sign In” if the user is not yet logged in. The Unlock button indicates if the user has an active pass, otherwise the button reads “Get a Pass” to avoid confusion. Users can simply click to see all pass options and purchase a pass before unlocking a bike.


Bike Checkout Modal

The bike checkout modal is the last step of the bike checkout process, and the last screen the user sees before they in theory would put their phone away and start cycling.

Before (left): the bike checkout modal blacked out the rest of the screen, preventing the user from seeing their whereabouts. With little additional information, some users were confused with what to do once they had already checked out a bike.

After (right): the bike checkout modal became a drawer, allowing the user to orient themselves with their current surroundings. A note about returning the bike to a dock reduced confusion among first-time users, making for a more seamless user experience.

Previous
Previous

Truckee BCycle Implementation