For iOS and Android
Find the best parties in your area and connect with others
Objective
The objective of this project was a design study comparing the native mobile systems iOS and Android. As a topic, I chose a party guide for local events and clubs. The main focus was to showcase the differences between the two native systems.
Additionally, I wanted to explore a design that includes a community-based chatroom as well as a large-scale event calendar. Party On offers daily event schedules for different niches and a community area to connect with other party-goers via public posts or to message people directly.
Challenge
This was my first time designing for the two native platforms iOS and Android. A lot of research went into the process of implementing the different rules and guidelines into my design concept to create an appropriate comparison.
UX
- Research
- Concept
- User flow
- Wireframes
UI
- Native visual identities
- High fidelity wireframes
- Visual prototype
- Mockups
Tools Used
- Sketch
- Invision
- Unsplash
- Sketch Apple design files
- Sketch Android design files
Research
The first step of my research was to learn about the iOS Human Interface Guidelines and the Andriod Material Design Guidelines. Most of that information was gathered on the platform’s official sites as well as on some design forums.
The second step was to familiarize myself with the app’s topic. Therefore I did a competitive analysis of different party and event guides that are available for either iOS, Android, or both. Finding the well functioning elements and existing pain points to establish the structure of my own application.
Competitive Analysis
| Competitor | A | B |
|---|---|---|
|
Category |
Party and event planner |
Party finder |
|
Platforms |
iOS |
iOS and Android |
|
Free/ Paid |
Free, with in-app purchases |
Free |
|
Target Audience |
Apple users, young to middle-aged people, house party enthusiasts |
Partygoers, people looking for specific events |
|
Time On Market |
8 years |
4 years |
|
Main Features |
|
|
|
Customer Ratings |
4.5 |
3.2 |
|
Customer Reviews |
|
|
|
Major Painpoints |
No use to get an app if the planning can only be done for 5 guests without paying for an upgrade |
|
Structure and Wireframes
After establishing the structure and flow of the app and sketching out Low-Fidelity-Wireframes on paper, I included the characteristic differences of the two native systems in my Mid-Fidelity-Wireframes and created a set of wireframes for each iOS and Android.
User Flow
Mid-Fidelity-Wireframes Comparison
Sign Up iOS
Sign Up Android
Create Profile iOS
Create Profile Android
Home iOS
Home Android
Chat iOS
Chat Android
Finished Designs Comparison
The image slides below show the finished app screens for the iOS and Android native systems. The main criteria for the design was to convey the same brand massage and style on both platforms while following the different structural and stylistic rules of iOS and Android.
iOS
Android
Style Guide
This style guide shows the main design elements used for the iOS and Android screens. It is a guideline for differences and similarities of the visual style portrayed on the two platforms.
Colors
iOS
Android
Typography
iOS
San Francisco Display
Android
Roboto
Logo
Font: Futura, Bold
Icon: Lineart representing a disco ball, used as the letter O in On
Buttons
iOS
Font: San Francisco Display
Android
Font: Roboto
Input Fields
iOS
Android
Switches
iOS
Android
Main Navigation
iOS
Android
Chat Navigation
iOS
Android
