Challenge Summary
Welcome to the Brivo - Responsive Website UX Refinement Design Challenge.
The purpose of this refinement design challenge is to take the feedback from the first challenge and continue to update and refine the Dealer user experience. It is important to build on what is provided and make it a better experience.
Round 1
Initial Designs for a checkpoint review
- Home Page updates
- Products Page updates
- Product Details updates (desktop and mobile)
- Any addtional screens for review
Notes.jpg: Any comments about your design for the Client
NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client.
Round 2
Your Final designs for all the required screens with all checkpoint feedback implemented.
- Home Page (Desktop + Mobile)
- Products Page (Desktop + Mobile)
- Product Details (Desktop + Mobile)
- Login (Desktop + Mobile)
- Search (Desktop + Mobile)
- Request a Demo Flow (Desktop + Mobile)
Feel free to add any other additional screens which are necessary to explain your concept and flow
Notes.jpg: Any comments about your design for the Client
NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client.
Challenge Details:
In this refinement challenge, we are looking for your design expertise in improving the provided design and merge/add items as needed based on the provided requirements.
Challenge Downloads:
- Source files from the previous challenge are available on Google Drive.
- Please ask permission to bwalles"at"appirio.com and csystic"at"gmail.com
IMPORTANT!! Refinement Considerations..
- The site will be responsive - design for Desktop and Mobile (iPhone) in this challenge
- Please go through the changes required in each page and come up with better user experience.
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- The overall design still need to be transparent, clean vibrant and bright.
Dealer User Story:
I'm a dealer who is familiar w/ Brivo and I go to www.brivo.com to access my dealer account and look up information for a customer. I go to www.brivo.com and notice that they have a new website. Right away I click on the "What does Brivo do" and watch the Brivo intro video. At the end of the video...I'm really impressed so I request a demo. I provide my name, company name, phone number, company email, and select what I am interested in (from a drop dow list field) and then I'm given messaging saying that a Brivo reprentative will be in contact with me for my Demo.
I then return to my task of looking something up for my customer. From the home page I click on products and services and do a search for solutions for commercial real estate. A list of solutions is presented to me at which point I further refine my search and filter the results by category X___________. I find the solution that I'm looking for and get to a product detail page. On the product detail page I see all the latest updates and documentation for this Brivo product. I browse some of the documentation and download manuals and other items to share w/ my client. I also notice that I can email the information to my clients and when viewing it on my mobile phone I can quickly see product details without needing to download a PDF. I watch the new product video and then "socially" share this video with some of my customers.
Note the goal is to complete the "Dealer" story so we can start prototyping this soon!
Required Pages:
Below are the pages required for this challenge..
Overall Changes:
Both submissions have aspects about them that we look. Visually...we like the colors and overall look and feel of submission 2, while we like the overall structure and suggested UI of submission 1. However....we do like submission 2's product detail page as the kind of detail and page structure that we like for this page. Please use this guidance to further refine and improve on the aspects of these submissions tha twe like.
- For overall design look and feel (colors, vibrance, and photos) we prefer Submission 2
- For page structure and functionality we like Submission 2's solution
- For overall messaging and stucture (excluding product detail page) we like Submission 1
- Please make sure all text/copy on the pages is legible.
- The blocks/sections still need to have more trasnparency (yet still legible)
- Make the navigation at the top with more transparent and blurred background. (see "design 02")
- The Language flag signs in the header need be better/more creative art.
Home Page:
- Use "design 01" as your base
- We like the overall navigation/social and layout of this solution
- The three call to actiions (I'm new to brivo, I'm a brivo customer, I'm a brivo dealer) needs additiona refinement - but we like this concept. The current solution needs to "pop" more off the page. Think of how to call more attention to this area and indicate that it's an action item for a user. Consider what the hover state looks like and how the additional information on the hover state is shown. We need to make a hover state that can have it's typography be legible over photos and colors.
- We like the color direction and "pop" from the images that is used in submission "design 02" - please incorporate this
- The text needs to be more legible/work better in the design
- Fix the font/typography hierarchy on the page - the diffrent sections/typography is small/could look better (typogaphy is better in "deisgn 02")
- At the bottom, the Brivo Labs and CloudPass sections are a bit boring with just the blue blocks.
- CloudPass will not be as prominent so how can this area be improved/showcase areas (any type of content could be replaced in here)
- We like the footer from "design 01"
Products Page:
- Use "design 01" as your base
- We need you to refine the sliders shown in this page as it's hard to follow
- Fix the font/typography hierarchy on the page - the diffrent sections/typography is small/could look better
- We like the Brivo Solutions hover/flip style shown in this page but the icons still need to be refined.
- Currently the filters are shown at the top, we would like to have the filter to be on the right hand side (see "design 02")
Product Details Page:
- We prefer the product page design from "design 02" so please merge/update the design
- This page needs to be about the product and the user needs to be able to quickly find and see details and data sheets
- We would like you to refine this page to show Summary and Product Features (follow "design 02")
- We also like in "design 02" the "Customer Testimonials, Product Documents, feed of product updates and also a button called 'Subscribe to Product Updates'."
- We would also like the user to be able to email Documents from this page
- Product details also needs to work/look great on mobile
- Show pages that demonstrate playing a video from this page
Login Page:
- The Current login layout is very busy.
- This needs to be very simple!
- Please remove the login through social accounts as everyone will have an assigned account.
New Pages:
Search
- How does search work and look?
- Show pages that illustrate the provided use case story
Request a Demo
- How does this flow work and look?
Brivo Dealer Landing Page
- Landing page for new and current Brivo Dealers
- Can be a version of the Brivo home page from design 01
- Show pages that demonstrate playing a video from this page
Brivo Brand story landing page
- Landing page that is a creative way of showing the brivo brand story
- Needs to have a space for a Brivo brand video
- Should have space for Brivo testimonials
- Consider showing a fun interactive way for Brivo to showcase it's culture and employees.
Target Audience:
- New Users, Existing Customers and Dealers
Judging Criteria:
- How well you design and refine for the NEW Brivo.com - make sure to read all the instructions!.
- Cleanliness of your graphics and design.
- Design looks and User Experience.
Submission & Source Files:
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.