Botanista

Flower identification iOS app

Project main imageProject main imageProject main imageProject main image

Project details

Botanista allows users to identify a flower picture, and users can take a picture with their iPhone’s camera or upload an existing one from their iPhone’s library. The app identifies the flower and displays some of its general information; there is a button to continue reading more in Wikipedia.

Project type
iOS mobile app | Personal project
My role
iOS developer & UI|UX designer
Tools
Xcode, Swift, Figma, Affinity Designer
Date
November 2022

Functionality

No items found.
No items found.
No items found.
No items found.
  • Identify a flower: Users can take a picture or upload one from their iPhone’s library.
  • Open in Wikipedia: Users can open Wikipedia directly in the app to read more about the flower they just identified.

Product design & development

Botanista is a personal project that I developed because I hike frequently, and I wanted to have a way to identify the flowers I see growing on the trails.

My approach for design and development

Design

I created Digital wireframes in Paper53 on iPad. Then, I started to create mockups and high-fidelity prototypes using Figma.

No items found.
Draft version
No items found.
Final version
No items found.
No items found.
Digital wireframes
No items found.
No items found.
Digital wireframes
Digital wireframes
Light & Dark modes: Launch screen
No items found.
Light & Dark modes: Main screen

App assets: sounds, icons & images

Image assets are vector images adapted to the project needs using Affinity Designer.

SF Symbols were used for the return button.

Development

The UI of this app was developed primarily using storyboards.
I followed an MVC design pattern to create and organize this app.

Elements used:
- Storyboards
- UIImagePickerController
- Alamofire for POST and GET requests
- Two APIs: one for flower identification and one for Wikipedia to obtain detailed information about the identified flower.
- UIActivityIndicatorView
- SFSafariViewController
- UIAlertController
- Data model: Decodable

Recording of the finished app

Launch

Style guide

App icon & graphic elements

No items found.

Color palette

Color palette

Typeface

Typeface

Next steps