Challenge Summary
Welcome to Foo Cloud Services - Shopping Cart Wireframe Challenge. In this challenge, we are looking for you to come up with wireframes for a self-service portal solution which allows an organization called Foo.com to provision Infrastructure as a Service (IaaS) resources, Platform as a Service (PaaS) and Software as a Service (SaaS) services.
At the end of this wireframe challenge, we are looking to have a complete solution for the User Experience and flow of the application.
Round 1
Submit your initial wireframes for Checkpoint feedback
1. Common Functionalities
1.1 General Homepage
1.2 Login
2. General User Functionalities
2.1 View Account,
2.2 Servcies Catalog,
2.3 Compare Services
2.4 Shopping Cart
Notes.jpg: Any comments about your design for the Client
Round 2
Your Final wireframes for all the required page with all checkpoint feedback implemented.
1. Common Funtionalities
2. General User Funtionalities
3. Foo.com Approver Funtionalities
4. Admin Funtionalities
Notes.jpg: Any comments about your design for the Client
The Purpose of this challenge is to come up with wireframes for a simple self-service portal. This “Cloud Portal” shopping cart is meant for users to browse through catalog of cloud services and provision desired services such as a virtual machine (i.e. IaaS) or a future capability such as an application platform (i.e., PaaS) or shared service such as a SharePoint account (i.e., SaaS) from multiple cloud providers, order, provision and manage their resources.
We are looking for a self-service portal that will describe and market the services, allow the users to see differences and compare services and ultimately select a service to provision/deploy/purchase.
Wireframe Expectations:
- Your wireframe design needs to be fresh, innovative, engaging and easy to understand.
- Other names for a shopping cart would be: vending machine, service catalog, booking portal, ordering system and marketplace. We are looking for a new layout of these traditional themes. (Need to be like a Shopping Cart with Checkout options etc..)
- Even though this application will be responsive (desktop, tablets, mobile devices) - you need to create wireframes only for desktop.
Existing Problem:
This new self-portal will enable the customers to handle it by themselves, thereby eliminate the below issues..
- Foo's customer wish to request services and have them provisioned in a significantly shorter time, so this self-portal will help them to request services themselves.
- Foo's inability to expand both capacity and type of services.
- Foo's inability to integrate new cloud environments and manage customers.
Required Functionalities:
These are some common functionalities for all users..
1. Common Functionalities:
1.1 General Homepage:
- This will be the main page where a user will have the ability to login, register
- Can we display a list of featured services or top chosen services?
- We are open to ideas for this page, come up with thoughts on this.
1.2 Login
- User selects login from the homepage and this screen allows a user login into the application to access the list of existing services and also view a catalog of services to initiate/purchase!
- User enters the organizational ID and name they belong to.
- Then, they enter their username and password.
- This is a common use-case for all the users (Consumer, Approvers and Admin) of the application
1.3 Create Account
- Consumer will visit the main login screen and looks to create a new account..
- They enter their organizational ID and name they belong to.
- Followed by their existing username/password..
- Once they submit these details, it needs to be approved by an approver.
- If it is approved/rejected by the approver, it will be notified to the consumer.
1.4 Register User
- Users will be able to click "Register User" and view a form to enter the credentials
- We will be clarifying the difference between Create Account and Register User in the forums during checkpoint feedback!
2. General User Functionalities:
Inaddition to the common user functionalities, below are the general functionalities for the consumer:
2.1 View Account
- A user views their account details
- Basic Account details will be displayed and also show their association with an organization
- In addition to basic details - we also need to capture the billing information, feel free to show your ideas for this page.
- What are the actions items required from a user point of view.
2.2 Services Catalog:
- This will provide a Web-Marketplace for the consumer to initiate the Services..
- Users will have options to search for Infrastructure as a Service (IaaS) resources, Platform as a Service (PaaS).
- Think on how to display list of services provided under IaaS and PaaS, how can we categorize them?
- Think on additional features such as trending price (change of prices), tags, ratings for the services, reviews about the services, most popular services, sorting of the listed services.
Examples of services: (Each of these services will also have an associated image)
- Windows 2012, MS SQL 2008 Server
- Windows 2012 IIS V8.0 Web Server Windows 2012 , IIS- V8.0
- Windows 2012 Application Server Windows 2012 , Application
- Windows 2008, SQL Server 2008 Server Windows 2008 , MS SQL 2008
- Windows 2008 IIS V7.0 Web Server Windows 2008 , IIS- V7.0
- RHEL 6 WebLogic Server RHEL 6 , Weblogic
- RHEL 6 Oracle Database Server RHEL 6 , Oracle
- RHEL 6 Oracle 11g Database Server RHEL 6 , Oracle 11g
- RHEL 6 Application Server RHEL 6 , Application
Further Details of these products could include:
1. Windows 2012, MS SQL 2008 Server
Instance size: Small - 1 vCPU 6GB RAM :1:6
Network Type: Isolated
Storage Type: Mirrored
Unique Server Name: to delete
EO Administration (Monitoring): No
2. RHEL 6 Application Server
Instance size: Large - 4 vCPU 8GB RAM :4:8
Network Type: Networking
Storage Type: Replicated
Unique Server Name: order
Elasticity: No
EO Administration (Monitoring): Yes
- How can simplify the overall ability for the user to find out a particular services (keyword search and filters?)
- Price of each of the services need to shown and also need to have the ability to add items to shopping cart.
- Once all items has been added to the shopping cart, they can submit the request to
- Clicking on each of the service should show more details.
2.3 Compare Services:
- Allow the user to compare through the cloud services offered.
- How can this be shown, and how many products can be compared at a time?
- Come up with thoughts on this.
2.4 Shopping Cart:
- Once the consumer had added items to the shopping cart, they will be able to see the overall total for the chosen items
- They will then choose option to submit the request for the chosen services.
- These request will be sent to the approver and based on the approval status - the services will be charged and provisioned to the consumer.
2.5 Manage Services and Performance Monitoring
- We need something like a dashboard with these below information..
- Alerting: Need some ways to alert the user on the status of the services which they have.
- Provide performance and service monitoring including reports, graphs and dashboards to monitor performance of installed resources and services
- Total Usage reporting on CPU, memory, storage, and network, OS, applications, and quantity of servers.
- A user will also have the ability to remove a service by sending a deprovision request - think on how this can be shown?
3. Foo.com Approvers Functionalities:
In addition to the common and general user functionalities, user will have these below abilities...
3.1 Approve User Accounts
- All users accounts which they want it to be created is sent to the approvers for approval
- After the accounts are approved, a notification will be sent to user on whether it is approved or rejected.
- Probably on rejection, we need to allow the user to enter the reason why it is rejected.
3.2 Approve/Reject service request initiated by the consumer.
- Request sent by the consumers will be approved here..
- An approver will check the organizational quota and see to it that if its within the quota.
- Probably on rejection, we need to allow the user to enter the reason why it is rejected.
4. Admin Functionalities:
In addition to the common and general user functionalities, an admin will have these additional pages and also make sure we have room to expand/add more features for the admin.
4.1 Manage User Account (Edit/Delete users accounts)
- An admin will have the ability to manage the users
- Admin views a list of broker users and will have the ability to edit/delete the user account.
- Think on ways to retrieve a user account that is being searched for easily and also need to have the ability to filter the accounts.
4.2 Manage Services/Catalog:
- An admin will have the ability to manage the services
- They will be able to see a list of existing items and think on how to present this list of services
- They will be able to add a new item to the list of services, creation of a new service will need the admin to choose service item category (currently it is only IaaS) and enter additional details like description, charges and any other information - admin should be able to use templates for creating the item - so a set of information can be entered in that.
- Feel free to add anything that you think will be appropriate.
Target Audience:
- Foo.com business end-users (non-technical) who would deploy applications and workloads (not an operations type engineer)
Judging Criteria:
Your submission will be judged on the following criteria:
- User experience
- Completeness and accuracy of the areas of functionality and content
- How well your wireframes provide a consistent user flow and clear information architecture for the application
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
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.