Mobile Application UI-UX Design
Sector: Private Social Community
Discipline: Mobile App Design / UI-UX Design
Fero Private Social Community
Fero is a private social community where organizations and the individuals within can share, retrieve and store information that is relevant to their members. An organization can be a company, corporation, business, charity, sporting club, school, team or any group that wants to collate and shares information between the entire organization or the individual.
Fero aims to alleviate this problem by allowing Employers and Employee to interact via the non-intrusive private community. The Employer can communicate with all Employee’s or just an Individual.
The Individual user can use Fero’s address information feature to keep all their groups address details up to date;
Comprehensible – Encourage discovery but retain clarity of information. Users should be able to understand the functions with ease. It is believed that some users tend to have short attention spans and fragile temperaments; if they don’t know how an element in an App works in just a few seconds, they tend to leave or delete the App. Navigation is the first thing a user will look for. Menus should be noticeable and adequately labeled. It’s also a good idea to illustrate processes or steps, rather than dictate them. Therefore, we should make the path through the information we present in the App logical and easy to predict.
Aesthetics – Each element should be positioned, sized or colored for a reason. If it serves no purpose, it will only clutter up the app, not add aesthetic value to it. The app should use exact colors and elements. It is not just about layout & colors, it is about SENSORY SENSATIONS. Therefore, it is important how we balance the appearance of the app with its function to deliver an optimum user experience.
Simplicity -We should Give users only one path to a screen and make the primary function of the App immediately evident. Brand colors or images should be incorporated unobtrusively. Follow the recommended usages for standard user interface elements and avoid radically changing the appearance of control that performs a standard action. Therefore, App design should be simple, but not empty. We should not add more features for the sake of just adding features.
Building a strong colour equity within the Fero brand is critical to strengthening brand awareness and visibility. Using the primary colours alone serves as a primary identifier for the brand as it conveys a strong corporate message. However, it is important to always maintain the correct balance between them when used in the Mobile App environment. In support of the Primary Palette, secondary coulours can used for backgrounds, for text, and graphics across all apps. Relevant colour combinations should from this subset to maintain consistency. The number of secondary colours alone should be kept to a minimum.
Look & Feel
Fero App’s look & feel is a balance between Fero’s brand guideline and Google’s Material Design standards.
1. Bold, graphic, and intentional – Using flat UI combined with bold design creates hierachy, meaning and focus. Deliberate choice of solid colours complimented by white create immersion and clarity.*
2. Surfaces that are intuitive and natural – Surfaces and edges that provide visual cues that are grounded in our experience of reality. The use of familiar tactile attributes speaks to primal parts of our brains and helps us quickly undesrtand affordances.*
3. Colour, surface, and iconography emphasize actions – User action is the essence of experience design The primary actions are inflection points that transform the whole design, Their emphasis makes core functionality immediately and apparent and provides waypoints for the user.*
4. Dimensionality affords interaction – The fundamentals of light, surface, ang movement are key to conveying how objects interact. Realistic lighting shows seams, divides space, and indicate moving parts.*
A. Tranlslucent navigation drawer with shadow to define depth.
B. Black tint used as background to create a depth on modal pop-up object and navigation drawer.
*Source: Material Design Guideline 2015