Company: Apple
Deliverables: iOS App Design & Presentation
My Role: Visual Design
iOS APP DESIGN
BACKGROUND
Apple Inc. has an iOS app to train salespeople at Apple reseller locations worldwide. Currently, the app sends news and training resources to salespeople. They can also earn experience points, achievements, and badges. Apple wants to apply best practices in gaming to drive the following user behavior such as usage of the app by consuming elective content or training program related content, successful completion of training programs, curriculum, or time-based challenges and successful completion of quizzes, question-based challenges, and assessments. Gaming mechanics such as using Experience Points, Leveling-Up, and Virtual Badging are incorporated into the app. These in-app rewards are used to rank them against a specified leaderboard.
OBJECTIVES
The objective is to apply the best practices in gaming to gain more attention from the salespeople and make them successfully complete the training programs, curriculum, or time-based challenges, question-based challenges, quizzes, and assessments.
The company wants to capitalize on salespeople’s sense of competitiveness by driving engagement of salespeople at their stores and within their reseller audience. This app is targetted to recognize salespeople for their achievements and propagate their competitive spirit. The intention is to get support from sales leaders for their sales territories and to establish a sense of community within salespeople’s peer groups. Another purpose is to support regional sales incentive campaigns by allowing sales leaders and training leaders to compare progress against other peer groups and giving meaning to individual challenges and regional programs for salespeople.
SOLUTION
Leaderboards as a gaming technique are used to drive in-app user behavior through competition and celebrating accomplishments with status recognition. The user will have access to multiple leaderboards. An intuitive design approach is taken for creating impact in the behavior of the users through Leaderboards for gaining the attention of the users and make the user know about what the Leaderboard is, how it works to gain more points, boost levels, and achieve badges.
WIREFRAMES
DESIGN APPROACH
As the users (learner here as it’s Instructional Design) are from whole over the world and from different cultural, educational and language background, a simple easy to use, minimalistic approach design approach is taken. The clean UI approach is derived from the Learnability Principles. I applied the following Learnability principles in order to ease with which users can begin effective interaction and achieve maximal performance.
1. Predictability
Applying Predictability makes the user easily and quickly move from one task to another. It makes the process clear and simple as possible. By implementing this principle, the user will also feel that they are not lost. By using the real-world metaphors in design, the users relate a connection between the real world and digital experiences. All the operations are made visible to the user with a clear link, button, and tab labeling. Jakob Nielsen’s usability heuristics advises promoting recognition over recall in user interface design. In this UI we are promoting recognition by making information and functionality visible and easily accessible.
2. Familiarity
Familiarity is achieved here using real-world metaphors in icons and usage of colors. This will help our user to equip our users by allowing them to transfer existing knowledge about how things should look and work. For example, a trophy icon is used for the Leaderboard to relate it to scores and leading competitors. The red color is used to show the leaderboard end dates which are supposed to end soon to get more attention and alert the user. This will help our users to grasp the finest details of the conceptual model.
3. Consistency
Consistency is maintained in screen design, layout, typography, colors, spacking and operation. To conclude, this design is a Pixel-Perfect design.
VISUAL DESIGN
STYLEGUIDE FOR DEVELOPER
The iOS app Developer can use the below Styleguide to implement this design. This design is based on the iOS Developer Human Interface Guidelines (HIG) specifications.
Apart from the Styleguide which includes the font details, hex values, and dimensions, I usually provide all the assets for icons in 1×, 2×, and 3× PNGs for iOS and 1×, 1.5×, 2×, 3×, and 4× PNGs for Android, unless the Developer wants to use font awesome. In some cases, I provide SVG, depending on the design and the assets. I also provide my Sketch/Photoshop source file too in case the developer prefer to have that too.
Colors used for this app are inspired from the iOS Developer HIG specifications guidelines as it looks great individually and in combination, on both light and dark backgrounds. I do research on the company background, competitors, existing branding guidelines etc. When existing branding guidelines exist, the visual design will be designed based on that for consistency across the brand or the product. When redesigning or designing an entirely new product I create my own color palette, branding guidelines, pattern library, style etc.
Company: Apple
Project: ACAAR -Apple Care Account Activity Report
Deliverables: Dashboard UI
My Role: UI -Visual Designer
DASHBOARD UI
ACAAR -Apple Care Account Activity Report is a reporting tool which helps Apple's account managers to keep track of their account activity like repairs, money spent, warranty metrics and amongst other reports of their accounts.