Challenge Summary
Welcome to the FAST!! Electra - Mobile UI Design Concepts Challenge! This is the first challenge out of many where we will be engaging the community for quick ideation and concepts for new APPs for our customers. We are very excited to provide this new design opportunity for the [topcoder] design studio community to showcase their FAST!! Design skills!
We will be providing you with a basic use case scenario and some other basic direction and are looking to you to help us design the APP user experience.
We want to showcase how easy it is to engage the [topcoder] design studio community and demonstrate how well you can take ideas and turn them into great design and user experience concepts! Cash in on this great opportunity to prove your design skills and get a great portfolio piece in the process. Best of luck to you all!
NOTE: We have the Quick Checkpoint Deadline on this - please make sure to note the timelines!!
Round 1
Submit your initial screens for Checkpoint feedback
- For round 1 we would like you to pick 3 screens to focus in on from the list
- Recommended Set: 1. Splash/Welcome 2. User Profile/Dashboard 3. Designers Choice (Choose a flow that will help illustrate your concept)
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
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required screens with all checkpoint feedback implemented.
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
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Details
The main goal of this challenge is to take the provided design problem and design a simple, clean tablet user experience (UX)!
(We will be building this responsive, but want you to focus on the tablet version for this challenge).
Electra Tools manufactures and sells heavy-duty and portable cordless drills, impact wrenches, chop saws, and rotary hammers -- all branded with a red lightning bolt (provided). It’s lineup comprises some 500 tools marketed to professional cabinetmakers, carpenters, electricians, plumbers, remodelers, and welders. The weekend handyman can also buy Electra products and accessories at home improvement retailers like The Home Depot, as well as through the company’s e-commerce website. Electra Tools has been manufacturing quality tools since 1924.
Challenge Resources
For this challenge we are providing wireframes and design guidance for you!
DO NOT COPY the wireframes exactly - they are meant to help guide you and let you understand the application the audience would like to see designed. Think about the the user experience/user interactions and show us your solutions!
Design Problem:
Electra Tools APP
This mobile design concept is designed for an Electra Tools user. The goal of the APP is to enhance the user experience with Electra products. A detailed history of the user’s experience will be stored in this APP. A user can see their timeline documenting their career growth, their projects, and the Electra tools that helped them along the way. A user will have a robust “user profile” that includes their status, affiliations, and purchase history
A user can use this APP to quickly research Electra products, view product demos, access customer support and search Electra tools knowledge base to easily solve problems and allow them to focus on making money and not wasting time.
Design Considerations:
- Focus on the design being a great mobile experience - the application should be designed for iPad
- DO NOT copy the wireframes (if you do...everyone's designs will look the same!) focus on creating your unique approach to this project and the user experience
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Please use the branding guidelines given below.
- Images: Please use these product images in your design concepts
- We would like you to create the Tablet Storyboards - iPad Landscape display (1024 x 768px)
- Assume this is as a native application.
Branding Guidelines:
Design Direction Document includes color palette and other general branding guidelines.
- Color Palette: Use one or a combination of these colors palettes.
- Target Audience: Remember...we're looking for a design concept that speaks to the weekend handyman or professional cabinetmakers, carpenters, electricians, remodelers, and welders.
- Logo: Feel free to use the logo which we have in the design direction document.
Required Screens:
1) Welcome Page
- Application landing and login screen
- Use an eye catching photo that relates to the APP concept and brand
2) Side Bar and Navigation
- How does the user navigate this application?
- Include navigation that you think fits with the APP concept
3) User Profile/ Dashboard
- This page is a basic profile page that has users basic information. Elements in the profile might include purchase history, account information, recent projects, favorite tools, wish list items, union affiliation, message boards, recommended products, product demos, product offers, and interactive customer timeline*
- Think on what other details can be included here.
4.1) Customer timeline
As a loyal Electra Tool user, I need to see my journey with using their quality products. From vocational school, to apprenticeship, to my first job, and ultimately to owning my own company, I want to see how Electra tools have helped me along the way.
- This page will house a users achievements and goals from their workout progress.
- Think of progress meters, interactive customer timeline, and gamification of awards, levels, and goals
5.0) Products
- This page will show the 2 main product families for Electra tools and provide quick access links to products in each category
1- Power Tools
2- Hand tools
5.1) Product List
- After selecting a product family the user is shown a visual product catalog for all the products with Power or Hand tools. An image of the tool and top line information will be provided about each tool including product name, rating, sku number and top line specs.
- A user can filter this view by the following criteria
For Power Tools:
-Category (Cordless, Corded, Combo Kits)
- Status (Coming Soon)
- Product Systems
- Product Types
For Hand tools:
- Product Types
5.2) Product Detail
- This page is a detailed overview of the product. It can include photos, videos, product demos, product specs, documentation, warranty, features, specifications, where to buy, overview, related products, resources (manuals, articles and press releases), product reviews, and comments.
- The user should also have the ability to share and recommend this tool to his social and professional network via social sharing
6) Product Search
- From the main navigation a user should be able to quickly search for an Electra product and get detailed content about that product in a few clicks
7) Optional additional screens:
Below screens are optional but it would be great if we could get your design ideas for these screens..
7.1) - Union Home page:
If a user belongs or is affiliated with a Union, it would be good to show a Union homepage within the APP. Items included on a union home page would be messaging and notification, union documents and recommended Electra tool packages, and the ability to request Electra tools
7.2) - Electra Tool Brand story:
Since 1924 Electra has been manufacturing quality tools for it’s customers. It would be good to show an interactive brand story that sells the Electra brand proposition to their customers while showcasing Electra’s brand history
8) Presentation Screen
- Create a presentation screen of your mobile application!
- Place your designs within an iPad template! Showcase your submission; provide notes and explanations for your design concept
- Have the size if the presentation screen as 1024x764px.
Target Audience
- Our key target are trades persons - referred as MEP (Mechanical, Electrical, Plumbing) who is either a Union or NonUnion member
Judging Criteria
- How well you design the provided design challenge
- Cleanliness of your graphics and design.
- Design 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. Number your files (01, 02, 03, etc) this will help review them in order.
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.