Pixeltree Logo

Design Process |  Hifi mockups & clickable prototype

After the lo-fi mockups were created and approved, we created hi-fi mockups where branding elements, copy, and true assets were applied.
Then the mockups were wired in Figma to create a clickable prototype to emulate the flow of the final product.
Select hifi mockups - created in Figma
First image

Participant dashboard where they can add evaluators and send them links to their leadership survey. 

Second image

Originally, the “Evaluation Requests” page was divided into complete and incomplete surveys. We ended up consolidating these into a single page with each request being marked as “Complete”, “Incomplete”, and “Complete”. Upon current reflection, I would have the completed surveys display at the bottom of the table and incomplete/not started surveys begin at the top to reinforce their importance of needing completion. 

Third image

Despite its wordiness, the change in name of this page helped clarify its purpose for users. This change was made after the first week from launch. This page is meant for evaluators who have been asked by participants to complete surveys for them. Creating an account is optional for evaluators but does offer the convenience of organizing and labeling requests. Alternatively, evaluators can complete surveys via a link shared in the email. 

Fourth image

Once the final deadline has passed, feedback is compiled into a single report and uploaded by a Level52 admin into Avo. Email notifications are sent to participants that their reports are ready. Ideally, before reports are opened, the participant watches a primer video and completes a brief questionnaire to help set them up for accepting critical feedback. Originally, these two steps were required to unlock the “View Report” button but we opted against it. Reports are compiled and shared via HTML link. 

Fifth image

When participants click “View Report” from the My Reports page, they are taken to an HTML version of their report. Each section is divided into expandable components. 

Sixth image

Participants can open and collapse the various segments of their report. The report shows data based on all the evaluator scores and any written feedback. Participants can also see their self-given scores and compare against their peers’ scores. Depending on the section, there is opportunity for the participant to enter “personal reflections” as a response to feedback. This info is then discussed with their leadership coach to develop strategies for personal development. 

Seventh image

Here is an example of a “Personal Reflection” section where the participant can record their thoughts about the given feedback for that module. These reflections are captured in the admin panel and on the My Report page itself for quick reference. 

An in-development feature as of February 2024 is implementing an AI Coach for participants to interact with to help provoke thoughtful answers and strategies and determine a development plan to support their goals