City Lockers:
Building a Mobile App from the Ground Up
City Lockers:
Building a Mobile App from the Ground Up
This class project began with a process of ideation, where a novel idea was developed into an application through a process of research and competitor analysis. The full UX design cycle was demonstrated through a project proposal and pitch followed by an iterative process of sitemapping and wireframing, testing, feedback and revision and, finally, with a functional interactive prototype.
In this imagined scenario, NeuCity is a startup based in Chicago, IL that has partnered with local governments and businesses to install rentable lockers in commuter-centric hubs of the city. NeuCity needs a simple and intuitive application that would allow users to reserve, rent and adjust rental time on the fly. The app must offer subscription options and a means of discovering locker hubs using a robust search functionality and location services. This application needs to support NeuCity’s goal of creating a simple and accessible user experience for their CityLocker initiative.
A fully realized mobile application with the following, minimum functionality:
Projected timeframe: 1 year - 1 year & 6 months
A nearly fully functional prototype with over 60 screens addressing all interactions and functionality from the original project brief.
A summary of the project, test results, and the finalized information architecture, wireframes and more are viewable in the "Results" section at the end of the page or in the final report on Scribd.
Setting up the project and scenario
NeuCity, a startup based in Chicago, IL has partnered with local governments and businesses to install rentable lockers in commuter centric hubs of the city. NeuCity needs a simple and intuitive application that would allow users to reserve, rent and adjust rental time on the fly. The app must offer subscription options and a means of discovering locker hubs using a robust search functionality and location services. This application needs to support NeuCity’s goal of creating a simple and accessible user experience for their CityLocker initiative.
The app is intended to allow users to quickly and easily set-up an account, locate, book and access lockers via their phones. Lockers are to be accessible 24 hours a day/7 days a week with robust, in-app customer service available for troubleshooting.
The application must provide functionality for users to:
After initial market research, stakeholder interviews and pre-existing user data, a project brief was created and presented.
Users will download the native application through their preferred app store (using in-store search or provided QR codes), quickly and easily set-up an account, locate, book and access these lockers all from their phone screen.
will employ either location services or search functionality to locate the most convenient locker hubs. Lockers are to be accessible 24 hours a day/7 days a week with robust customer service available for troubleshooting.
Subscription-based models in addition to one-time payment options create incentives for longterm adoption from lower prices or fees without alienating the casual user. In depth account settings and the ability to share locker hub locations with friends allow users to further customize their experience, while also increasing the user base.
Businesses are encouraged to adopt onsite lockers or request nearby hubs as increased foot traffic will undoubtedly increase sales.
Through a survey of the closest competing apps, no other service geared toward urban commuter baggage storage currently exists. Similar services specific to luggage storage include LuggageHero, Bounce, Vertoe. These companies are the top three service providers appearing on Google. These three competitors were compared and contrasted in order to find which features are best to add to the CityLockers app, and which ones to omit. These comparisons were also used to differentiate from the current competition.
Research showed that three major competitors currently exist in the market for similar services; LuggageHero, Bounce, and Vertoe.
| Feature | Luggage Hero | Bounce | Vertoe |
|---|---|---|---|
| Storage Type | Located inside existing businesses, including retail outlets, hotels, cafes, and more. | Hosted at local businesses | Located within local businesses such as hotels, restaurants, and retail shops |
| Pricing* |
Per Bag: $1/hr + a one- time $2 booking
fee. Never more than $8/day (Booking fee included) |
Per Bag: $5.90 per 24hr period |
Per Bag: $5.95/Daily Weekly: 15% off on final total Monthly: 30% off on final total |
| Insurance* | $3,000 (per bag) | $10,000 | $5,000 |
| Prepay/cancellation Policy | No prepayment |
Prepayment: required cancellation: only refunded if prior to start date/time. |
Prepayment: required cancellation: refunded |
| Online Reservation | Online booking, no prepay | Online booking | Online booking |
| Subscription | N/A | N/A |
Plans: 5 Vertoe $20.00 /6 month cycle $4.00/item/day 1 Vertoe = 1 item for 1 day Unlimited: $30.00 /1 month cycle - Unlimited uses |
| Security | Security seal | Security seals "provided for max safekeeping" | "Tamper-proof" security seals |
| Native Application | No; Web Only | Yes - Apple App Store + Google Play | Yes - Apple App Store + Google Play |
*NOTE: All features and rates calculated based on City of Chicago
| Feature: Positive | Feature: Negative |
|---|---|
| All: Online Booking | Bounce: limited cancellation time period |
| Vertoe: Discounted subscription available | All: Storage only available within businesses |
| All: Insurance included in booking (varying levels) | All: Secure individual storage for items not offered, only seals. Items may be less secure. |
| Luggage Hero: Offers hourly rates | Bounce/Vertoe: Require full-day/24hr long reservations (No hourly options) |
| Bounce/Vertoe: Native applications | Luggage Hero: No Native app (only web-based) |
| Bounce/Vertoe: Sleek, modern and professional look/style | Luggage Hero: Cartoonish look and feel |
| Application Type | Total Development cost | Timeline | Examples |
|---|---|---|---|
| On-demand app | ~$70,000 - $100,000+ (basic, per platform)* | ~5-7+ months | Uber, UberEATS, Postmates, Nimber, Melabiz |
*Based on: "App Development Cost", MLSDev, 2021
| Description | Time (weeks) | Unit Price | Cost |
|---|---|---|---|
| User Research Round 1 | 7 | $ | $ |
| Design Phase 8 $2,000 $16,000 | 7 | $ | $ |
| Prototyping | 2 | $1,500 | $3,000 |
| Iteration Phase | 8 | $2,000 | $16,000 |
| App Development | 12 | $3,000 | $36,000 |
| App testing and maintenance | 6 | $1,000 | $6,000 |
| Ongoing support and maintenance | ∞ | N/A | Approx. $12,000 |
| Total | ~$100,000 |
A native app posture is best suited for this product because it offers the quickest and most secure access to all the product features while maximizing control and usability.
The application will be available to download for both Android and iOS platforms in order to reach the largest audience and in conjunction with most industry trends. No single feature requires a specific operating system, so developing a cross-platform native application should not pose significant technical, time, or budgetary issues.
Additionally, a paired down, browser-based version may be offered in conjunction to increase audience and accessibility. Users who may not have the time, storage, or data-streaming ability to download a full-fledged native application can utilize this browser based version for basic features. Though the browser based version would include limited features, it still allow users to search for and book lockers (the core goal of the app). Additionally, the browser version would allow for SMS text based updates in lieu of push notifications.
The app should include, but is not limited to, these basic sections and screen count(s):
x2 screens minimum
The application will need some form of sign up or setup section to begin.
x1 screen minimum
If already setup or signed up, the app should have a loading/sign in or start up screen.
x1 screen minimum
After startup, the user should land on some form of home screen or account dashboard, as appropriate to your application.
x10 screens minimum
This is the bulk of the screens that will allow the main service or tasks to be completed. The number and type of required screens can fluctuate greatly depending on the project, but a good rule of thumb is that if the service of the app can be completed in a few screens, it is unlikely to meet the fidelity requirements of this project.
x2 screens minimum
This section will allows users control over the app settings, their profile or account information, and other account related items such as privacy, alerts or preferred means of communication.
x1 screen minimum
There should be an easy, clear way for users to delete or cancel their account.
The sitemapping process required extensive brainstorming in order to develop a preliminary map for the information architecture of the application. From top to bottom, navigation follows a chronological process. This map served as a guide for the wireframing process, which added many more screens and navigation paths as the application evolved.
Scroll or use gestures to view full sitemap
The wireframing process began by first creating all of the screens from the sitemap above in the same chronological order. After this skeleton was created, many screens were added in between to account for the myriad of features an additional navigation paths necessary for fulfilling the required functionality. Once the rough draft wireframes addressed these requirements, it was sent to three other UX designers for critique and review. Through the iterative process, critiques were used to improve wireframes until they were prototype ready.
Scroll or use gestures to view annotated Wireframes Gallery in Adobe XD
Draft wireframes were presented to peers for several cycles of feedback and iteration. This process simulated that of client feedback and revision cycles. Below are some of the most pivotal changes made
Using Adobe XD, robust interactions were added to the wireframes creating a functional prototype. This rough draft prototype was then subjected to the same iterative process with two rounds of critique and review. Once all interactions evolved into a polished prototype, it was cleared for final user testing.
Tap, click, scroll or use gestures to interact with prototype in Adobe XD
The iterative process of UX (User Experience) design is a cyclical approach aimed at continuously refining and improving a product or service based on feedback and testing. It involves several stages that are repeated multiple times throughout the design and development lifecycle.
Results from this project included a nearly fully functional prototype with over 60 screens addressing all interactions and functionality from the project brief. See the video of interactions below:
Tap or click to start video
Though several rounds of iteration occurred during the initial design process, further testing post-launch is always recommended in order to best meet user needs.