(Mercedes-Benz Research & Development North America) was to create from scratch a cloud based Web Application as an extension to the In-Car Device app, called Digital DriveStyle, that was going to be released at the CES 2014 event in Las Vegas. I had one month to finish the task, from concept to completion. Web App Digital DriveStyle Client Mercedes-Benz (MBRDNA) ! Project Included Web Application for Digital DriveStyle ! Objective Develop a companion app for the In-Car device ! Date Nov 2013 — Jan 2014 ! Role in Project User Experience & Lead Interface Designer Mercedes-Benz (MBRDNA)
that can adapt to each screen size, utilizing each users maximum interaction area. The main task of the Digital DriveStyle interface is to interpret large volumes of data into familiar patterns, and facilitate the access to this data, which correlate to specific information generated by the car’s computer and transferred via mobile app to the web server. Web App Digital DriveStyle 5 Description Mercedes-Benz (MBRDNA) Screen Wireframe: Adobe Illustrator Tools • Adobe Illustrator • Adobe Photoshop • Apple Keynote • Invision App
connected devices team for Mercedes-Benz, I produced concepts for the visual design of the web application. I started sketching high- level concepts on paper and I tried to generate as many ideas as possible with the least amount of time. After sharing and discussing them with UX and creative team members I start building low fidelity wireframes, focussing in what the screen does and to facilitate software development and testing. With the vision and feature set identified, the team drove hard into production. MY ROLE Mercedes-Benz (MBRDNA) Generating ideas: I sketched in more detail the specific interactions of each screen. WHAt I DID • Wireframing • Prototyping • Usability testing • Functional specification Interaction specs: Front end interactions validation to ensure that underlying technology could support the front end and user interactions.
worked with the amazing MBRDNA team, structuring the application on a tight schedule, just confirming that design thrive on collaboration. I had full support and collaboration for the whole division, from managers to developers. The result was an efficient and sophisticated dashboard, displaying generated data in a concise way, with a special emphasis on the driver’s personal experience. !7 Web App Digital DriveStyle Outcome Mercedes-Benz (MBRDNA) iOS Icon Project timeline Improved version
I was invited by the Advanced UX Design team to continue and lead one of the most important projects of the division, and help them to revamp the actual Interface of the In-Car device. The project was basically built over the architecture from the first version but with a more contemporary and fresh approach. In-Car Device App Digital DriveStyle Client Mercedes-Benz (MBRDNA) ! Project Included In-Car device Application for Digital DriveStyle ! Objective Revamp app for the In-Car device ! Date Nov 2013 — Jan 2014 ! Role in Project User Experience & Lead Interface Designer Project brief Mercedes-Benz (MBRDNA)
an interface design based on the previous one. The existing visual design was outdated, about 2 years old, with an excessive use of gradients, reflections, and ornaments. Mercedes-Benz R&D decided to make a huge upgrade. Focussing in a reduction of ornamentation, a clearer hierarchy with emphasis on content motion and depth through backgrounds. Description Improved version First version Tools • Adobe Illustrator • Adobe Photoshop • Adobe After Effects • Flash Action Script 3.0
In-Car version for inspiration. It was important to understand the differential and usability constraint when navigating through the Comand Rotary Knob, an interface control which allows the driver/user safer interaction without taking their eyes off the road. !10 In-Car Device App Digital DriveStyle MY ROLE Mercedes-Benz (MBRDNA) Low-fidelity screen wireframe Prototype WHAt I DID • Wireframing • Prototyping • Usability testing • Functional specification
had a similar structure from the previous version. The results are an innovative experience and an easier interaction, a next generation of the Digital DriveStyle, maintaining brand consistency, while simplifying the experience. Subtle animations were used to to optimize user perceptions of responsiveness. 11 Outcome Mercedes-Benz (MBRDNA) Demo tests were made in different screen size devices. Project timeline Click to watch the demo
all the Digital DriveStyle products was the main motivation for this project. This application and the Cloud based service is currently in development for web and iOS and will soon be piloted in Mercedes-Benz vehicles for testing and revision. iOS Mobile App Digital DriveStyle Client Mercedes-Benz (MBRDNA) ! Project Included iOS MobileApp for Digital DriveStyle ! Objective Develop a companion app for the In-Car device ! Date Fev 2014 — Mar 2014 ! Role in Project Mobile UI Designer Project brief Mercedes-Benz (MBRDNA)
was to create a cohesive, authentic, and scalable interface that would seamlessly complement and add to the overall experience. Users don’t have to learn new ways to interact with their applications every time they switch between different platforms and devices. DESCRIPTION Mercedes-Benz (MBRDNA) Tools • Sketch app • Adobe Photoshop • Adobe Keynote • FramerJS First version: Main menu First version: Last Mile Navi Context of use
this specific project was on crafting a fresh new look-and-feel and at the same time optimize the interaction between the user and the collection of data processed from the vehicle. MY ROLE Mercedes-Benz (MBRDNA) Low-fidelity screen wireframes WHAt I DID • Usage statistics • Best practice analysis • Task flows • Site map • Wireframing • Prototyping • Functional specification
Digital DriveStyle The redesigned Mobile Application reflects the sophistication, simplicity, and functionality associated with the experience of driving a Mercedes-Benz car. In this particular project the challenge was to align Web apps, In-Car Devices and Mobile applications as part of a Cloud based package service soon to be launched by MBRDNA. This mobile app provides a best-in-class experience allowing frequent users an easy and seamless access to experiencing the features, the services and data from the vehicle. Outcome Mercedes-Benz (MBRDNA) Improved version: main menu and parking reminder See all past trips qáãÉ=áå=íê~ÑÑáÅ min 40 `çãÄáåÉÇ mpg 37 ^sd=péÉÉÇ mph 60 aáëí~åÅÉ 45.3 i~íÉëí=íêáéë=ëí~íë i~íÉëí=íêáéë=ëí~íë tÉÇåÉëÇ~óI=lÅíçÄÉê=O 100% 9:23 PM AT&T Project timeline
the client. I was asked to design a new interface for the Pandora’s app. The challenge was to immerse into the Android universe, understand the constraints of the new Kit Kat 4.4 version, and find the right balance exploring the operational system capabilities and progressively push for a custom branding version. Android Mobile App Pandora 2.0 Client Pandora ! Project Included Mobile App Interface Design concept ! Objective Proposal for Pandora ! Date April 2014 — May 2014 ! Role in Project Mobile UI Designer Project brief Pandora Media Inc.
the objective was to develop a new solution for a Pandora’s new app. Pandora’s design has a pretty simple and functional interface that users can immediately understand. They have a clear conservative position. Also, they made a huge effort rebranding to a more “modern” identity. Based on that, I decided for an evolutionary approach rather than a revolutionary. 17 Android Mobile App Pandora 2.0 Old version: Splash Screen, Main, Station Select. DESCRIPTION Pandora Media Inc. Tools • Sketch app • Adobe Photoshop • Adobe Keynote Actual version: Splash Screen, Main, Station Select.
which is pretty efficient and bring a few but powerful new elements to the actual interface. The app takes an experimental approach with the way users can swipe the controls (Inner circle). A fresh light branding to go along with the launch of this new app. Android Mobile App Pandora 2.0 MY ROLE Pandora Media Inc. Low-fidelity screen wireframe Immersive content gestures. Iconography evolution WHAt I DID • Ideation • Wireframing • Prototyping • Functional specification
the app allows the interaction to become the center of the experience. This solution leverages the distinct characteristics like translucent overlay, full screen hide navigation and lean back approach. Android Mobile App Pandora 2.0 Outcome Pandora Media Inc. Proposed branding Improved version
to create an identity, website and mobile interface for this new project, a local commerce service called Spending Karma, which provides merchants with a suite of products and services, including customizable deal campaigns, credit card payment processing capabilities, and point-of- sale solutions. Website & Mobile App Spending Karma Project brief Client Digital Kerosene ! Project Included Brand guidelines, Website & iOS Mobile App UX/UI ! Objective Branding, website,and iPhone app ! Date Jan 2014 — Jun 2014 ! Role in Project Web and Mobile UI Designer Spending Karma
to engage and enhance the experience for users by allowing a fast interaction, where the app didn’t require any attention other than the initial check- in, giving them a continuous cycle of rewards that can be shared with friends integrating social and incentive components. The main purpose of the app is to onboard new users into the service with as little hassle as possible, and have the interaction centered around the simple idea of receiving rewards. DESCRIPTION Digital Kerosene Concept development: User onboarding Tools • Adobe Illustrator • Adobe Photoshop • Invision App • Sublime Text 3 • Transmit Wireframe Rendering with Sample Content Media
design, copywriting, branding and front‑end development for the corporate website. Produced paper and click-through design prototypes. Produced all required digital assets (icons, layout grids, buttons, template, color palette, etc.). Then I designed and aligned look-and-feel for the website, marketing materials, and an unique iPhone app interface 22 Website & Mobile App Spending Karma MY ROLE Digital Kerosene The wireframes depict the layout of the screen content, including interface elements and navigational systems, and how they work together. WHAt I DID • Branding • Task flows • Site map • Wireframing • Prototyping • Functional specification CLAIM Jerusha’s Shared Kar... Expiration Date $8.60 Location Name Other Relevant Information Earn Karma Here 21 px / 16 pt 18 px / 14 pt 16 px / 12 pt w: 55px h: 55 px Location Name Other Relevant Information Earn Karma Here 10 px 16 px 10 px 15 px Truncation with “...” 5 px 10 px Font Size and Spacing for List Items Detailed specifications.
that the most precise metaphor for this service was the word of mouth, the users’ benefit consists in earning and sharing Karma, a kind of cumulative coupon discount, the main tasks are the ‘give’ and ‘get’ actions. The minimal design, bold and clear iconography, a soft rounded type set and a beautiful color palette give to this app a warm and comfortable feeling, intentionally, it creates a positive aura, a place where you can spend some time giving and getting stuff from your friends. This project still in progress. Website & Mobile App Spending Karma Outcome Digital Kerosene iOS Icon Improved version
recruitengineers
sugiyama_sukedachi
degudegu2510
uhooi
ryoya_frst
chatwork_hr
tatsuyasawanobori
takanorip
myates3
narizuka
satomium1
takuro_nakajima
keavy
chriscoyier
sferik
caitiem20
shpigford
maggiecrowley
jonyablonski
rasmusluckow
rmw
trallard
keathley
marcelosomers
![Aug 2014 portfolio [email protected] www.rodnylobos.com Palo Alto, CA 94301 c](https://files.speakerdeck.com/presentations/63eb2d3010c801324de17ae407783e32/slide_23.jpg){kind=link}