Challenge Summary
Welcome to the UNI Direct - Responsive Website Design Concepts Challenge. In this challenge, we are looking for your initial design concepts that will help us redesign the current B2B “Direct” website to make it more modern and responsive.
We are looking for you to provide design concepts and click-path solutions based on the provided design problems. This is the first challenge in planning our new user experience!
Round 1
Submit your design for a Checkpoint feedback:
1. Home
4. Product Page and product customization flow
Please provide us with a click diagram of your design
- Notes.jpg: Any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Design plus any Checkpoint feedback:
1. Home
2. Category/Search Results Pages
3. Product Page
4. Product Page and product customization flow
Please provide us with a click diagram of your design
- Notes.jpg: Any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Description:
UNI Services is a service-focused leader of branded uniform and facility services programs in the United States. We are looking to redesign our B2B catalog site "UNIDirect" to make it look modern and responsive.
Our current UNI Direct site design has not been updated for a few years. We would like to focus on updating the overall design but also focus on solving a couple of UX design problems.
A UNI Direct customer is looking to quickly sign in, see new products and browse our catalog. A customer has the ability to purchase products (clothing) and have their company logo placed on the products they are ordering. We have three user types.
User Types:
A - Logged in User:
- This is a UNI Direct customer who has an account with us
- They have the ability to upload and view many of their logos
- They can customize and buy products.
B - Non-Logged in User
- Doesn’t have any logos.
- Can buy products only from e-Store.
- Can shop for all products in e-Store.
C - Company Store User
- This is a user with a company-specific account that only lets them see a smaller selection of product types and customization options
- This is very similar to Logged in User (A), but with the restrictions on product types
- Example: A store user who can login and see products that have their logo - but not able to admin the acccount.
Screen sizes:
- Desktop: 1024px by 768px
- Mobile: 320px x 480px
Design Concept Goals:
- We are looking to update the overall look and feel of the UNI Direct site
- How quickly could a user find what they are looking for (products)?
- How quickly can a user “sign in”
- We are focused on ease-of-use for viewing products and customization of products
- Awareness of what’s above/below fold and what’s important
Supporting Documents:
- Please use the colors and brand from the attached Branding Guidelines (Branding Guidelines.pdf.zip)
- Branding Guidelines: Do not copy the referenced site but use it as inspiration for colors... we want the brands/sites to "belong" together but still be distinct
- Screenshots of the current website (treat these as wireframes) (screenshots.zip)
Required Screens:
1) Home:
00-Home-NotSignedIn.png
- We are looking for a modern homepage for our website.
- You can user existing image/photos from the site.
- Include a carousel in homepage view (this feature will still be available)
- User can login as a regular user or a Company Store User
-- For employees within a specific company that can log in to and see a limited set of products, colors and logos
-- Employee would generally be directed to a customer-specific URL (e.g., www.unidirect.com/reddtruck) but could potentially start at unidirect.com and would need to know that they should log in to a Company Store
Navigation:
- Can be changed if there is a better and more useful design for the site, but needs to follow best practices for a catalog of products type of site.
- You can change the layout for Navigation, sign in and register.
- You cannot change the navigation items - these are set by the template
2) Category/Search Results Pages:
Category-page-SignedIn.png & Search-Results.png
- We need the ability to filter various categories.
- We are open to suggestions on refining the logo library area - Show us advanced search options. (we want someting new and intuitive compared to the existing)
- Show new sorting options, like top sellers.
- Rethink pagination, can we use “View More” button or other options for a better design experience?
3) Product Page:
Product-Details-Tactical Polo.png
- The ability to preview customer logo on product when previewing it.
- The ability to show bundled products
- “Customize” button to more noticeable and higher up on the screen
- People who bought this product also looked at this product.
- Recommended products.
- Inventory levels on site, how many pieces are left?
- Add product to wish list.
4) Product Page Customization flow:
Product-Details-Customize-default-view.png & Product-Customize-view2 - 6.png
- The most important thing is the ability to customize the products to customer needs.
- The ability to add Emblems, Name Tags, Screen-printing and embroidery to customization flow in various set locations on an article of clothing the user is customizing.
- Current customization UI has accordions set up to customize different elements of the products what can you do to make it easier to use and more aesthetically pleasing? An accordion can be OK as a solution, but if you can make something better, do so!
- Logos will be showing in the right column, what are the customer options if he has more than one logo to potentially use.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
Target User:
- UNI Direct Customers
- UNI Direct Customers are B2B customers looking to quickly get into the application and purchase products. This is NOT a typical website - so SEO is not a consideration.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Design and User Experience.
Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.