Topcoder Framing Application Design Challenge

Welcome to The “Topcoder Framing Application Challenge”.

The scope of this challenge is to design a series of user interface elements as part of a new micro front-end solution for Topcoders customer-facing platform. Basic wireframe provided as perspective, we want to look for your creativity here.

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

Please provide the following screens for the checkpoint along with your clickable Marvel prototype with hotspots. You may combine the desktop and mobile view in one marvel project. Please request the link in the forum.

1. Onboarding

2. Interaction accessing/switching micro-app 

3. Onboarding Mobile View

4. In-App Nav Mobile View

Round 2

1. Onboarding

2. Interaction accessing/switching micro-app 

3. Onboarding Mobile View

4. In-App Nav Mobile View

CHALLENGE OBJECTIVES

• To design The Parent interface which we will call “Framing Application”.

• This Framing Application will act as a frame for a user to engage with micro-app inside, please note the micro-app is out of scope, we need your solution on the framing interface and how user engages in between these micro-apps through the Application.

• This App will be accessed through a browser, that includes mobile platform, so please keep this in mind when you designing your interface should look good in both.

 

APPLICATION OVERVIEW

Framing application enables the:

• The standardized app-to-app navigation method

• The standardized in-app navigation method

• Standardized cross-application features, which are not related to navigation: log-out, profile access, notifications, ” contact support.

Currently there are several Topcoder customer-facing applications already developed for different purposes such as Projects, Challenge Manager, Skill Search, TaaS and Topcoder X and probably more in the future so we need to simplify how users will access these applications. The framing application will be a solution where they can navigate and access each app inside the Framing Application’s frame. There is no fixed solution on how the Framing Application looks like, we are open to your creativity and ideas of how this will look. 

 

AUDIENCE

Topcoder Employees

Copilots

Clients 

PERSONA

Name: Gary

Occupation: Topcoder Client

Goals: 

• To easily use the Framing Application to switch between one app to another.

Frustration:

• Switching from one application to another in multiple tabs, losing context.

Wants:

• Seamless experience from one app to another without leaving the main Framing Application.

• There will be universal navigation to help Gary to navigate between micro-apps.

• Want to see the Framing app is aesthetically clean and simple, and navigating between the micro-apps are easy.

 

USER STORY

Gary is a Topcoder client and need to monitor multiple projects that is currently ongoing, from the Framing header he can switch easily to designated app he needs to be. 

For example, he can open the micro-app  “Project App” to start the administration starting the project. However, he needs to find a community member with a specific skill to complete a piece of work. From the framing application’s navigation, he switches to the micro-app “Skill Search” to find the talent that he needs. Again the micro-app is out of scope, the challenge is about the interaction how Gary switching from one app to another only.
 

DESIGN GOALS & PRINCIPLES

Easy to use interface:

• The design should follow the Topcoder Branding, styling and behaviour.

• A functional navigation (app-to-app; in-app) method that is consistent across app experiences, browsers and device types.

• A simple wireframe is given to give you an idea but if there is a better idea/layout/solution is much preferred. 

    

EXPLORATION SCORE

Creativity: 7

1: barely new ideas

10: a utopic product with features not proven to be able to be fully implemented

 

Aesthetics: 6

1: low-fidelity design, wireframe or plain sketch

10: top-notch finished looking visual design

 

Exploration: 4 

1: strictly follow an existing reference or production guideline

10: open to alternative workflows/features not listed here that would help the overall application

 

Branding: 10

1: don’t care at all about the branding just functionality

10: without a properly branded product there is no success

 

GLOSSARY

• Micro-App  - are a new pattern where web application UIs (front ends) are composed from semi-independent fragments that can be built by different teams using different technologies. Micro-frontend architectures resemble back-end architectures where back ends are composed from semi-independent microservices.
   

SCREENS/FEATURES

Please make sure your design includes the following screens/sections. We are open to your suggestions about the structure of the screens as long as deliver the solution we are looking for.

Overall

• The app will have a consistent header with the standard parent application menu, which will be used across all Topcoder customer-facing platform applications. User can switch from one app to another from here easily.

• The header must include username/profile and a submenu for accessing the profile.

• A way to move between apps in the app zone. Ie:  move between "Projects" and "TaaS" and "Challenge Manager" and other micro-app.

• In-App Nav component ( navigation ) this will be changing based on the micro-app user currently accessing.
  
   

1. Onboarding 
Show us the default view of the Framing Application header view, as noted in the overall point, this header will always consistent, and user able to navigate between one app to another from here, there will be some sets of universal menu and username as well in addition of the app.  We don't want to fixate how the header layout should be, you can decide if it's a tab/app picker/dropdown? we want to see your approach and creativity what will work the best? Please do your research since this micro frontend design is a trend nowadays and widely used, Header should be both aesthetically beautiful and functional.

For the content of the app, you may put placeholder, this is out of scope do not worry what would be there.

2. Interaction accessing/switching micro-app
Show the interaction how the user chooses to navigate from one app to another, refer to the basic wireframe provided, your goal is showing the interface that Framing application act as a parent header where user can always switch from here.

Each app will have their specific navigations which we call In-App navigation, ie: the user is choosing the Taas app, then the In-App nav will now changing to links based for this app. The wireframe is a very basic guide to give you perspective,  show us your creativity here, should the In-App menu access from the sidebar or subheader? Please do your research what would be the best approach for this scenario.

3. Onboarding - Mobile View
Show us the onboarding mobile view version.

 4.In-App Nav Mobile View
Show us how the In-App in mobile view looks like 

 

Here are the sample lists of navigation for some micro-app already developed, you may choose which app you want to use for your design scenario.

1. Taas App : My teams,  Feedback, Invoices, Reports.

2. Skill-Search App : Search, Groups, Data Import.

3. Projects App : All Projects, Report, How Topcoder Works

4. Challenge Manager App : Launching Work, Ask a Copilot, FAQs 

BRANDING GUIDELINES

You can use to the Topcoder GUI kit as your base, use the colour and styling, the app will be accessed through multi-system ( IOS and PC) and different platform as well such as mobile and tablet, so the design should work well in any of system and platform.

SIZE 
Desktop : 1366px width and height as required
Mobile : 1125x2436

DESIGN ASSETS / INPUT DATA

• Topcoder GUI Kit
• Basic Wireframe 

TARGET DEVICES    

• Web Browser and Mobile Browser

 

FINAL DELIVERABLES

• All original source files

• Create files in Adobe Photoshop, Adobe XD or Sketch.

• Marvel Prototype - 

  • Upload your screens to Marvel App. You may combine the desktop and mobile view in one marvel project.

  • Send your marvel app request to seetakaurchamba@yahoo.com

  • Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.

 

------------------------------------------------------------------------------------------------------------------------