This is a challenge to test your knowledge of Design and Prototyping;
In this challenge, there are several ways to develop and obtain the proposed results. The objective is to evaluate its form of structuring and autonomy in decisions to build something scalable.
- Consider as deadline 5 days from the start of the challenge. If you have been invited to take the test and it is not possible to complete within this period, please notify the person who invited you to receive instructions on what to do.
- Document the entire research process for the development of the activity (README.md in your repository); the results of these tasks are just as important as your thought process and decisions as you complete them, so try to document and present your hypotheses and decisions as much as possible.
The company Trevo Digital works with several customers globally in more than 15 countries, one of the main characteristics of the company is the strong positioning in the digital sector with a team focused on generating quality leads. Therefore, all projects must be very well structured with SEO, fluidity and reuse in mind (components reused in several projects). Its goal is to create a project that gives attention to the requirements mentioned above.
- Use some online collaboration design tool. Ex: Figma
In this challenge, we worked on the elaboration using MUI Design System and components to development the mobile and web prototypes of the screens of the Dashboard project of a new Trevo Digital Client.
Before starting work, the requirements and analysis team developed the initial WireFrame for the desktop version of the project:
To work on the prototype, we must follow the color palette that the client sent:
The Design System already exists, and it is essential to use the existing components and create new ones following best practices, such as:
- Component Names
- Structure
- Variants
Use the Material UI Design System as a base: MUI 5
To develop Desktop screens, we must review whether the UI and UX are appropriate/consistent/satisfying before working on the prototype. With your knowledge, review the proposal and apply the necessary corrections that you consider necessary to improve the usability of the project.
No Wireframe proposal was developed for the mobile version, so we should elaborate it following the structure of the desktop version, but applying the necessary adjustments for the new version.
- Differential 1 Create a tablet proposal
- Differential 2 Use fluid components on Figma
- Differential 3 Prototyping a new screen that contains a table with users list and dynamic filters (Search, Order by, etc..)
Warn about the finalization and send for correction at: https://coodesh.com/challenges/review After this stage, the presentation / correction of the project will be scheduled.
Notify us of completion and submit for correction.
- Check if you answered the Scorecard attached to your application;
- Check if you answered the Mapping attached to your application;
- Access https://coodesh.com/challenges/review;
- Add the Figma embed link with your solution;
- Record a video, with a maximum of 5 minutes, with the presentation of your project. Use the time to:
- Explain the purpose of the challenge
- What technologies were used
- Focus on mandatory and differential points when presenting.
- Check if the Readme is good and make the final commit in your repository;
- Select the job posting on the dropdown field;
- Submit and wait for the instructions to follow the process. Success and good luck. =)
Use our chat widget to ask questions about the process or send an email to contato@coodesh.com.