Android Application Design
- 1. User Experience Design & User Interface Design Of Mobile Application Sponsor: Reelslug Communication Pvt. Ltd. Student: Hemali Mansukhlal Gambhava Programme: Master of Design Academic Guide: Asst. Prof. R.Seshadri Ayengar Batch: 2015-2017 Visual Communication (Graphics Design) GRADUATION PROJECT
- 2. COMPLETION CERTIFICATE FROM SPONSOR
- 3. The Graduation Project Evaluation Jury recommends HEMALI MANSUKHLAL GAMBHAVA from Visual Communication (Graphic Design) for the Graduation Degree of UnitedWorld Institute of Design (Gandhinagar) herewith, for the project titled USER EXPERIENCE DESIGN & USER INTERFACE DESIGN OF MOBILE APPLICATION on fulling the further requirements by* Members Registrar (Academics) *Subsequent remarks regarding fulling the requirements Chairman Signature Name Organization Signature Name Organization Signature Name Organization Signature Name Organization Signature Name Organization
- 4. Graduation Project Documentation Copyright © 2017-2018 by Hemali Mansukhlal Gambhava Student document publication meant for private circulation only. All rights reserved. No part of this document may be reprinted or reproduce or utilizes in any form or by any electronic, mechanical, or other means, now known or hereafter invented, including photocopying and recording, or in any information storage or retrieval system, without permission in writing from the publishers, Hemali Gambhava and Unitedworld Institute of Design. Written and designed by Hemali Mansukhlal Gambhava, under the guidance of Asst. Prof. R.Seshadri Ayengar. Printed by Chaap Digital Print Studio, Ahmedabad. All copyrights and trademarks of elements used belongs to their respective owners and are used for education and private circulation only. I hereby declare that this submission is my own work and it contains no full or substantial copy of previously published material, or it does not even contain substantial proportions of materials which have been accepted for the award of any other degree or diploma of any other educational institution, except where due acknowledgment is made in this degree project. Moreover I also declare that none of the concepts are borrowed or copied without due acknowledgment. I further declare that the intellectual content of this degree project is the product of my own work, except to the extent that assistance from others in the project’s design and conception or in style, presentation and linguistic expression is acknowledged. This degree project (or part of it) was not and will not be submitted as assessed work in any other academic course. I hereby grant the Unitedworld Institute of Design the right to archive and to make available my degree project/thesis/dissertation in whole or in part in the Institute’s Knowledge Management Centre in all forms of media, now or hereafter known, subject to the provisions of the Copyright Act. I have neither used any substantial portions of copyright material in any document nor have I obtained permission to use copyright material. Student Name in Full: Signature:
- 5. UNITEDWORLD INSTITUTE OF DESIGN Unitedworld Institute of Design (UID) is one of the premier Design institutes of India. The institute aims to create globally sought –after professionals who can exhibit their creativity and trigger novel trends. UID’S pursuit for excellence has made its name shine with an extraordinary record of success in a short span. UID offers a diverse range of UG and PG courses in the area of art & design. These programs are designed with strong professional emphasis and in close partnership with the industry. Every course has been structured to deliver insights into the importance of individual and collective creativity, be it a theoretical assessment, design practice, curatorial evaluations or artistic considerations. UID has designed a well structured curriculum for each course to foster unique creativity and vision. Our programme and courses are carefully designed to make a real difference to the student learning experience. The structure of the programme aims to create a fine balance between theoretical and practical education. The programme focuses on the basics of the field of design while stressing on the possibilities to practice specific skills and knowledge related to specific courses. The programme takes you through a facet of creative skills required to excel in your chosen field. During the course, students will be guided and mentored by experts while being given the opportunity to interact with industry professionals. The learning outcomes are assessed at the end of each semester to ensure that students have a firm understanding of the latest concepts before moving on to emerging trends. Each course creates a dynamic environment , which builds the self confidence of the students along with a foundation of creative and technical skills.
- 6. ABOUT ME | Namaste | I am Hemali Gambhava, An IT engineer who fell in love with graphic design and now secretly dating user interfaces. My objective is to combine my technical skills with my designing skills to create elegant looking user interfaces, always keeping it clean and simple with that added functionality of user experience that user would like to see. Sports freak l Craft enthusiast | Dance Lover My area of intrest are User Interface design, User Experience design, Corporate Identity and Digital Media Marketing. hemaligambhava@gmail.com +91-812898-88721 Bharuch, Gujarat, India.
- 7. SYNOPSIS OF THE PROJECT Reason & Challenge of the Project: Till date, I have never worked on any mobile application. So working on an android mobile application itself is a challenging and learning experience for me. As I mentioned above this mobile is designed specifically for workers in demanding and hazardous environments so understanding their usability, situations and designing an application according to their requirements will be a big challenge for me because as an example they may use this mobile in emergency situations with gloves. Mobile applications include lots of stages so deciding user flow will be a challenge because it includes lots of functionalities. While designing User Interface, Each screen should look like they all are of one family. So designing more than 70-75 screens with same look which include different information will be challenging too. My Role as a Designer: While working on a live project with deadlines, As a designer I will be primarily concerned with how the application feels. I will be responsible to ensure that the application logically flows from one step to the next, to decide how user will redirect from one page to another and how the product is laid out. I will be in charge of designing each screen or page with which a user interacts. As a visual designer I will be focusing on crafting beautiful icons, visual elements and making use of suitable typography and pictures. The project is expected to reflect my understanding, skills and learning of visual communication and graphic design that I have gathered from the past years of my study. Theme: User Experience and User Interface Design Subject: Android Application About the Project: Sonim Technologies is the provider of the world’s most rugged, water-submersible mobile phones designed specifically for workers in demanding and hazardous environments. The company is headquartered in San Mateo, California and offers its solutions through the world’s leading mobile carriers. They want me to design an application for their Sonim XP7 model which is an android phone and currently My company is working on Sonim XP5 model which is a keypad phone. Starting & End Date: 5.9.2017 to 31.1.2018 Project Deliverables: Requirement Gathering Research Surveys Sitemap (User flow) User Experience Design Low-fidelity Wire framing High-fidelity Prototyping User Interface Design A/B Testing Prototyping
- 8. GUIDE PROFILE Work Experience: June 2011 - Sept 2017 Oct 2015 Dec 09 - Nov 11 2013 - 2014 July 2010 - 2011 July June 2009 - 2010 June Skills: Graphics : Adobe Illlustrator, Adobe Photoshop, Adobe Fireworks, Adobe Indesign, Coreldraw, Ink splat, gimp 2D Animation: Adobe Flash, Adobe Animate, Toon Boom studio, Cacani 3D Engines & Visual Effect : Autodesk 3D Studio Max, Autodesk Maya, Mudbox, Softimage, Z brush, Maxon Cinema 4D, Houdini, Blender, Modo Compositing and SFx : Adobe after effects, Sfx Shilloute, Black Magic Fussion, Foundry Nuke & Nuke X, Bonjue, AppleShake, Matchmover, autodesk Composit. Asst. Prof. R.Seshadri Ayengar (BSc in Multimedia & Animation, M S University) • Regularly engage with students in open talk, develop team building activities that enhanced students motivation & team work. • Promote activities that support intellectual and all-round development of growing students. • Created long-term plans, unit plans, assessments, and weekly lesson plans with an instructional approach. • Emphasize instructional and developmental activities that develop better understanding. • Consistently communicated with parents to report on student behavior, social & development progress. • Implement many art related activities that improved students creative skills. 3d & post production trainer, Arena Animation. Guest Lecturer into Graphics 2D and 3D at Animatics and Disha Computers. Professional Trainer for Educab into graphics. Game designing nd Development trainer at CASR Global College (Khargher). Sr 3D Artist for peristva pvt Ltd. (Seawoods). Application Designer at LnT infotech (Mahape).
- 9. ABOUT CLIENT Sonim Technologies is the provider of the world’s most rugged, water-submersible mobile phones designed specifically for workers in demanding and hazardous environments. The individuals they serve are our “everyday heroes” – manufacturers, construction workers, electricians, miners, police, firefighters, and first responders. Ultimately, they are in the service industry. They seek to better peoples’ lives by providing a communication solution that they can rely on – every day, no matter the environment. They specialize in workforce-critical communication tools for vertical industries including construction, security guarding, oil, gas and chemical operations, utilities, transportation and logistics, forestry, agriculture and defense. Sonim has partnered with industry leading application developers to provide a suite of high-performance workforce-critical applications such as push-to-talk, lone worker/man-down safety services, mobile resource management and time and activity verification. Their solutions enable companies and governments to make their field workforces safe, efficient and accountable. Sonim phones are backed by a three-year comprehensive warranty, covering not only manufacturing defects, but even accidental damage. Sonim is also the international leader in intrinsically safe phones, devices certified to operate in potentially explosive atmospheres. The company is headquartered in San Mateo, California and offers its solutions through the world’s leading mobile carriers. Sonim Technologies www.sonimtech.com San Mateo, California, United States
- 10. ABOUT THE SPONSOR PASSIONATE. PROBLEM SOLVERS. FORWARD THINKERS. We are a bunch of ordinary people who share an affinity for creativity. An affinity so strong that we carry it around – quite as literally as snails do. If you have a corporate identity problem that demands a creative answer, you’ll find that we aren’t snail-paced at all. We will take it upon ourselves. Slither over any rough surface, And leave a trail that shines. THE STORY BEHIND. Meet ReelSlug, one of the best creative agencies in Bangalore. We are a bunch of ordinary people who share an affinity for creativity. An affinity so strong that we carry it around – quite as literally as snails do. If you have a design or an identity problem that demands a creative answer, you’ll find that we aren’t snail-paced at all. We will take it upon ourselves, slither over any rough surface, and leave a trail that shines. WE ARE A BIG, SMALL TEAM. We are designers, illustrators, advertisers, braggers! We designs user friendly and clean mobile apps & websites. We design logos that gives your company a sleek identity. We make your online presence aesthetic by making use of our creativity and displaying our skills. And we do it all with such precision and passion that you’ll wonder why perfection is supposed to be elusive. To us, perfection is but the minimum standard of work done. Because we are ReelSlug. ReelSlug Communications Pvt. Ltd. www.reelslug.com +91-7738700456 pursuit@reelslug.com Jayanagar 9th Block, Bangalore – 69 KA, INDIA
- 11. CONTENTS 01. Research Of Subject 02. SONIM XP7 - Android Phone 03. SONIM XP5 - Featured Phone 04. Sonim Rugged Performance Standards 05. Information About Initial Stages 06. Personas 07. SCOUT (An Android Application) 08. Wireframes 09. Color Selection & Typeface 10. Iconography 11. UI Explorations 12. Direct Messaging Application 13. References & Initial Thoughts 14. Prototyping 15. Project Execution Timeline 16. Conclusion 17. Acknowledgment 18. Webliography 01 05 07 09 11 13 17 29 31 32 33 55 57 62 85 86 87 88
- 12. the application does not make up for a good user experience. This will make the user leave the application and then never visit again. So, the at the designing part one has to be always conscious about the short attention span and lower patience to be effective in its purpose. So where should we begin when designing the mobile applications in terms of UX and UI? The first step is to understand the targeted users and the market. Do a detailed study of what the user requirements? A detailed study of these requirements will help in improving the user experience. The quality of UX and UI of the application can be indicative of the application’s credibility. The terms User Experience (UX) and User Interface (UI) have become inadvertently misused in the design community. The user interface, however, is not the same thing as the user experience. This confusion most likely stems from the overlap of the skill-sets and tools involved in both disciplines. It’s nearly impossible to extract one discipline from the other. While the UX is a combination of tasks focused on the optimization of a mobile app for effective and enjoyable use, the user interface design is its complement, the look and feel, the presentation, and overall interactivity of a product. UX design essentially helps users accomplish functional tasks across platforms and services while the UI design consists of compelling and aesthetically pleasing interfaces in which the user interacts with. UX and UI designers work in the same realm and on the same projects, but apply their own skills at various stages of development. UX/UI Design of Mobile Application Mobile devices are used in everything nowadays and increasing so by the day. Mobile phones are have facilitated more than calling and reaching out to people. They make your life easier. When you are going to create an application for mobiles, there are two important concepts in design that cannot be avoided. In fact, this is where it all starts. The User Interface (UI) and the User Experience(UX). It is important to understand these concepts and the difference between them. To begin with, understand the basics of UX/UI mobile application design. UX and UI are two different disciplines of the front end design. UI is the components and the layout with which the users can interact. It is what you see in front of your screen is the UI in a very vague sense of the term. UX is overall experience of the user using the application. This includes the usability of the application, the ease with which the application can be used, how easy it is for the user to navigate through the application. So when creating an application for mobiles, the designer’s job is to create the user interface to meet the user’s needs and create an easy and enjoyable experience. To achieve that both the UX and UI should be great. An application has to be really pleasing to get the attention of the user. But at the same time, an application with great that looks pretty with all the bells and whistles won’t make a difference when the user experience is bad. Say, for example, if an application has a confusing layout that a user has to spend more time on searching for the functionality for doing a specific task or user has to really spend the time to understand what is what in RESEARCH OF SUBJECT 1
- 13. What is User Experience Design? User experience, also commonly known as the UX or UXD is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product. The mobile UX encompasses the user’s perceptions and feelings before, during, and after their interaction with an app. This includes all aspects of the end-user’s interaction with the company, and its products/services. The term “User Experience” was coined by Don Norman, the first to describe the importance of user-centered design, which is the concept that design decisions should be based solely on the needs and wants of your users. A UX Designer’s primary concern is how a product feels for the user, so the UX Designer will explore different options to solve user-specific pain points and provide them with a valuable solution. Ultimately, products with good UX are simple and user-friendly. Why is UX Design Important? Generally, a mobile app’s UX influences how users perceive it. Users often ask themselves if the app provides them value, if it’s easy to use, and if it will help them fulfill their goal. The answer to these questions should always be “yes”. The UX ultimately determines if a user will return to your app or if they will delete it altogether, possibly giving it a poor rating. According to designer Nick Babich, “The best products do two things well: features and details. Features are what draw people to your product. Details are what keep them there.” What Makes a Great User Experience? Successful mobile apps all have one thing in common: they benefit users. If a user is going to spend time on your app, it’s going to be useful to them, offering a great deal of value. A useful product meets a need that is not already being met in the market. To create an amazing UX, your research process must include a competitive analysis, developing personas, and then developing a minimum viable product, POC, or prototype to test feature validity or market viability. Typically, research is the first step when deciding whether to build a mobile app. UX designers conduct a lot of this research that will either validate or invalidate initial product ideas and guide the development of the product. Though, it’s important to note that the UX encompasses much more than how a user feels about a product or service. It incorporates strategic aspects that involve a deep understanding of the business model and the processes that clients use. It also involves understanding the larger context in which users interact and engage. The ultimate UX incorporates these three things to create solutions that meet the needs of the client, users, and ultimately work within the bounds of the technological platforms. An integral part of developing successful mobile apps is first conducting research on your potential users as well as competitor products and services. Before the development process, you need to get an understanding of how the UI and UX will work together to solve user pain points. A typical UX process is as follows: 1. Research and strategy 2. User personas 3. User stories, flows, and mapping 4. Wireframes and Prototyping 5. Coordinate with UI Designers and developers Next is the design of the user interface, which refines the interactions by adding color and visual design to the original design. This gives the user the clues that they will need to successfully navigate through the app, such as registering as a new user, for example. 2
- 14. User Experience is Not the Same as Usability User experience and usability are often confused in the design community although these two fields are very different. As we covered earlier, the UX addresses how a user feels, while usability is about the user-friendliness and efficiency of the interface. Usability, however, plays a big part of the UX as it heavily impacts how a user navigates through the app. A successful mobile app is one where the usability of the app is both efficient and pleasant. What is User Interface Design? Contrary to popular belief, interface design isn’t just about buttons and nav- igation menus but about the interaction between the user and the app. Put simply, the UI design isn’t how a product looks, but how it works. Where will you place the buttons and call-to-actions for your users to easily understand the flow of the app? Does a particular interface even need buttons? If so, what do those buttons need to do? For a good user interface, you should pro- vide your users with the right actions to take to figure out how the app works for the user to accomplish their goal. “The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals (user-centered design).” Why is UI Design Important? UI designers are concerned with how the visual elements are laid out and how the product will look, which greatly influences an emotional connection with the user, whether negative or positive. There is still debate as to what sort of UI will establish a positive UX for the product. While many people think a beautiful interface is needed, many arguments can be made for a simplistic UI. What Makes a Great User Interface? While the UX not as visible to the user, the interface design is the first thing they will see, therefore immediately influencing the user’s perception of the app right from the start. It is the responsibility of the UI Designer to enhance the brand within the interface. UI Design ultimately helps guide users through the interface using visual aids. Here are a few elements of a great UI: Clarity: The interface avoids confusion and ambiguity by making everything clear through language and visuals. Mobile apps with good UI usually don’t need manuals to show the user how the app works. Familiarity: Many users like to see familiar features, buttons, or call-to-actions. This includes commons symbols, icons, or colors, to convey a message such as red to exit out or delete. Even if someone uses an interface for the first time, certain elements can be familiar. Responsiveness: This includes speed as a good user interface should not lag or feel slow. Providing feedback when a screen is loading will also enhance the UI by keeping the user informed on what’s happening, for example, informing them when a purchase is being confirmed or data is being read. Consistency: Keeping your interface consistent across your application is important because it allows users to recognize usage patterns. Once your users learn how certain parts of the interface work, they can apply this knowledge to new areas and features, provided that the user interface is consistent with what they already know. Aesthetics: While it’s not necessary to make a user interface attractive for it to function properly, making something look attractive will make the app more enjoyable. 3
- 15. Things to Consider Before Designing the UX and UI 1. Responsiveness Responsiveness has become an integral part of the front end development. You can not avoid going responsive. Whatever your application is it should be fit to view an any size of the screen. There are two different screen modes in which the devices can be viewed — landscape and portrait mode. So the design should consider these variations in the dimensions of screens. 2. Design iteration Follow the cyclic process of prototyping, testing, analyzing and refining the design to finest of polish that will keep the users hooked and they will leave with the feeling of satisfaction of having done what they wanted and not getting lost along the way. 3. Keep it Simple Mobile devices are short in real estate. So knowing what is important is the key. What are the contents to be shown and what to hide? This ensures easy navigation and easy and uncomplicated user experience. Simplicity is not mean minimalist design. The design should be such that the user should be able to do their tasks in as fewer steps as possible. Also, make it a point to keep only one call to action on one screen. 4. Avoid Excessive Scrolling Excessive scrolling can be really annoying. The design should be such that the user doesn’t have to scroll through very long to get to the content that he needs. Instead, create navigation that can lead the user to the specific points he needs to get. 5. Know the Latest Trends Keeping up with the latest trends is essential for creating the most effective UX and UI. To know what is gaining popularity among the user helps learn and draw inspiration to create a better, effective design. 6. Finger-Friendly Designs With mobile devices, we are using the touch of our fingers to navigate through. There are different hand gesture that we use to do specific tasks like swipe to get to the next onboarding screen. Similarly, we have gestures like touch, touch-and-hold, double tap, pinch and zoom that allows us to operate the mobile devices. The user should be able to figure these gestures without any difficulty in a mobile application. Also, people hold their phone in different ways. Sometimes they hold it with one hand, sometimes with two, and with one hand holding the phone. Most of the time people use their phone with one hand like when scrolling or calling someone. But when texting users need both hands. So the design must be able to facilitate the user’s experience by keeping these in mind. 7. Give feedbacks Applications may sometimes take time to load. But a user may not be patient enough to keep waiting for the application to load if there is no feedback. The user may also think that application is broken and refrain from using it. So it is always important to give feedback to the user not just when loading the site but after every time a particular task is completed. Line when an order has been successfully placed. The user should be getting a message that task he did was completed otherwise leaving him in a state of confusion. 4
- 16. The Sonim XP7 is the cornerstone of Sonim’s Mission Critical Solution. An ultra- rugged, LTE/WiFi/Android smartphone, the XP7 is outfitted with unrivaled features such as a touch screen that can be viewed in direct sunlight and easily used with dirty or wet work gloves. An extra loud speaker, noise cancellation, powerful battery, resistance to drops and water and a 3-Year comprehensive warranty are just some features of the XP7 that provide peace of mind to enterprises and workers alike. Access to vertical enterprise worker safety and productivity applications as well as a full suite of industrial-grade accessories completes the solution. In extreme and often dangerous working environments where every step is critical, you don’t settle for less than the best – Sonim XP7. Cost – $ 849.00 SONIM XP7 - ANDROID PHONE 5
- 17. Core Platform/ Functions Operating System Chipset Band Antenna WiFi Memory Applications AndroidTM 5.1.1 Lollipop® MSM8926 1.2GHz Quad core FDD-LTE B1/B2/B3/B4/B5/B7/B8/B12/B17, UMTS 850/900/1900/2100 MHz, GSM 850/900/1800/1900 MHz MIMO antenna for LTE 802.11 a/b/g/n/r/e with hotspot 16GB Internal storage/1GB RAM User memory: 12GB Google Play, Push-to-Talk Connectivity Bluetooth SMS, MMS (text, image, audio, video) GPS, NFC Languages supported BT 4.0/BLE (Low Energy) SMS and MMS GPS, GLONASS, NFC English, French, Chinese, Japanese, Korean Battery Capacity Battery Life (Talk, Standby) Embedded 4800mAh Talk: 40h, Standby: 1000h Physical Characteristics Size Weight Certifications Dedicated Keys Ports 137mm x 72.1mm x 20.8mm 290g FCC, PTCRB, IEEE1725, CEC, Bluetooth SIG, WFA, IC PTT key, Alarm key, Power key 3.5mm audio connector, magnetic USB connector, 12 pin connector Display Size Type Resolution Outdoor Visibility Capacity 4.0” Corning® Gorilla® Glass 3 with glove touch, blanview display WVGA (480 x 800) Yes 16.7M color Audio Microphone Speaker Dual mic solution with noise cancellation 19mm loud speaker with Gore® protective vents, output up to 103dB Multimedia Audio Formats Video Formats Media Player FM Radio Camera LED Torch Light MP3, WMA 9, AAC, ACC+, eAAC+, AMR-NB/WB AVI, MP4, 3GPP Android native + GMS Yes 8MP auto focus rear, 1MP xed focus front Yes Inbox Accessories Wall charger, Magnetic USB cable, Multi-tool 6
- 18. The Sonim XP5 is an ultra-rugged LTE, Push-to-Talk phone with WiFi capabilities, powerful audio and long lasting battery, allowing field workers to more efficiently communicate with their teams. Dual, front-facing loud speakers ensure clear communication no matter how noisy the environment while the powerful battery will last through back-to-back shifts. Built for those heavy Push-to-Talk (PTT) users who work in extreme environments in industries such as construction, transportation, manufacturing and hospitality, the Sonim XP5 is fully water and dust proof, resistant to drops onto concrete from over 2M and comes with a large PTT button for ease of use with gloves. The Sonim XP5 comes with an industry-leading, 3-Year comprehensive warranty providing peace of mind to enterprises and workers alike. SONIM XP5 - FEATURED PHONE 7
- 19. Core Platform/ Functions Operating System Chipset Band Antenna WiFi Memory Applications Proprietary OS MSM8926 1.2GHz FDD-LTE: B2/B4/B5/B7/B17 UMTS: B1/B2/B5 GSM: 850/900/1800/1900MHz MIMO antenna for LTE WiFi 802.11 a/b/g/n/r 2.4/5GHz mobile hotspot 4GB Internal storage/1GB RAM User memory: 1GB Enhanced Push-to-Talk Connectivity Bluetooth SMS, MMS (text, image, audio, video) GPS Languages supported Bluetooth SMS, MMS (text, image, audio, video) GPS Languages supported Battery Capacity Battery Life (Talk, Standby) 3180mAh Li-Ion Talk: 25h, Standby: 25 days Physical Characteristics Size Weight Certifications Dedicated Keys Ports 137.8mm x 60.8mm x 23.4mm 235g FCC, PTCRB, IEEE1725, CEC, Bluethooth SIG PTT key, Speaker phone key, Volume keys 3.5mm audio connector, magnetic USB connector, 5 pin connector Display Size Type Resolution Capacity 2.4” Corning® Gorilla® Glass 3 display QVGA (320x240) 262K color Audio Microphone Speaker Dual mic solution with noise cancellation Dual, front-facing loud speakers with Gore® protective vents, output up to 104dB Multimedia Audio Formats Video Formats Media Player FM Radio Camera LED Torch Light MP3, MP4, MP4a, AAC, WAV, WMA, AMR, NB/WB MP4, 3GPP MPEG4, WMV Yes Yes 5MP xed focus Yes Inbox Accessories Battery, Wall charger, Magnetic USB cable, Screwdriver 8
- 20. A Higher, More Rigorous Set Of Standards When we set out to build Sonim phones, there were no standards for ultra-rugged mobile devices. So we created them. Based on over ten years of feedback from customer usage in the world’s most extreme environments, Sonim Rugged Performance Standards (RPS) consist of 12 benchmarks of endurance and durability. Why? Because in mission critical situations, communication failure is not an option. So every Sonim device is designed and built to meet the most punishing, demanding, exacting standards in the industry. Sonim RPS. We set the standard that all rugged devices must live up to. Dual-Shift Battery Life For continuous use throughout the day 3180 mAh battery to last multiple shifts Extra-Loud Audio Never miss a call in noisy environments 100dB+ speaker performance and noise cancellation Waterproof Fully submersible in fresh and salt water Rated IP-X8 for complete submergibility in water, up to 6.5 ft for 30 minutes, and IP-X9 for resistance to high temperature pressure wash Resistant To Shocks/Vibrations Designed to withstand the G-forces from sudden vibrations or impacts Withstands sudden shocks of up to 30G and vibrations from 5Hz to 500Hz Pressure Resistant Survives being driven over by heavy duty truck Withstands up to a ton of metric pressure Resistant To Oil And Chemicals And easily cleanable with the right solvent Resistant to petroleum oils and the corrosive nature of cleaning solvents SONIM RUGGED PERFORMANCE STANDARDS 9
- 21. 3 Year Comprehensive Warranty Sonim will even cover accidental damage of the phone for the duration of 3 years 3-Year Comprehensive Warranty Glove-Friendly Display Uniquely designed for ease of use with large or gloved hands Keys can be used with heavy work gloves Protection From Micro Particles Completely sealed against the intrusion of dust and industrial micro-particles Rated IP-6x completely dust proof Drop/Impact Resistant Designed to be dropped from atop a ladder Resistant to 6.5 ft drops onto concrete from any angle Operational In Extreme Temperatures Built to work in all weather conditions Fully operational in temperatures from -4° F to 131° F Puncture Resistant With gorilla glass lens that is extremely shock resistant Hardened rubber molded housing can withstand up to 4J of impact energy Company Vision We continue to push our technology forward as we are constantly evolving and looking to progress. We know our core competencies and will continue to build upon these; we will harden our devices form factor and durability, we will expand our accessory portfolio to increase our devices’ usability, and we will continue to expand our application ecosystem. Furthermore, we will stand committed to deliver the best service for our customers. • Build Trust and Credibility • Respect for the Individual • Create a Culture of Open and Honest Communication • Set Tone at the Top • Competition • Proprietary Information • Selective Disclosure • Health and Safety • Avoid Conflicts of Interest • Accurate Public Disclosures • Corporate Recordkeeping • Set Metrics and Report Results Accurately • Promote Substance Over Form • Accountability • Be Loyal • Do the Right Thing 10
- 22. INFORMATION ABOUT INITIAL STAGES Low-Fidelity Wireframe As said earlier, wireframes can be created in a lot of ways like paper sketches, computer drew images etc. At Think 360, we abide by speed and accuracy and adopt the best approaches for our clients. As the name suggests, low-fidelity wireframes are quick to make and are an excellent tool to enhance team communication in a project. Low-fidelity wireframes are kind of a starting point for a designer’s mindset to work on a layout as well as a content writer’s thoughts on content length and hierarchical frame. They provide a simple picture by way of organized blocks that show space allocated for an image and mock content (lorem ipsum) used to get a rough estimate of the length of different content blocks. • This stage follows after the site map step. • Displays the layout and hierarchy of items. • Gives out dummy content (lorem ipsum). • It is surely an ideal ‘brain dump’ of organizational ideas. • Comprised of black and white shapes. Pros • They are very fast and cheap to produce. • Low-fidelity wireframes can be easily changed to meet your needs and can even be discarded just to start from the scratch. • As they are less formal, you can receive better client feedback which is actually best for the starting point of the project. When something is less formal in presentation it is easier to criticize such work as compared to a high-quality mockup; people don’t want to hurt a designer’s feelings. Personas Personas are fictional characters, which you create based upon your research in order to represent the different user types that might use your service, product, site, or brand in a similar way. Creating personas will help you to understand your users’ needs, experiences, behaviours and goals. Creating personas can help you step out of yourself. It can help you to recognise that different people have different needs and expectations, and it can also help you to identify with the user you’re designing for. Personas make the design task at hand less complex, they guide your ideation processes, and they can help you to achieve the goal of creating a good user experience for your target user group. As opposed to designing products, services, and solutions based upon the preferences of the design team, it has become standard practice within many human centred design disciplines to collate research and personify certain trends and patterns in the data as personas. Hence, personas do not describe real people, but you compose your personas based on real data collected from multiple individuals. Personas add the human touch to what would largely remain cold facts in your research. When you create persona profiles of typical or atypical (extreme) users, it will help you to understand patterns in your research, which synthesises the types of people you seek to design for. Personas provide meaningful archetypes which you can use to assess your design development against. Constructing personas will help you ask the right questions and answer those questions in line with the users you are designing for. 11
- 23. • Everyone starts thinking on the same lines for the functionality pieces of the project. • It might look simple, but the plus is that it will not intimidate the client. At this step, they might feel more relaxed in expressing themselves as it is less permanent. Cons • It might run-down on looks, but isn’t it just the first draft, right? High-Fidelity Wireframe On the other hand, high-fidelity wireframe has more realistic content, specific typeface choices and can even give out particular information on image dimensions and also on button styles. You can also play with the hues of gray rather than choosing the stereotypical black and white so as to display subtleties in contrast that will come out once the color is used, make the navigation innovative and think of joining interfaces in a space where color does not pose any clash. So, in other words, the designers can visualize the life of the site before taking into consideration color and imagery. In this stage, you enhance the wireframe a little more than its standard hierarchical benefits, bringing in view the life-like qualities of design at the same time not moving away from the focus of function. • It follows a low-fidelity wireframe in design • It has more specifics included, dimensions are given and you can have the typeface choices too. • You use grayscale instead of black and white • Consists of actual content, if not more still the headlines and subheads are there • Serves as the middle ground between the initial idea and final design Pros • The polished look itself speaks for the time devoted to it and appears to be done. It is helpful in providing a clear idea as to how the interface will look and work. • If it meets the criteria of the client in the first go, without going through the low-fidelity wireframe first, they will be really impressed. • There are a lot of programs that look after high-fidelity renderings and thus, make it less time-consuming than it used to be. Cons • In spite of the programs that guarantee fast high-fidelity wireframes, still, it demands more time than low fidelity. • They are expensive to produce. • High-fidelity wireframes are very complex for the clients to understand especially the ones who aren’t technically advanced and they struggle to gauge the difference between an interactive mockup and the fully final application. The major drawback is that if the client is not satisfied with this wireframe, you have to start from the beginning, which is a sheer waste of time and money. This time can be better utilized in crafting a low-fidelity wireframe from the start. Prototype A prototype is a mid-to-high-fidelity design model of the final UI of your website of mobile product. As well as offering a more detailed look at the visual attributes of your design, prototypes usually include the first user interaction. Sure, you can add some, albeit very limited, interaction in clickable wireframes – where you can click elements on the screen – but with prototypes, you can demonstrate and validate the complete functionality of the design by adding events, animations, variables and advanced interactions. The general idea of a high-fidelity prototype is to represent as close to the final product as possible. 12
- 24. Pain Points • Reaching hard to reach places • Connectivity • Problem reporting appropriateness and trouble shooting • Hazardous working contexts • Knowledge deficiency • Getting on field support • Knowledge about limited product models • Dealing with difficult customers Day in life • Get up early • Exercise for half an hour • Get ready • Login to the system • Get the lists of activities • Plan the route • Gather equipments and parts • Go on attending calls • Finish the daily calls and update supervisor • Make acquaintance • Logout the system • Go out for drinks • End of the day by reaching home PERSONAS George (Technician) 28 Years, Male, Atlanta “I like going places, Drive all day long and end up at the sun set point to get a breeze of fresh air.” Needs • On Field technical support • Quick help guides • Quick referencing • Training to keep updated • Challenging problems to cut monotony • Job security • Rewards • Emergency Contacts • Supervisor Contacts • Parts inventory status Introvert intuition Feeling Perceiving Personality Extrovert Sensing Thinking Judging Technology Mobile App E-commerce Social Networks Sharing 13
- 25. Pain Points • Working with semi literate team • Apprehension about tool acceptability, team safety, accidents etc. • Communication with multicultural team • Customer satisfaction • Complaint attendance • Working condition (Health Hazard) Day in life • Handle a feet of technicians / field workers • Starts with analysing the calls • Allocate tasks to team mates • Monitor every teammate in realtime • Provide guidance where ever necessary • Handle critical issues, some face to face while others through mobile, emails • Reports to seniors • Is a bridge between the workers and the management • Generally has a demanding day • Ends up in a coffee shop or a bar • Goes to bed early to prepare for next day Bob (Supervisor) 35 years Male, New York “I am open minded person. Believe in settings standards by doing it myself. I like to respect every individual. “ Needs • Need to know tasks completion status of team • Complaints from customer • Attendance status of the team • Assigning tasks and defining the route • Emergencies • Reaching the team at once (Broadcasting messages) • Municipal corporation updates • Movement of vehicles update Introvert intuition Feeling Perceiving Personality Extrovert Sensing Thinking Judging Technology Mobile App E-commerce Social Networks Sharing PERSONAS (CONT.) 14
- 26. Pain Points • Completing the task in allotted time • Tracking inventory • Dirty rooms • Cleaning while guests in the room • Justifying the tasks if questioned • Communication with varied multi-culture customers • Room route management for efficiency • Unruly requests from hotel guests • Noisy cleaning equipment’s (Vaccum machine) Day in life • 6:00 A.M. wake up time • 7:00 A.M. breakfast Time • 8 office reporting • 9 start cleaning activities • 12:30 Lunch break • 1:30 rejoin the cleaning activity • 3 reporting • 3:30 next day planning • 4 end of office hours Anne (House Keeping) 30 Years, Female, Maxican “I always find ways to be more efficient and productive.” Motivations • Job security • Modern tools for efficient cleaning • Guests tips • Transport facilities • Working at a neatly maintained place (3-5 star hotels) • Working with literate and polite co-workers • On job training • Working without filling forms manually Needs • Templatized messages to send update to the guests • Automated low noise cleaning equipment (Steam cleaning) • Link to central inventory management system • Real-time inventory update provision • Tools to plan optimal cleaning route • Entertainment while on the work( listening to music) • Respect from the guests • Quick translator device Goals • Approximately 20 odd rooms to clean • Maintaining the inventory and tally it with provisions • Making sure rooms are cleaned as per set standards • Changing the sheets • Filling the supplies • Cleaning the toilets • Safety of the hotel premises and safety of guests • Maintaining the standards of the brand PERSONAS (CONT.) 15
- 27. Pain Points • Don’t prefer to interact with others • Weak communication skills • Do not know how to fix things • Educated till high school • Always on the road, faces health issues • Unpredictable traffic conditions • Unpredictable weather conditions • Unsecured job environment • People don’t follow garbage rules Day in life • Gets up early around 6 AM to go to the job • Reports in the job bay around 7 AM • Attends regular instruction regime at 7:15 AM • Antonio is handed a route map to collect the garbage over his job phone. • Wears safety suit and checks the vehicle if all required attachments are working. • Antonio and his companion leave the truck bay around 7:30 AM • On the way, Antonio listens to radio (Songs, News etc.) • Reached the allotted community at 7:45 AM. • Follows route instructions as per the route map. Antonio (Garbage Collector) 30 years, Male, Maxican “I am passionate about my job. I like clean surrounding and my job gives me opportunity to keep my city clean and hygienic.” Goals • Earn money to lead a better life • Work efficiently to get personal time • Stay connected with the supervisor on the job • Make use of available technology for efficient working Needs • Well serviced and maintained automated truck to perform optimally. • Unobstrusive supervision by superiors. • Well equipped job kit(Phones, Garbage suits, protective equipment etc) • Entertainment on the job (Listening to music) • A companion/helper to perform the job better • Garbage collection in a literate community • Approximate working hours • Regular health check ups by the employer • Job training Motivations • Opportunity to make money • Company provided insurance cover • Better working conditions compared to other similar paying jobs • Opportunity to learn new tools and techniques • Rewards from service • Approximately equipped to perform the better • Automation at job • Reward for honesty 16 PERSONAS (CONT.)
- 28. Scout means to explore an area to obtain information. Similarly, SCOUT application gives information about the phone and assist all the applications. It’s an one stop app for the users to access the phone. Below are the list of functional requirement that has shared in the first stage. It contains 15 functionalities which will help user to understand the device better. On basis of this client wanted an initial UX presentation for the landing screens. Home • Accessory Listener • Memory cleaner • Contact Transfer • Data service monitoring • Guide Me • Set-up wizard • App updater • Safe guard • Kiosk mode • Chat • Care • Remote Control • Log capture • Warranty • Information of the device We can represent this functionality as a list view or a tile view. But it will lead to excessive scrolling so we suggested client to divide this functionality into some sections into our first submission. SCOUT (AN ANDROID APPLICATION) 17
- 29. 18
- 30. OPTION - 1 19
- 31. OPTION - 2 20
- 32. Previous options are the initial thoughts. There are two projects that were going parallely. Same application one for Keypad phone and one for android application. These the combined UX flow for Home Page that we had presented to the client. Initially we proposed our flow with four sections. but after that client came up with 3 categories which are: • Setup • Utilities • Support. Setup includes Set-up wizard, App updater, Safe guard, Kiosk mode, Utilities includes Accessory Listener, Memory cleaner, Contact Transfer, Data service monitoring, Guide Me, and Support includes Chat, Care, Remote Control, Log capture, Warranty, Information of the device. Summary • The finalised flow is inspired by the first UX flow submission, As the client came up with 3 catagories we decided to eleminate 3rd step and directly landed to the list view with 3 tabs • Default landing have list features with icons • Default landing (Tab 2 function) figured out on the discussion Concerns • Maybe the absence of less crowded landing screen • According to user experience test, we suggest to have default Tab1 (the most important • functions), then Tab 2, Tab 3; because users are already used to this flow of 1 > 2 > 3 and they can come back with BACK button; the 1 < 2 > 3 can be a little confusing. Set-up wizard App updater Safe guard Kiosk mode Accessory Listener Memory cleaner Contact Transfer Data service monitoring Guide Me Chat Care Remote Control Log capture Warranty Information of the device Setup Utilities Support SCOUT 21
- 33. FINAL FLOW 22
- 34. 23
- 35. 24
- 36. 25
- 37. 26
- 38. 27
- 39. 28
- 40. WIREFRAMES 29
- 41. 30
- 42. COLOR SELECTION & TYPEFACE #CF0A2C R: 207 G: 10 B: 44 A: 100 #C8102 R: 200 G: 16 B: 46 A: 100 Typeface font-face: Roboto-Regular, Roboto-Medium, Roboto-Bold, Roboto-SemiBold font-size: 60px, 54px, 27px About font-family Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. #999999 R: 153 G: 153 B: 153 A: 100 #FFFFFF R: 255 G: 255 B: 255 A: 100 At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types. 31
- 43. ICONOGRAPHY Accessory Listener Memory cleaner Contact Transfer Data service monitoring Guide Me Set-up wizard Chat Care Remote Control Log capture Warranty Info of the device App updater Safe guard Kiosk mode Set up - Red Utilities - Red Support - Red Set up - White Utilities - White Support - White 32
- 46. REQUIREMENTS Remote Log capture 1. Type of defect 2. Duration of Log 3. Type of Log 4. “Start” button 5. “Stop” button 6. “Share /Send” button Memory Cleaner 1. Select exempted Apps 2. Enable / disable clean automatically 3. Schedule memory activity 4. “Start scan” button 5. “Clear” button Kiosk mode 1. Car mode (enable / disable) Next Page : 2. Mode page a. Tile mode b. List mode Sonim Set-up Wizard 1. Scan 2. Exit 3. FAQ/ tutorial Contact Transfer 1. Connect to nearby device via BT button 2. Import contacts via MDB file button 3. Import contacts via VCF file button 4. Import contacts via CSV file button Next page 1. OK & Cancel button. Care 1. Self-diagnosis test 2. Battery Diagnosis 3. Diagnosis Report Next Page User clicks on Self-diagnosis test 1. Test All 2. Wi-Fi 3. Bluetooth 4. NFC 5. Back Camera 6. Front Camera 7. Flashlight 8. Display 9. Touch Screen (Not applicable for XP5S. Only for XP8) 10. Keypad ( Available hard keys) 11. Battery 12. Vibration 13. Earpiece 14. Headset 15. Speaker 16. Accelerometer Sensor 17. Proximity Sensor( Not applicable for XP5S. Only for XP8) 18. GPS 19. Notification LED 20. Storage info 21. Call function check 22. Pass & Fail button Next Page User clicks on Battery Diagnosis Accessory Listener 1. Accessory Model Name 2. Type of Accessory 3. Application associated with the accessory can be shown for downloaded / open the application (if it is already downloaded) for the users (Applicable for few accessories) 3. Condition (if applicable) – battery life, charging %, time for charging etc. 4. FAQ of each accessory Warranty & Info of the device 1. Manual input 2. Upload file (pdf, jpeg, doc, png) Next Page : 1. First Name 2. Last Name 3. Company Name 4. Company Address 5. City 6. State 7. Zip Code 8. Email 9. Phone number 10. IMEI 11. Purchase date 12. Dealer name Data Service Monitoring 1. Select Wi-Fi SSID’s Safe guard 1, Activation – enable / disable 2. Applications – Check box 3. Features – enable / disable 4. Change PIN - input box 5. Application PIN Timeout (DD) 6. Version 7. Help 35
- 52. DATA SERVICE MONITOR & SET-UP WIZARD 41
- 55. APP UPDATER 44
- 56. APP UPDATER (CONT.) & INFO OF DEVICE 45
- 57. SAFE GUARD 46
- 59. KIOSK MODE 48
- 60. CHAT & REMOTE CONTROL 49
- 61. CARE 50
- 62. 51 CARE (CONT.)
- 63. CARE (CONT.) 52
- 64. LOG CAPTURE 53
- 65. WARRANTY 54
- 66. When both Cellular & DM mode are active in the device then DM Appshould be high priority. Settings like PTT button & Red button should align to the settings of DM mode 3.1.2 DM Activation Device should detect the DM module and launch the DM application, automatically if the application is already installed in the device If the application is not installed then the device will launch the application automatically from the server. For XP5s through SCOUT App Updater & XP8 through SCOUT App notification For XP58, SCOUT App notification will have link for DM App Google Playstore link for downloading & installing the application After launching the application, the device identity (IMEI & Phone Number) data should be passed to Cloud Server After authenticating the data with Server, User should be able to use the Application Authentication should happen only for the first time activation. Rest all the times, it should work seemlessly as soon as connected Once the authentication is done, SCOUT Sonim Set-up Wizard App will be opened for Provisioning User will have option to skip the SSW provisioning After scanning the QR code, all the provisioning files will be pushed to the DM application settings Provisioning data includes contacts, groups & emergency number Devices mobile number will be used as a self-identity for broad casting In the other devices, the broad casted number will be checked in the local contacts of the device. If the contacts are already saved in the contact then name and number will be displayed. DM module is a standalone accessory DM module will be connected to the device on top Xpand connector DM requirements: 3.1.1 General When the devices are in vicinity range, User can make 1. One to one & Group Chat 2. One to one & Group Call 3. Location sharing & Live location “Location” settings in the device will be turned ON by default User can turn OFF the location in settings After turn OFF, if User clicks / tap on location sharing /live location then pop-up will be displayed to turn ON the location settings in the device Location sharing & Live location will only work when device location is turned ON. Location sharing is one static location sharing. The location at the time of User sharing. When User is moving, User can share the live location. With that receiver can view the movement of a person all the times. Once the User clicks on stop sharing, then the location details will be stopped and notified to the other user about stopping the location User can use the DM App even within Cellular coverage. When the phone moves out of Cellular coverage, the DM application shall automatically popup notification to user to activate the feature. Similarly, when the phone returns to coverage area the DM application shall notify the user that the phone is in coverage area. It is for the user to turn off the DM feature. Notification for this alert will be only displayed when device is in active / device display is turned ON DIRECT MESSAGING APPLICATION 55
- 67. User should have option to change the presence. Be default it is available (green). Other options like idle (orange) and busy (red) If User changes then the default values will be overwritten by the user selection 3.1.6 Device Vicinity Device should work upto the range of 2 miles Device should have vicinity to configure the different ranges. Because to save the battery of the device Range settings can be configured in the Cloud and pushed to Cloud in the provisioning User can access these from the App settings with the password. Password can be set from the Cloud by Provisioner NOTE: Its only reference wireframe. Actual UI will varies. By default, it would be 0.5 Miles range 3.1.7 PTT, CSM PTT button will be used for DM App only when the App is active Rest all the times, PTT button will be assigned as per Programmable key rules When CSM is connected then settings of CSM for contacts in DM application will be configured UI of CSM application will be triggered for setting the CSM 3.1.8 Emergency Mode & Security When User clicks on Red button then the location sharing & call will be inititated for pre-configured numbers Numbers for Emergency mode can be configured through Sonim Cloud Numbers for Emergency mode can also be configured from settings of the device DM identity ( phone number) should be only viewed with-in the Enterprise devices Even the other Enterprise devices are with-in the vicinity, shouldn’t be shown to the User in scanning If the contacts are not saved then only number will be displayed Through Cloud, we can de-activate the DM for particular IMEI / phone number. User can de-activate in the App Settings page. It is password protected 3.1.3 Contacts & Groups Contacts & Groups can be manually created by User with-in the Application Contacts & Groups can be pushed to App through provisioning from Cloud Contacts & Groups can be broadcasted to other devices The Group session remains active until the originator terminates or only one participant remains in the session. 3.1.4 Calls & Audio User should be able to call one to one from Contacts and one to many from Groups Call waiting should be supported so that, User can switch to another incoming call User should able to make Emergency call by clicking on “Red button” Noise cancellation & Noise suppression should be supported Talk bursts are initiated by PTT key press just as in Push-to-talk service. A user’s talk request may be rejected if another person already started to speak. During a DM session, if the user receives another DM session request, there shall be a notification for accept/reject. Accepting the incoming session shall terminate the ongoing session. 3.1.5 Presence User should be able to view other users presence all the time Presence information should be real time If App is in fore-ground then presence should be available . If App is in back-ground then presence should be idle. If App not running then it should be busy 56
- 68. Voxer Ever wanted to leave a friend a voice message but didn’t want to call them? They might actually pick up the phone and then you would have to, you know, actually talk to them. Voxer functions like a walkie-talkie except that it sends messages rather than real-time dispatches. The app runs on iPhone and Android, it’s free, and it works over any data connection, from Wi-Fi to EDGE and everything in between. It allows you to send text messages, location messages and photos. TiKL Touch Talk Walkie-Talkie1 Another simple but great push-to-talk app. With TiKL, all you need are a contact list and a data plan. It supports group messaging and push-to-talk calls. For users who want to skirt voice and data plan restrictions, a simple app like this one could be the answer. Zello Zello (formerly LoudTalks) offers both push-to-talk apps and an application programming interface (API) and software development kit (SDK) so developers can add push-to-talk functiona2lity to their own apps. The enterprise capabilities of this kind of technology are vast. Remember those old Sprint/Nextel commercials where construction workers uses their cell phones as walkie-talkies? Well, now you can do it without Sprint/Nextel, across platforms and carriers. The Zello apps, at their core, are simple live communication channels. Like Voxer, they also save messages for replay later. REFERENCES & INITIAL THOUGHTS 57
- 69. 58
- 70. 59
- 71. 60
- 72. 61
- 73. Launch App Authenticating Scan/Provisioning Scan/Skip Provisioning - selection 62
- 74. Scan/Button Selection - Scan QR code Scan QR Code Scanning - 50% Scanning - 75% 63
- 75. Scanning Done Initial Home Screen Start New Conversation New Group Selection 64
- 76. Home - Chat Home - Chat - Selection Home - Settings Selection Home - Settings Menu 65
- 77. Home - Settings Menu - Selection Search Contact Search Chat - 1 - Initial screen 66
- 78. Chat - 2 - Starts Typing Chat - 3 - Message Sent Chat - 6 - Location Sharing Chat - 7 - Current Location Sharing 67
- 79. Chat - 8 - Current Location Shared Chat - 9 - Live Location Sharing Chat - 10 - Live Location Shared Chat - 11 - Live Location Ended 68
- 80. Chat - 12 - Voice Recording Chat - 13 - Voice Recording in process Chat - 14 - Voicenote Shared Add New Contact 69
- 81. Add Contact Details Upload Profile Picture Upload Profile Picture - choose photo Contact Details with profile picture 70
- 82. New Contact Upload Profile Picture Edit Profile Picture Deleted Profile Picture 71
- 83. Edited Contact Delete Contact After clicking on arrow - one to one chat screen Create New Group 72
- 84. Search Participants Select Participants Add group name and group icon Group Chat screen 73
- 85. Edit Group Exit Group confirmation Delete Group Delete Group confirmation 74
- 86. Edit Group Icon Upload Group Icon Upload Group Icon - selection Add Participants selection 75
- 87. Add Participants selection Chat Requests After designing screens for the android phone, the Same application we had to design for featured phone Sonim XP5. While designing application for keypad phone, we have to make sure that all the functionalities should be accessible through the keys. So keeping that in mind, we shifted our bottom navigation to the top. In some places, we need an extra button like ok, back etc. Similarly, because of keypad key access limitations, we changed screens accordingly. So from the next page, displaying screens of featured phone SONIM XP5. Featured phone screen size is 320X432 px whereas Android Mobile Phone screen size is 1080X1920 px. Status Bar 32px, Title Bar 51px, Normal List 72px, Menu Line Height 44px, Dialog box 276px width according to GUI Guidelines. 76
- 88. 77
- 89. 78
- 90. 79
- 91. 80
- 92. 81
- 93. 82
- 94. 83
- 95. 84
- 96. PROJECT EXECUTION TIMELINE 5- SEPTEMBER-2017 TO 8- SEPTEMBER-2017 Project Brief, Details about Client, Overview of different tools that going to be used 11- SEPTEMBER-2017 TO 16-SEPTEMBER-2017 Requirement gathering, Research, Survey 18- SEPTEMBER-2017 TO 30-SEPTEMBER-2017 Understanding of Android Application design guidelines and Implementing them into the project 3-OCTOBER-2017 TO 7-OCTOBER-2017 User flow discussion and deciding options of User Experience, Initial UX presentation 9-OCTOBER-2017 TO 18-OCTOBER-2017 Further Discussion on the concerns of UX designing and finalizing the Sitemap (User Flow) 23-OCTOBER-2017 TO 27-OCTOBER-2017 Final User Experience Design, Testing User Flow and finalizing it 30-OCTOBER-2017 TO 11-NOVEMVER-2017 Creating Low fidelity Wireframe Design for all the screens step by step 13-NOVEMBER-2017 TO 25-NOVEMBER-2017 Wireframe Approval, changes, Iconography, Deciding and implementing icons 27-NOVEMBER-2017 TO 8-DECEMBER-2017 Converting all the wireframes in to High Fidelity Prototyping, Finalizing Colours for the application and icons 11-DECEMBER-2017 TO 6-JANUARY-2017 Final User Interface Design for all the screens. Uploading all screens to Invision App to add transitions to transform static screens into clickable and interactive prototypes for developers to under- stand the design better way. 8-JANUARY-2017 TO 20-JANUARY-2017 Design Feedback And Changes 85
- 97. CONCLUSION Although UX and UI Designers have different responsibilities, they work together to build a great product in which the user forms a connection with. A mobile app that flourishes in the market is one that solves user pain points, is clear and concise, making the product pleasurable for the user. Designing the UI/UX for mobile devices are different from that of the desktop. There are constraints of the screen size when placing the elements of the website. The websites used in mobile devices are by touch, so that has to be taken into consideration. Also, the design has to planned keeping in mind the responsiveness of the application. But when the application works well on mobile devices, it increases the accessibility to the users and thus the number of users to your business. Working on the most growing technology in an organization having clued-up staff was an unforgettable experience. It added up a lot to my learning and knowledge. I was lucky to get guidance from one of the best members of the company which helped me learning on the level of expertise. I went through the whole process from getting requirements from client to delivering designs to developers. I recognized the importance of sincerity, hard work and punctuality. Along with the same I learnt to priorities important tasks, i.e. I learnt many management skills as well. This firm has not only helped me develop as a designer but as an individual by letting me realize my potential and believing in my capabilities and hence boosting my confidence. This project will always remain an integral part of my resume and I am more than sure, my wonderful experience here would provide a boost in my career. 86
- 98. ACKNOWLEDGMENT I have taken efforts in this project. However, it would not have been possible without the kind support and help of many individuals and organization. I would like to extend our sincere thanks to all of them. I am highly indebted to Mr. Anup, Ms. Gayatri and Mrs. Kavitha for their guidance and constant supervision as well as for providing necessary information regarding the project and for their support in completing the project. I would like to express my special gratitude and thanks to them for giving us such attention and time. It was such a pleasure working with three of them along with my other team members. Gayatri Burde (Senior UX/UI Designer) Anup K (Director & Design Lead) Kavitha J (Graphic Designer) From the bottom of my heart, I would like to express my sincere thanks to Head of Department Assoc. Prof. Hitendra Vala and Asst. Prof. Sunil Gupte, who gave us an opportunity to undertake such a great challenging and innovative work. I would also like to thank Asst. Prof. R.Seshadri Ayengar and Mr. Narendra Patel for their invaluable help, critical suggestions and key direction throughout the course of the project. My thanks and appreciations also go to our colleagues and friends in developing the project and people who have willingly helped us out with their abilities. THE TEAM 87