Red Digital Cinema
ROLE
User Experience, Visual Design
Objective
Red Digital Cameras is a leading manufacturer of professional digital cinema cameras. They were looking for a web responsive re-design that would communicate their brand values and enhance the customer e-commerce experience.
Stakeholder Goals
Embrace and expand existing brand awareness “Culture drives commerce”
Create organizational alignment; production facilities, movie studios, and creative influences developing a cohesive ecosystem of brand values, products, and services.
Position Red as an industry leader and educator
Emphasize product modularity
Service both B2B and B2C personas
Initial User Feedback & analysis
“Website is not responsive, hard to view on mobile.”
“Visual Design is dated.”
“Website is not a good reflection of their cameras value offer.”
“Search functionality is not very effective; hard to find information.”
“I prefer to go through a salesperson as I’m unable to customize my camera to fit my needs on the website.”
“I like the sense of community around Red’s boards and their tutorials; I frequent these pages to improve my skills ”
“I would like to be able to provide feedback and product requests on the website.”
“I prefer to go through a sales person as I’m unable to customize my camera to fit my needs on the website”
Improvements
Based on the initial user feedback and site analytics, we proposed the following improvements…
Web-to-Mobile Responsive Design - 63% of users were attempting to access the site on mobile.
Emphasize Visual Design - Improve all imagery & product visualizations that communicate brand core values and technical specifications. User base values aesthetic; the brand should align to their users core values
Streamlined Shopping Experience - Current shopping experience is not efficient or contextualized.
Re-design the Information Architecture - Elevate the educational content throughout the entire site experience. Site analysis reflected that in the majority of returning visitors were accessing community and educational pages.
Surface Support - Although the studio users prefer to contact vendors for product questions, a substantial portion of Red’s customers, the individual contributors, hobbyists and freelance cinematographers rely heavily on the community boards to request product improvements and request troubleshooting information.
Build Your Camera Workflow
The Build Your Camera workflow was a primary area of focus for the revamp as Red’s primary product offering and competitive edge are their cost-effective, modular high-end cameras. Emphasizing modularity was vital to the user experience. The experience also had to adapt to mobile.
In the first iteration, I created a flow with a sticky module that pins their selected parts and acts as an experience tracker. This approach was unsuccessful because users, though highly visually motivated, value price break down per part over part visuals in their shopping experience.
Iteration #1 -Sticky tracker proved to be confusing in user testing. [Click to Enlarge]
What we learned from Testing…
Sticky navigation with accessories doesn’t follow the branding experience; users were worried skinned design would look cluttered and make navigation confusing
Drawer pattern in the tracking module is not intuitive. Users do not feel it reflects an accurate summary of the parts they chose.
Users would like to see cost breakdown by components to track total
Users would like to the ability to save the camera build and pay later
Overlay with the part name is not intuitive; users were asking where they could refer to the part name throughout various parts of the flow.
Iteration #5 - Clean, tabbed approach but felt this missed the mark in terms of brand awareness. As a page that reflected the brand’s primary product offering, it didn’t feel like a central experience. [Click to Enlarge]
Iteration #8 - Final Wireframes. This experience was simplified, streamlined and addressed user concerns from the first iterations. The cost breakdown was sticky to the right side. We leveraged product images through visual design to highlight and market the products. [Click to Enlarge]
Sitemap
Stakeholders felt that Customer Support, Red 101, and Build Your Camera were central to Red’s product offering and brand. We worked with the stakeholders to ensure that these modules were easily accessed and visible from the homepage for easy access.
Visual Design
Red had a marketing style guide but not a pattern library. Since there were multiple designers on the team, there were minor design inconsistencies across multiple pages once the designs were approved and finalized. So I went ahead and created a pattern library and standardized common patterns in the site such as dropdown menus, icons, grids, and more. I also adapted the colors and typography from the original style guide. Since I was the last designer to work on the project, I also went ahead and ensured that all the files were consistent and adhered to the patterns established in the pattern library before development handoff.
