About

Capture and share driving moments

Design the mobile and desktops apps for the car DVR system

Waylens

Waylens is a HD car DVR that captures real-time performance data of every aspect of drive.
We designed the mobile and desktop applications including recording, editing and sharing functions for Waylens company. The product system aimed to offer an easy-to-use and consistent user experience.

Multi-platform design
for the HD car DVR system

OVER THE BOUNDARY

The project not only began with interface design, but also needed to take the technology limitation into consideration, as the hardware of the camera will largely influence how users interact with the app. For instance, in order to streamline the user flows of connecting the camera with the app, we closely cooperated with the engineers to find the new design opportunities to solve the current problems and to make the process easier to be understand.

DESIGN ON 1.39” SCREEN

We were in charge of designing a speedometer function called LapTimer on the car DVR with a 1.39-inch screen and cooperate with Waylens designers. Given the screen size, we had to make interactive behavior as simple as possible. We decided to use sliding gesture when users need to switch between functions and defined at most one tapping interaction for each page to minimize the complexity of the design. As a result, the users can concentrate on driving and interact with the camera through perceiving short beeps and animation effects.

MAKE THE DRIVING EXPERIENCE MORE ENJOYABLE

After rounds of discussions with the Waylens development team, we decided that the design goal of the app is to extend the fun of driving, not to create complicated operations. Users can easily locate valuable moments he chose or auto-detected by algorithm of the product, and do further editing and sharing with the app. Besides, we visualized the editing process to make it more understandable for the users.

QUICK AND EFFICIENTLY SELECT, EDIT, AND SHARE VIDEOS ON THE DESKTOP

We were able to use a larger display area to display, edit and preview materials and provide enhanced editing area. After connecting the camera to computer, the user can drag and drop recorded materials to the editing area to modify the video while adding his favorite music or instrument theme from the right menu bar to quickly finish the editing of a 1080p HD video. Users don't need to leave the main panel during the whole video editing process. This reduces the cognitive load of the users and significantly improves the operational convenience.

DESIGN CONSISTENT USER INTERFACES FOR DIFFERENT PLATFORMS

Considering the target users' preferences and the camera appearance, we tried to follow the existing visual style as well as emphasis on professional and enjoyable design style. As a result, we chose dark grey as the primary color of the app and orange as indicator which is also the brand identity color of Waylens. In the visual design guidance, we elaborated on the use of color, font size, projection, and the use of controls, etc. to enhance the consistency and adaptively of the software on both of the current platforms and future development.

Camera

iOS/ Android

Desktop

Camera

iOS/ Android

Desktop