Challenge Summary
Welcome to "Spigit UI/UX Customer Interface Refinement Design Challenge". In this challenge, we need your creative skills and help us to reimagine our primary page styles and layouts and create the new and the best UI/UX for Spigit Customer Interface Screens.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
01) Application Home aka AppHome
02) Challenge Home Page
03) View Idea Page
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
01) Application Home aka AppHome
02) Challenge Home Page
03) View Idea Page
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
The Spigit system is primarily an idea management system with a core capability for engaging employees in the business of ideation. The Spigit idea management platform enables industry leaders to tap into the collective intelligence of employees, partners, and customers to find the best ideas and make the right decisions. Spigit currently has over 6.5 million users worldwide spread across over 300 client installations.
Our primary site can be found from this link: https://www.spigit.com/ (Please note that we are not redesigning our primary/main website, we are going to redesign the Customer Interface website, see more details below).
The application works by allowing end users to input ideas, socialize and collaborate upon them with colleagues before seeing the strongest ideas move through a stage-gate process for prioritization. The end users or crowd are also involved in a prioritization of ideas through various techniques that include Rating, Pairwise or side by side voting and predictions. Ideas that make it through are then selected for implementation.
We want to re-imagine our primary page styles and layouts. Currently, our application is suffering from a dated UI/UX and whilst we are working towards re-designing these pages, the steps we are taking are just temporary.
Challenge Goal
Our goal is to modernize the UI and UX of the core pages that our end users visit, thereby ensuring that their first impression of the platform from a design perspective is positive, modern and usable.
Branding Guidelines
There aren't really any restrictions other than:
- There must be a clear logo area in the header
- We must have standardized colors for to the 'Go to', 'Inbox', 'Search' and Profile from the header.
- Clients have the ability to control their brand colors for header, nav, links, and buttons.
- As long as the brand makes sense, the colors are wide open.
- Font and Design Style is open to Designers
Screen Examples:
Here is several Customer Interface example for our clients:
- https://unhcrideas.org/main/Page/Landing, This is a custom landing page produced by the client using simple HTML grid layouts. It is not typical of a Spigit Application Home page but serves to show how clients greet the crowd.
- https://unhcrideas.org/recruitingtalent/Page/Home, Here we have an example of a completed challenge. Note the layout of the buttons and information. This is a standard challenge homepage for current clients.
- https://bmwgroup.spigit.com/joybmwcompactclass/Page/Home, An example of a challenge homepage for a live challenge. This a hybrid of a standard deployed page with some custom content.
- https://frontier.spigit.com/main/Page/FrontierHome, This is another custom example of Application Home. The boxes at the bottom indicate challenges that can be registered for.
Target Devices
- Desktop: 1366px(w) & height up to your design
- Mobile: 750px x 1334px (iPhone)
Screen Requirements:
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Application Home aka AppHome
Reference Application Home Screen.png, Client Sample - Adidas.png, UNHCR Site.png
- Think of this as the first point of interaction with the Application. There are some key components and actions that the End User sees 's and can interact with:
-- A banner/welcome image or video (client can place)
-- A list of all open campaigns/challenges
-- An activity feed or stream that shows all ideas/conversations etc from the application
-- A Trending ideas feed which shows the ideas trending across all challenges.
02) Challenge Home Page
Reference Challenge Homepage - Chronology Details.png, Challenge Homepage - End User View.png, Challenge Homepage - Varied Activity.png, Challenge Homepage with an timing.png
- Key screen that is present on all challenges. Every user accessing the challenge see's the screen. A user can:
-- See the challenge question and description which may include a video
-- Be welcomed with a personal message
-- Have a quick link to the most important activity according to a rule (it begins always with 'Post your idea')
-- See how long the challenge has left or the particular phase of the challenge has left.
-- See ideas that they can rate/vote upon when they first access the page
-- Be able to see filters for ideas they've not seen or not rated yet
-- Have links to view all ideas entered
-- Show some kind of challenge trending ideas
-- Have a high level view of the challenge statistics (# ideas, votes, views and comments)
03) View Idea Page
Reference View Idea Comments Open.png, View Idea Stats open.png, Pairwise Example.png
- This is an idea page. Every published idea gets the same template but the content obviously changes. The key activities are:
-- See the Idea image, title, details, attachments
-- Rate/Vote on the idea
-- Compare ideas
-- Comment on the idea
-- See the tasks for this idea
-- See statistics like how many idea views and votes there are.
-- Join an idea team/invite other users to the team
-- Manage the idea through the control panel
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Target Audience
- Our users fall into three key personas:
-- End-user - a person who may contribute ideas, collaborate with others and rate ideas.
-- Moderator/subject matter expert - a user with the ability to evaluate ideas at various stages of the idea lifecycle.
-- Platform Administrators who are responsible for configuring the platform.
- The pages we are looking to improve above are mainly focussed on the 'End-User' persona. We need to ensure that the first pages these users see are modern, fresh, engaging and consistent with other enterprise social tools or indeed public-facing platforms. The pages should make clear calls to action and visually stylise key aspects of the page where the user should focus.
Design References (What we like):
- Background color from https://www.linkedin.com/ is good. We like the flow of a light background color coming in between the widgets/boxes/call outs.
- We also like the styling of Workplace by Facebook https://www.facebook.com/workplace/about?source=topbar for the activity/content areas.
- https://youearnedit.com/employee-experience/product/tour/ is a good example of an employee engagement tool that works well with the styling.
- Team working tools like https://asana.com/product have some nice visuals that call out the key pieces of information on the content and activity streams.
Design Reference (What we don’t like):
We do not wish to look like any of our competitors, namely:
- BrightIdea - https://www.brightidea.com/product/innovation-programs/
- Hype - https://www.hypeinnovation.com/home
- QMarkets - https://www.qmarkets.net/products/idea-management/editions/
- We want to be outstanding!
Documentation
Ask access for the documentation in forum
- Application Home Screen.png, This page is the normal first screen a user sees after logging in. It shows a welcome banner type image (client add) or a video with the open/available campaigns and challenges listed below. The Activity Stream & Trending widgets are at the bottom.
- Challenge Homepage - End User View.png, A Challenge or Campaign homepage that shows the challenge question, a personal welcome message and the ability to enter an idea from the start. We also surface ideas for the end user to rate if that feature is enabled.
- Challenge Homepage - Chronology Details.png, Challenges are timebound. They are split into different 'phases' of activity; e.g. idea capture, rating and commenting through to Pairwise (Pair Voting) and Predictions (Crowd Predictions) This screen shows the end user accessing that detail.
- Challenge Homepage - Varied Activity.png, This is the end user view of the Challenge but Pairwise/Pairs voting is now enabled. The central activity now signposts them to Pairwise as the key activity.
- Pairwise Example.png, This screen shows what Pairwise is. Each user is given sets of pairs by the system and asked to express a preference
- Client Sample - Adidas.png, Shows an older Activity Stream within Spigit
- UNHCR Site.png, Public Site - This is a Spigit site that has a homepage constructed of HTML inside of widgets. This is a client option but not repeatable at scale.
- Challenge Homepage with an timing.png, This is an example where the phases and times of challenge home are expanded by the user.
- View Idea Stats open.png, This is the View Idea page with the Statistics section open.
- View Idea Comments Open.png, This is the View Idea page with the comments section open.
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
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 image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (might need to convert it to photoshop later), XD, or Sketch and saved as an editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial design for a Checkpoint Feedback01) Application Home aka AppHome
02) Challenge Home Page
03) View Idea Page
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates01) Application Home aka AppHome
02) Challenge Home Page
03) View Idea Page
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
The Spigit system is primarily an idea management system with a core capability for engaging employees in the business of ideation. The Spigit idea management platform enables industry leaders to tap into the collective intelligence of employees, partners, and customers to find the best ideas and make the right decisions. Spigit currently has over 6.5 million users worldwide spread across over 300 client installations.
Our primary site can be found from this link: https://www.spigit.com/ (Please note that we are not redesigning our primary/main website, we are going to redesign the Customer Interface website, see more details below).
The application works by allowing end users to input ideas, socialize and collaborate upon them with colleagues before seeing the strongest ideas move through a stage-gate process for prioritization. The end users or crowd are also involved in a prioritization of ideas through various techniques that include Rating, Pairwise or side by side voting and predictions. Ideas that make it through are then selected for implementation.
We want to re-imagine our primary page styles and layouts. Currently, our application is suffering from a dated UI/UX and whilst we are working towards re-designing these pages, the steps we are taking are just temporary.
Challenge Goal
Our goal is to modernize the UI and UX of the core pages that our end users visit, thereby ensuring that their first impression of the platform from a design perspective is positive, modern and usable.
Branding Guidelines
There aren't really any restrictions other than:
- There must be a clear logo area in the header
- We must have standardized colors for to the 'Go to', 'Inbox', 'Search' and Profile from the header.
- Clients have the ability to control their brand colors for header, nav, links, and buttons.
- As long as the brand makes sense, the colors are wide open.
- Font and Design Style is open to Designers
Screen Examples:
Here is several Customer Interface example for our clients:
- https://unhcrideas.org/main/Page/Landing, This is a custom landing page produced by the client using simple HTML grid layouts. It is not typical of a Spigit Application Home page but serves to show how clients greet the crowd.
- https://unhcrideas.org/recruitingtalent/Page/Home, Here we have an example of a completed challenge. Note the layout of the buttons and information. This is a standard challenge homepage for current clients.
- https://bmwgroup.spigit.com/joybmwcompactclass/Page/Home, An example of a challenge homepage for a live challenge. This a hybrid of a standard deployed page with some custom content.
- https://frontier.spigit.com/main/Page/FrontierHome, This is another custom example of Application Home. The boxes at the bottom indicate challenges that can be registered for.
Target Devices
- Desktop: 1366px(w) & height up to your design
- Mobile: 750px x 1334px (iPhone)
Screen Requirements:
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Application Home aka AppHome
Reference Application Home Screen.png, Client Sample - Adidas.png, UNHCR Site.png
- Think of this as the first point of interaction with the Application. There are some key components and actions that the End User sees 's and can interact with:
-- A banner/welcome image or video (client can place)
-- A list of all open campaigns/challenges
-- An activity feed or stream that shows all ideas/conversations etc from the application
-- A Trending ideas feed which shows the ideas trending across all challenges.
02) Challenge Home Page
Reference Challenge Homepage - Chronology Details.png, Challenge Homepage - End User View.png, Challenge Homepage - Varied Activity.png, Challenge Homepage with an timing.png
- Key screen that is present on all challenges. Every user accessing the challenge see's the screen. A user can:
-- See the challenge question and description which may include a video
-- Be welcomed with a personal message
-- Have a quick link to the most important activity according to a rule (it begins always with 'Post your idea')
-- See how long the challenge has left or the particular phase of the challenge has left.
-- See ideas that they can rate/vote upon when they first access the page
-- Be able to see filters for ideas they've not seen or not rated yet
-- Have links to view all ideas entered
-- Show some kind of challenge trending ideas
-- Have a high level view of the challenge statistics (# ideas, votes, views and comments)
03) View Idea Page
Reference View Idea Comments Open.png, View Idea Stats open.png, Pairwise Example.png
- This is an idea page. Every published idea gets the same template but the content obviously changes. The key activities are:
-- See the Idea image, title, details, attachments
-- Rate/Vote on the idea
-- Compare ideas
-- Comment on the idea
-- See the tasks for this idea
-- See statistics like how many idea views and votes there are.
-- Join an idea team/invite other users to the team
-- Manage the idea through the control panel
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Target Audience
- Our users fall into three key personas:
-- End-user - a person who may contribute ideas, collaborate with others and rate ideas.
-- Moderator/subject matter expert - a user with the ability to evaluate ideas at various stages of the idea lifecycle.
-- Platform Administrators who are responsible for configuring the platform.
- The pages we are looking to improve above are mainly focussed on the 'End-User' persona. We need to ensure that the first pages these users see are modern, fresh, engaging and consistent with other enterprise social tools or indeed public-facing platforms. The pages should make clear calls to action and visually stylise key aspects of the page where the user should focus.
Design References (What we like):
- Background color from https://www.linkedin.com/ is good. We like the flow of a light background color coming in between the widgets/boxes/call outs.
- We also like the styling of Workplace by Facebook https://www.facebook.com/workplace/about?source=topbar for the activity/content areas.
- https://youearnedit.com/employee-experience/product/tour/ is a good example of an employee engagement tool that works well with the styling.
- Team working tools like https://asana.com/product have some nice visuals that call out the key pieces of information on the content and activity streams.
Design Reference (What we don’t like):
We do not wish to look like any of our competitors, namely:
- BrightIdea - https://www.brightidea.com/product/innovation-programs/
- Hype - https://www.hypeinnovation.com/home
- QMarkets - https://www.qmarkets.net/products/idea-management/editions/
- We want to be outstanding!
Documentation
Ask access for the documentation in forum
- Application Home Screen.png, This page is the normal first screen a user sees after logging in. It shows a welcome banner type image (client add) or a video with the open/available campaigns and challenges listed below. The Activity Stream & Trending widgets are at the bottom.
- Challenge Homepage - End User View.png, A Challenge or Campaign homepage that shows the challenge question, a personal welcome message and the ability to enter an idea from the start. We also surface ideas for the end user to rate if that feature is enabled.
- Challenge Homepage - Chronology Details.png, Challenges are timebound. They are split into different 'phases' of activity; e.g. idea capture, rating and commenting through to Pairwise (Pair Voting) and Predictions (Crowd Predictions) This screen shows the end user accessing that detail.
- Challenge Homepage - Varied Activity.png, This is the end user view of the Challenge but Pairwise/Pairs voting is now enabled. The central activity now signposts them to Pairwise as the key activity.
- Pairwise Example.png, This screen shows what Pairwise is. Each user is given sets of pairs by the system and asked to express a preference
- Client Sample - Adidas.png, Shows an older Activity Stream within Spigit
- UNHCR Site.png, Public Site - This is a Spigit site that has a homepage constructed of HTML inside of widgets. This is a client option but not repeatable at scale.
- Challenge Homepage with an timing.png, This is an example where the phases and times of challenge home are expanded by the user.
- View Idea Stats open.png, This is the View Idea page with the Statistics section open.
- View Idea Comments Open.png, This is the View Idea page with the comments section open.
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
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 image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (might need to convert it to photoshop later), XD, or Sketch and saved as an editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (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.