FLORET is a coding project that involves a coded prototype for tracking flowers- an app that helps you keep a track of all the different kinds of flowers you see in the city.
FLORET : the meaning of floret is one of the small flowers making up a composite flower head What? Floret - An App to track and collect all flowers in the city. Why? Now do not pluck flowers off the plant. Instead you can keep them with you forever. How? As you discover/ locate a beautiful flower, take a picture, add name, type and description and pin the location so now you have all those beautiful flowers in your pocket forever.
03
Planning
Inspiration Board
I began looking at apps and websites which have a pastel and floral vibe to collect inspiration for the look and feel of the app.
Font and color exploration
Next, I came up with fonts and colors for the app, all derived from the moodboad above.
Information Architecture
Following is the information flow and user journey on the App depicting screens, decisions and user actions.
Wireframe sketches
Following the IA Map, I started sketching key screens.
Login and Profile screens
Application key screens
04
designs
Logo Design
Sketches
From the inspiration pictures, I sketched a few logo ideas
Final Logo & Favicon
The logo includes the shape of location since it is one of the main criteria of the app and a Flower incorporated into it.
Iconography
Created a set of icons for main navigation
Login & Profile Screens
Key screens
05
development
Step 1
Stand Alone Pages
I created the basic structure of the app in jQuery Mobile with HTML and very basic CSS.
Step 2
Working Prototype
At this stage, there is no real data yet and the map is just an image. This process is to make sure the app flow is easy to follow before moving into the real data and map.
Step 3
Google Map API & Connecting DB
Then I moved on to refine the structure of the app and apply data to the app with a data set. Google Map API is also embedded in order to have a real map.
This was my first time developing an app that I designed. The challenge was to make sure the designs transform to development without any shortcomings. In the future when I have more hold over my coding skills and time to play with I hope to include more micro interactions to make it more appealing.
