Challenge Summary
In this challenge, we are looking to design a responsive web application - please go through the details in the challenge details and let us know if you have any questions.
Responsive Design:
- Design Challenge solution to include Desktop and Phone view of all required areas.
Very excited to see your designs for this challenge!
Round 1
Submit your initial designs for checkpoint feedback.
01 Home (All Users) - Desktop & Phone
02 Locations Detail (Normal User) - Desktop
02C Locations Detail (Admin User) - Desktop
04 Manage Addresses (Admin User) - Desktop
05 Manage Calendars (Admin User) - Desktop
- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
01 Home (All Users) - Desktop & Phone
02 Locations Detail (Normal User) - Desktop & Phone
02B Locations Detail (Editor User) - Desktop & Phone
02C Locations Detail (Admin User) - Desktop & Phone
03 Change History (All Users) - Desktop & Phone
04 Manage Addresses (Admin User) - Desktop & Phone
05 Manage Calendars (Admin User) - Desktop & Phone
06 Manage Employee Roles (Admin User) - Desktop & Phone
- As a part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
In this challenge, we are looking to design a user-friendly interface design for Hestia’s Locations MDM Application. This web-based application will allow an effective process for employees to view, manage and maintain Locations data.
Background Overview
The Hestia team is currently using a cumbersome spreadsheet and interface to view information about their numerous locations. A large amount of complex data is not easily organized into views that are helpful or efficient for users to extract the information they need. Hestia is looking for a more robust and user-friendly method to see and manage this wealth of data.
See the provided reference diagrams and sample data to help you understand the structure of this data (Reference: Hestia-locations-reference.docx, Location Sample Data_vTC.xlsx)
Below are general concepts regarding the data structure:
- Campus is the parent unit of a location. There may be multiple Locations within that Campus, and multiple Child Locations within that Location.
- The data can be drilled into via 3 distinct hierarchies, with attributes to organize the data in a cascading way. These 3 hierarchies and grouping attributes are:
- - - - Physical Hierarchy: Region > State > City > Child Location Type > Result: List of Locations
- - - - Financial Hierarchy: District Area > GLBU > Area > Cost Center > Location (ID) > Result: List of Locations
- - - - Operational Hierarchy: Blended Y/N, > Region > Main Branch > Campus > Result: List of Locations
- Each Location will be associated with all of the available attributes and values (from all 3 hierarchy paths). These details will be available for display (or edit) when the user selects a specific Location to view (Locations Detail screen).
Design Considerations
- We are looking for a simple, easy-to-use, modern design for this data-driven application.
- Follow UX best practices in regard to use of color, typography and sizing of elements.
- When suggesting functional elements, use up-to-date conventions and forms.
- Your designs can be compelling by making dense areas of content interactive. Enable users to expand or drill into longer lists/groups of data..
- We will need concepts presented for Desktop and Phone view. Create your screens for viewports: 1366px x 768px (Desktop), 750px x 1334px (Phone, @326ppi)
- Please follow the provided branding guidelines and documentation.
Required Screens / Functionality
In your submissions, please include all screens and functionality, as well as the specific content described below.
Note: No login screen needed. User will login to Hestia environment before reaching this app.
Global Header:
- Hestia Brand
- Title: Locations Master Data Management
- Account info: User Name / User Type
Navigation:
- Home (01)
- Change History (03)
- Manage Addresses* (04)
- Manage Calendars* (05)
- Manage Employee Roles* (06)
- Exit
(*only Admin Users)
01 Home (all Users):
The landing screen will allow users a way to see a list of Locations filtered and organized in a beneficial way to them, or to Find a specific Location. The results must give the user a path to access complete details associated with a specific Campus, its Location(s) and Children Location(s). Users will also see the most recent updates that have been made to the Locations Data. In all cases, results should allow the user to link from a location in the list to 02 Location Detail.
Counts: Active Locations 1400; Districts 52; Areas 39; Regions 19
Content:
1) “View Locations By” - Locations List
Note: The three options below should display results in a hierarchical way. Consider including options to expand the parent groups to reveal the associated child data.
(See sample diagrams for hierarchies: Hestia-locations-reference.docx)
(See sample data: Location Sample Data_vTC.xlsx)
Physical Hierarchy (Filters: Region, State, City, Child Location Type)
> Result: List of Locations
Financial Hierarchy (Filters: District Area, GLBU, Area, Cost Center, Location (ID))
> Result: List of Locations
Operational Hierarchy (Filters: Blended Y/N, Region, Main Branch, Campus)
> Result: List of Locations
2) “Find a Location By” - Search (& Filter)
- Location ID, Location Name
- Address
- Region
- GLBU
- Location Types (Distribution Center, Warehouse, Outside Storage Yard, Auxiliary Storage, Showroom, Counter, and Office Space)
> Result: List of Location(s)
3) “Locations Last Updated” - maximum 5, listed by update time, descending -
- - Date updated, Location ID, Location Name, City, State, Attribute changed: old value / new value
02 Location Detail (Normal User)
The Location Detail screen will display full details for a specific Campus or Child Location (parent/child).
Note: This data could be very dense and complex in some examples. Consider ways to group this information to allow the good organization, quick access, and scanning. e.g. accordions or tabs for visual separation.
Content:
- Title: Name of the item selected (Campus or Location)
- Campus Information:
(See sample data: Location Sample Data_vTC.xlsx -- tab: Campus)
- - - Campus Name
- - - Address (full)
- - - Currency
- - - Main Contact Info (Name, Title, Phone, Email, Role(s))
Location(s) - display for EACH:
Note: There are likely to be 2 or 3 Locations for each Campus.
(See sample data: Location Sample Data_vTC.xlsx -- tabs: Location, EX Campus, Location, Child)
- Location ID, Location Name
- Address Info
- Child Location(s) - The attributes available will vary depending on type. e.g. Warehouses, Counters, Showrooms - display for EACH: Note: There are likely to be 2 or 3 for each Location.
(See sample data: Location Sample Data_vTC.xlsx -- tab: Child Counters, Child)
- - - Company Name (Workday)
- - - Line of Business (LOB) Name
- - - Blended / Non-blended
- - - Cost Center Info: ID, Name, LOB
- - - Area Info: ID, Name
- - - District Info: ID, Name
- - - Region Info: ID, Name
- - - GLBU Info: ID, Name
- - - Open for Business, Shipping, Receiving (Y/N)
- - - (Counters only info) Counter, Pro-Pick-Up, Self Checkout, Staff (Y/N)
- - - (Showroom only info) Customer Facing Name, Visible to Websites (Y/N)
- - - Operating Hours
- - - Calendar & Events
- - - Contacts / Roles
02B Location Detail with edit option (Editor user)
Same as 03 with variation to see editable options for specific fields of data.
The following content should include an option to Edit and Save.
Child Location (s)
- (Counters only info) Counter, Pro-Pick-Up, Self Checkout, Staff (Y/N)
- (Showroom only info) Customer Facing Name, Visible to Websites (Y/N)
- Operating Hours
- Calendar & Events
- Contacts / Roles
02C Location Detail with full edit and create options (Admin user)
Same as 03B with variation to see editable options for additional fields of data, plus Create New items.
The following content should include an option to Edit and Save.
Child Location(s) -
- (Counters only info) Counter, Pro-Pick-Up, Self Checkout, Staff (Y/N)
- (Showroom only info) Customer Facing Name, Visible to Websites (Y/N)
- Operating Hours
- Calendar & Events
- Contacts / Roles (dropdown of defined Roles)
The following content should have the option to create new value.
Child Location(s) -
- Contacts / Roles (dropdown of defined Roles or Create New Role)
03 Change History (all users)
Users should be able to see the history of changes related to a specific attribute of a Location. The user can make choices to filter within one of the 3 hierarchies defined below, using the attributes listed to narrow their results list.
Content:
- “View History By” -
- - - Physical Hierarchy (Filters: Region, State, City, Child Location Type)
- - - Financial Hierarchy (Filters: District Area, GLBU, Area, Cost Center, Location ID)
- - - Operational Hierarchy (Filters: Blended Y/N, Region, Main Branch, Campus)
- Option to restrict results by date range (example: Last 6 Months)
- Display results list of locations
- - - Date of edit, Location ID, Location Name, Attribute changed: old value / new value
04 Manage Addresses (Admin only)
(See sample diagrams for Managing Addresses: Hestia-locations-reference.docx)
- Search (same criteria as on 01 Home) > Select a Campus or Location
- Display editable data for Address Information. Only Child Location Address (Line 2, Line 3) will be editable
05 Manage Calendars (Admin only)
(See sample diagrams for Managing Events Hours: Hestia-locations-reference.docx)
Search (same criteria as on 01 Home) > Select a Campus or Location
Display editable data for Calendar, Events, Hours for that Campus and child Locations
06 Manage Employee Roles (Admin only)
(See sample diagrams for Managing Employees/Roles: Hestia-locations-reference.docx)
- Search by Employee Name or by Location
- - - Search (entry field) > Select Employee Name
- - - Search (same criteria as on 01 Home) > Select a Campus or Location > Display employees associated with selected Campus, Location > Select Employee Name
- Display editable data for Employee and Role Assignment (edit/add/delete).
MarvelApp Prototype
- We need you to upload your screens to Marvel App
- Please send your Marvel app request to csystic@gmail.com (challenge copilot)
- You MUST include your Marvel app URL in notes /comments while uploading (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).
Target Audience
- Hestia Employees in various roles.
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- The overall design, UI and user experience.
- Consistency across the UX/UI
- How well you interpret the example screens (business relevance) and show us new ideas and concepts.
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
- Submit Marvelap as part of your submission.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD, or Sketch!
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.