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.
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.
Following is the information flow and user journey on the App depicting screens, decisions and user actions.
Following the IA Map, I started sketching key screens.
Login and Profile screens
Application key screens
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.
Created a set of icons for main navigation
Login & Profile Screens
Stand Alone Pages
I created the basic structure of the app in jQuery Mobile with HTML and very basic CSS.
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.
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.