Plannr, an application
for organising outings
- Project
- Plannr
- Type
- Social web application
- Context
- ISEP project
- Services
- Identity, mockups, development
The project
Organising an outing should not be a headache, and yet many people want to share an activity without finding a tool really made for it, because social networks are better for posting than for planning.
Plannr was born from that observation, during a web development project at ISEP, and we took it from the first idea to the online application, with our group.
Discover PlannrIn six work packages
We split the project into six work packages, and each one ended with something we could show.
Package 1, Analysis
Reading the brief, choosing the scope and first wireframes in Figma.
Package 2, Design
The visual identity, the palette, the final mockups and the navigation map.
Package 3, Back end
The home-made PHP core, the database, the API, login and image upload.
Package 4, Front end
Tailwind integration, components, pages, messaging and mobile navigation.
Package 5, Testing
Tests, GDPR checks, then going live behind Nginx and Cloudflare.
Package 6, Delivery
The user manual, the technical documentation and a live demonstration.
The identity
Plannr had to make people want to go out, so we gave it a warm identity, with orange-yellows and a heading typeface that looks hand-drawn, next to a body text that stays very readable.
- Headings
- Chewy, cheerful and expressive
- Text
- Albert Sans, plain and very readable
From wireframe to mockup
We always start with wireframes, simple grey blocks that say where everything goes and how you move from one screen to the next. As they are quick to redo, we fix the journey early, then dress them with the brand guidelines to get the final mockups. Drag the handle to switch from one to the other.
The technology
The project required PHP, and we turned that into an advantage by writing our own core, with no framework: routes are deduced from folders automatically, and every request goes through the same protections, from security headers to tokens against forged requests.
Messaging and notifications arrive live thanks to a WebSocket server, and Redis passes the messages between it and the application.
The school required a language, PHP, and rather than taking a ready-made base, we wrote the core of the application ourselves. Each new page therefore gets its address automatically, and every visit goes through the same security checks, which prevents someone from acting on your behalf, for example.
Messages and notifications arrive without reloading the page, as in a real messaging app, because the application keeps a line open with every phone.
Designed for the phone first
Creating an outing or signing up to one must take a few seconds, so we designed the mobile version first, then widened it for the desktop.
Plannr login on mobile Plannr home page on mobile A profile on Plannr
What we built
Each element was drawn once in Figma, with its states, then reused throughout the application.
The activity feed
A “For you” feed and a following feed, which tell small groups from large events.
Outings
A place, a date, spots and a waiting list, open entry or by invitation, free or paid.
Messaging
Encrypted real-time messages, and a group created automatically for each activity.
The calendar
All your outings of the month at a glance, day by day.
Search
By word, by category, by date or around you, within the radius you choose.
The profile
When two people follow each other, they become friends and can message each other.
GDPR
Everyone can download or erase their data in one gesture.
Start your project
An application to build? Tell us about your idea and we will reply with a clear quote.