VAVA Dash Re-Design
Cynthia Chong
VAVA Dash Application Redesign Cynthia Chong
VAVA Dash Re-Design
Design Process: I. II. III. IV. V. VI.
Competitive Analysis General Feedback Personas & Scenario User Interaction Flow Hi-fi Prototyping – Redesigned Screens Annotated Prototypes – Redesigned Screens
Some of the questions that comes to my mind while I am designing: 1. 2. 3. 4. 5. 6.
Who are the competitors of the app? Who are the target users of this app? How will this fit into the current flow of the app? What will these screens look like? How will this be entertaining and engaging? How will this address and solve the user needs?
Important design elements that I pay attention to: 1. 2. 3. 4. 5.
Consistency User-friendly User- centric Empathy Concise
Cynthia Chong
VAVA Dash Re-Design
I.
Cynthia Chong
Competitive Analysis (VAVA Dash V.S Go Pro)
VAVA Dash
Go Pro
Icon
Similar Features
1. Supports a wireless connection with the VAVA Car Dash Camera 2. Supports real-time video streaming 3. Supports video and photo downloading and playback 4. Supports video and photo editing 5. Supports video and photo sharing to Facebook, Twitter, and Instagram
1. Control GoPro from a distance. Frame the perfect shot with live preview, and get full remote control of camera functions 2. Send it. Live. Share epic moments on social right as they happen. Live stream on Facebook, YouTube and compatible video platforms that support an RTMP URL 3. Check out your shots. - Save space and time. View your photos and videos right on your phone and choose what you want to offload beforehand 4. Epic edits—automatically. Footage instantly transforms into an awesome shareable video. Choose a theme and get unique effects, transitions and music 5. Share the shot on the spot. Post your favorite photos and videos right to Instagram, Facebook, YouTube™ and more. Or share them by text or email
VAVA Dash Re-Design
UI Design
Operating System
App Store Rating
II.
Cynthia Chong
Color theme: White, Grey, Sky-blue Minimal design Graphical icons Slideshow banner Rounded button 4 bottom navigations Slide menu on home page Slide menu and bottom up window on Dash Cam page Bottom up menu on media page Slide menu on setting page
Color theme: White, Black, Sky-blue Minimal Design Landscape background Rounded button 4 bottom navigations Drop down menu on media page Slide menu on setting page
iOS/ Android
iOS/ Android
iOS - 3.9/ 5.0
iOS - 4.8/ 5.0
Android - 3.0/ 5.0
Android - 3.2/ 5.0
Feedback on the VAVA Dash App: A. Home Page: • • • •
Clutter Design (so many contents at once, which user may not know where to start) The slideshow banner is distracting as it is an advertisement (at least it shouldn’t place on the home page) “Help Center” is misplaced “The Installation Guide” appears twice within the same page (one under the “Help Center”)
Suggestions: • • • •
Remove the slideshow banner (Cleaner & Consistent Design) Move the content inside the “Help Center” to the home page to reduces the numbers of page/navigation (Save user’s time and effort) Remove “Help Center” section Separate the “VAVA Dashcam Overview”, “Installation Guide”, “Connection Guide”, and “GPS Connection Guide” as four rows on the home page (Consistent Design)
VAVA Dash Re-Design
Cynthia Chong
B. Dash Cam Page: • • •
Inconsistent color (The color of “Connect Dash Cam” button is different from other pages) “Connect Dash Cam” and “Defect Device” seems to have the same function Right top icon may confuse the user as it is the same icon as the bottom navigation (or I can’t see the differences of the function of these two icons)
Suggestions: • • •
“Connect Dash Cam” button and “Defect Device” link, which one of them can be removed or combine those two functions into one as they have the same function Focus on 1 action (which is connect Dash Cam) Remove the top right icon (duplicated)
C. Media Gallery Page: •
The top right icon is unfunctional/unclickable
Suggestions: • •
Remove the top right icon Add sort “Date” in the filter
D. Register/Log in Page: • •
Too many navigations within one page The function of “+” icon and “Add Driving Journal” button is duplicated under the “Driving Journal” Navigation
Suggestions: • • • •
Remove the top right icon, and move the content of it to the page directly as “setting” Combine “Travel Log” and “Driving Journal” in one navigation/ someway Remove the “+” icon under the “Driving Journal” Navigation (duplicated) Add slideshow banner on the bottom of the page
VAVA Dash Re-Design
E. Conclusion: • • • • •
III.
The Design needs to be cleaner and more minimal The Color needs to be consistent A lot of navigations need to be simplified or combined Reduces the numbers of pages Avoid duplicated navigations/functions
Personas & Scenario (attached PDF)
Cynthia Chong
VAVA Dash Re-Design
IV.
User Interaction Flow (attached PDF)
Cynthia Chong
VAVA Dash Re-Design
V.
Cynthia Chong
Hi-fi Prototyping – Redesigned Screens (attached PDF)
Home Page
Dash Cam Page
VAVA Dash Re-Design
Filter Page
Cynthia Chong
Register/Log In Page
VAVA Dash Re-Design
VI.
Annotated Prototyping – Redesigned Screens (attached PDF)
Cynthia Chong