Flopster Mobile App
Design & Development

CLIENT Flopster
DELIVERABLES Design & APPDevelopment
LIVE WEBSITE www.flopster.com
flopster-phone

ABOUT FLOPSTER

DA Studio, app development company in dubai, introduces Flopster

Flopster is a revolutionary native mobile application that assists pet owners in locating pet-friendly establishments in their area. The virtual map pinpoints pet-friendly places to eat (caf├ęs & restaurants), play (parks & beaches), and stay (hotels & campgrounds).

Flopster app user onboarding was critical to the app's success, as it bridges the gap between captivating pet lovers to try the app and converting them into invested users, as well as experiencing a strong sense of belonging as a part of a large community.

Pet-Friendly Places near you with special offers!

flopster-mobile-palm

PROBLEM STATEMENT:

We need to display all nearby pet-friendly establishments on a Virtual Map within the App, along with their information, ratings, and reviews. We adhered to keeping it simple but not simpler, as our team is a part of the pet-loving community, which made implementing the best user experience strategies more challenging.

THE CHALLENGE:

OUR ACCOMPLISHMENY:

Thus, DA Studio designers analyzed color preferences and how the psychology underlying the color and skeletal structure of the Flopster mobile application would affect the user experience approach we were considering implementing. This approach had a significant impact on a pet lover's perception and interaction with Flopster's innovativeness. The user is at the center of mobile usability, and it also serves as the deciding factor for an app's success.

flopster-service

DESIGN PROCESS

01 DISCOVER
  • User Interview
  • User Research
  • Competive Analysis
02 DEFINE
  • Empathy Map
  • Journey Map
  • Persona
03 IDEATE
  • User Flow
  • Card Sorting
  • Information Architecture
04 DESIGN
  • Wireframe
  • Visual Design
  • Prototype
05 TEST
  • Usability Testing
  • Userflow Testing
  • Design Testing

USER FLOW AND WIREFRAMING

We began designing wireframes once we had acquired enough information. Two iterations of the prototype were created. Phew, that took a lot of thought and study! Now it's time for some graphic work! We drew up some wireframes before diving in. After all the research, brainstorming and wireframing process it was finally time to digitalise the finalised versions.

flobster-diagram

ONBORDING

ONBORDING

flopster-phone-1
flopster-phone-2
flopster-phone-3
flobster-phone-5

MAP FEATURE

The UI is simple and functional for each. As a user arrives in each of the home screens, they have a clear idea of the locality of themselves, in contrast to their surroundings. Each app was extremely responsive: a user could pinch and swipe the screen to take a bird's eye view of the map.

flobster-phone-6

DISCOVER PLACES IN MAP

Helping consumers get to a certain area is a common scenario for mobile apps. This may be a restaurant or the starting point for the most amazing pet-friendly hikes. We can use iOS and Android's built-in map applications to bring our users there quickly.

DISCOVER SHOP DETAILS

The screen begins with the option to go back to the search results, share this particular area, or shortlist it for later. Users can also swipe to view photos or click the image to be taken into a gallery view.

User can share the page to their friends or family.

The next component on screen is the title block, which includes the name of the shopping street, the type of shopping (mall/street/etc), the average rating, serviceable hours, its specialties, and the average amount people spend on shopping in that area

flobster-phone-4
flobster-phone-7

MULTIPLE PET PROFILE

We considered allowing users to establish profiles for more than one pet in their account so that they can keep track of their pets with a list of their pets and their details.

Process Model:

Agile Methodologies (Scrum).

Tool Used
flobster-tools

Design: Zeplin, Figma

Mobile Apps: Android Native, IOS Native

Backend: PHP Laravel & MYSQL Database

Project Duration
10Weeks 18+Web Pages

BRANDING

BRANDING

Color Palette
Brand Typface

Aa

SF Pro

AaBbCcDdEeFfGgHhIiJjKkLMmN
nOoPpQqRrSsTtUuVvWwXxYyZz

0123456789
!*@$%&#)/.,

Title Heading
Lead Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum
Paragraph Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry
Button Learn More

HIGH FIDELITY MOCKUPS

flobster-mockup-1
flobster-mockup-2
flobster-mockup-3
flobster-mockup-4
flobster-mockup-5
flobster-mockup-6
flobster-mockup-7
flobster-mockup-8
flobster-mockup-9