COASTLI
Project Overview
Coastli is a mobile app concept I worked on as a school project at Rutgers University along with a diverse set of team members. Coastli is a cashless system which enable NJ beach-goers to buy tickets and beach passes online, store badges and access a plethora of other useful features to create a seamless beach experience!
My Contribution
UX Research, UX Design, Information Architecture, UI Design
Note to add: I did independently work on this after the semester to enhance some features, deliverables and add more design elements to the project.
Team Members
Pooja Gurudatt - UX research and design
Ishani Amin - Developer
Brooke Greene - UX design, QA & Writing
Justin J Ramahlo - Marketing & management
Vincent Fiore - Engineer
Timeline
3 months [Jan 2019 - March 2019]
The Problem Statement
The beaches in NJ are mostly pay-to-access and locals are tired of waiting in long lines and being denied entry to natural beaches along the jersey shore. You need to either have an expensive seasonal beach pass or buy daily entry tickets to access the beach. This can be cumbersome, can turn away potential visitors and create friction to daily beach-goers. Locals need something better, quicker and mobile friendly.
Enter COASTLI - the one touch beach pass mobile application!
Online pass
Mobile UX
One touch point
Faster purchase
The Objective
Research into existing beach pass and product providers, find government initiatives for increasing tourist flow to beaches, conduct market analysis to create unique selling point for the app and create a simple yet effective solution that will greatly benefit visitors to NJ beaches. We had 3 months to produce the MVP. Make it compatible with iOS and android = web app.
Design Process
Discovery
Research
Ideate
Design
Test
1. Discovery - Online Exploration
-
NJ beaches needing in-person ticket and pass purchasing was a hassle.
-
There was a lot of push for tourists to visit beaches and this contributed to millions in revenue for the state.
-
Local Business will benefit with more people coming to the shore.
-
Tourists are shifting spending more towards experiences over buying things.
Revamp website
Mobile UX
Collect Data
Retain Users
2. Research
-
Did face to face interviews with peers who also lived in NJ (other classmates)
-
Scoured online forums like Reddit, Facebook, Instagram to gather more voices for users.
-
Searched for local business voices and their thoughts about tourists and revenue.
User Interview
Internet Research
Mobile UX
1. Research - User Interviews
-
NJ locals hate paying for entry to their local beaches. And paying cash on top of that was a huge friction point.
-
Great need to move transactions online for the younger crowd.
-
There is a lack of concise information about various facilities, amenities, food options available, permissions for each beach etc.
2. Research - Internet Research Insights
-
Some beaches don't allow pets, alcohol, food etc. Difficult to know what rules apply where.
-
The concept of season passes are not known to all travelers or visitors.
-
Staying up to date with local business deals, summer events, winter markets and other happenings on the shore are rather unknown to NJ beach-goers. This leads to less visitors and reduced revenue for organizers too.
-
Visitors are often caught off guard by beach closures due to weather and other events.
3. Ideate
Lots of data, research points and information gathering was done to go to Ideation stage of the journey. On a tight schedule of 3 months and zero spend budget, we had to think of how to ideate and execute this project successfully.
-
Conducted brainstorming session with team
-
Defined design ideas and categorized them on priority
-
Ideated user flow from the above data points, research and inputs.
Brainstorming
Priority Map
User flow
3. Ideate - Brainstorming
I did the whiteboard design challenge method to generate as many design ideas as possible. I came up with quite a few ideas that were implemented as well. We will see more on that as we explore.
3. Ideate - Priority Mapping
Taking into consideration the time restraints, resources restraint and business needs and user priorities, I mapped out the design ideas into what we can and cant do. I used the priority map to help focus on what is the need of the hour.
Top takeaways from this exercise
-
Prioritizing most important deliverable for MVP
-
Include direct access to search skipping login/signup and allow to do that later too.
-
Advanced search with filters, sort.
-
QR code for one touch access.
3. Ideate - User Flow
The user flow was defined based on user journey and based on research and data collected previously. Since this was a complete mobile only app, I made sure to have all items visible to users and make a menu easily accessible.
4. Design
My favorite part of the journey has to be the design phase. We were on a tight schedule of 3 months to present our design ideas and I thought having a prototype will be best to communicate these features to stakeholders.
I gave more importance to quick signups, onboarding, direct search on homepage, quick links for faster results and the ability to sort and filter beaches efficiently.
1. I started with an 8 box sketch - first box to show starting scenario for user and last box to show the desired outcome.
2. I then did sketch low-fi wireframes on paper to better communicate my designs to team members. I did lots of changes and variations before creating prototype.
3. Lastly, I prototyped using Marvel apps initially. When I got the time to refine my designs after the course, I prototyped using my favorite app - Figma.
Sketching
Wireframing
Prototyping
4. Design - Sketches
I quickly dove right into sketching to put my thoughts onto paper. I considered the 8 grid box method to sketch out my designs.
Box1 : Starting situation.
Box 8: Ending results.
I then filled in the rest of the boxes with different actions for different stages of user journey.
4. Design - Wireframes
I initially used marvel app online to wireframe but decided to use miro and figma later on to create more cohesive and quicker wireframes.
4. Design - Prototype
I decided to use iOS design system as it was easily available at that time for free and chose a beach themed color scheme to better communicate how these designs will benefit not only users but also the business eventually.
Initially used marvel apps to design but later switched to Figma as it was quicker and easier. Figma had more features and made prototyping a breeze (not an ad :) )
5.Testing
Once the wireframes were produced and we could make it into a clickable prototype, usability testing was done to get real time feedback and observe how users interact with the system.
10 users - 16-18 years old
face to face moderated testing method
medium used - iPad
Time per participant - 20 minutes
Moderated
iPad
5.Testing - Takeaways
-
Users wanted no onboarding and to directly search - I implemented a skip onboarding button after this.
-
Included a social media login as per user requests.
-
100% users loved QR code idea and want this app to happen so they can use it.
-
It's exciting to see business discounts and offers they can use.
-
Users would also like to see an options for searching beaches that are accessible to wheelchairs and other disabilities easily.
Outcomes
Successfully translated our designs into a working prototype and handed off to the developers. Here is what happened next!
-
We were encouraged to pitch this idea to venture capitalists in NYC. I would love to see this come to fruition.
-
Mobile app is being built by developers.