Who? What? When? Where? Why?How?
Overview
Overview
Problem
How we keep our employees at Orange up to date with all the discounts?
How we collect their feedback and how we help them benefit from hundreds of perks?
How we keep our employees at Orange up to date with all the discounts?
How we collect their feedback and how we help them benefit from hundreds of perks?
Goals
• Build an app that is fast and easy to use for everyone, everywhere.
• Give Orange employees more visibility over the benefits.
• Create a platform to collect employees’ feedback and suggestions.
• Make the design very easy to implement.
• Give Orange employees more visibility over the benefits.
• Create a platform to collect employees’ feedback and suggestions.
• Make the design very easy to implement.
Project Scope
• Client : Orange S.A.
• Project Timeline : 1 week
• Deliverables : High-fidelity Prototype + Copywriting + App icon
• Languages : French + Arabic
• My Role : Product Designer (UI/UX, Branding, Copywriting, Motion Design...)
• Tools : Adobe Xd, Photoshop, Illustrator, After Effects, Lottie Files, pen and paper.
• Date : Circa 2018
• Client : Orange S.A.
• Project Timeline : 1 week
• Deliverables : High-fidelity Prototype + Copywriting + App icon
• Languages : French + Arabic
• My Role : Product Designer (UI/UX, Branding, Copywriting, Motion Design...)
• Tools : Adobe Xd, Photoshop, Illustrator, After Effects, Lottie Files, pen and paper.
• Date : Circa 2018
The Solution
• When we get lost or want to look for something, all we need is a hint, a guide, or a map. And how about all in one solution!? Yeah, hold my app!
• Mes Conventions, a mobile application that helps Orange employees find the nearest shops where they will benefits from deductions. Also, the app let employees see discounts details and give their feedback and suggestions.
• Mes Conventions, a mobile application that helps Orange employees find the nearest shops where they will benefits from deductions. Also, the app let employees see discounts details and give their feedback and suggestions.
Fast-forward to the
Design
Design
App icon
Deal + signed with a pen (Map Pin) = Simple and clean
Deal + signed with a pen (Map Pin) = Simple and clean
Adaptive icon
Color Picking
I tried to adapt the app content to go with the Orange Brand Guidelines colors by creating different tones from the palette.
I tried to adapt the app content to go with the Orange Brand Guidelines colors by creating different tones from the palette.
Font
Helvetica Neue to respect the Orange Brand Guidelines, and when there is an excuse to use Helvetica, use Helvetica!
Helvetica Neue to respect the Orange Brand Guidelines, and when there is an excuse to use Helvetica, use Helvetica!
Iconography
I used some Material Design icons by Google, and I added some little tweaks and details to these beautifully crafted symbols, that look great at any scale.
I used some Material Design icons by Google, and I added some little tweaks and details to these beautifully crafted symbols, that look great at any scale.
Motion
In this app I used simple transitions and micro animations that drew user attention to a specific area and gave him a clue about what's going to happen, putting emphasis on the right elements to make the user interface more predictable and easier to navigate.
In this app I used simple transitions and micro animations that drew user attention to a specific area and gave him a clue about what's going to happen, putting emphasis on the right elements to make the user interface more predictable and easier to navigate.
Putting it all together to serve an ideal user experience
UI/UX
UI/UX
Easy authentication
Silent authentication experience using the Orange employee Sim Card and an easier setup
Silent authentication experience using the Orange employee Sim Card and an easier setup
1. Failed authentication scenario
2. Silent authentication experience
3. Easy and obligatory account setup
2. Silent authentication experience
3. Easy and obligatory account setup
A map that really guides you
The map (home page) heavily inspired by Google and Apple maps for a smooth user onboarding, but also implies some extra features and animation
1. New spots, never under your radar again!
2. Want a clearer view? See by category!
3. Do you want to see more? Swipe up for the detailed list
2. Want a clearer view? See by category!
3. Do you want to see more? Swipe up for the detailed list
You can't tell a tale if you are not there
You are 2 taps away from what you need, at most.
1. Predefined filters & fewer distractions
2. Nearby search? Auto refresh results
3. Obvious and memorable navigation
2. Nearby search? Auto refresh results
3. Obvious and memorable navigation
1. All the user needs in one single interface
2. Unlimited and clear options
2. Unlimited and clear options
Simple forms
Short forms for a better experience and to encourage inputs
Short forms for a better experience and to encourage inputs
Straightforward forms
Smooth predictable navigation
A navigation system that reminds the user of his journey
A navigation system that reminds the user of his journey
Back-stepping without a stumble
Control the app
Classic and clear menu and lists, plus a familiar interactions to help you customise the app to your preferences
Classic and clear menu and lists, plus a familiar interactions to help you customise the app to your preferences
Make it your own and rest your eyes
A clear error messages that help you clear error messages!
Error messages that tell you what's the problem and help you solve it
Error messages that tell you what's the problem and help you solve it
Test launch
The impact
Positive reception and plans for future features
Less inquiries
Email inquiries about the program decreased dramatically
More suggestion
Employees started sending suggestions from the first time use of the app
Collecting feedback
A huge number of reports regarding the service quality of some stores was sent directly to the Human-resources department from the app
Merci!
