Our client briefed us on the requirements for a new report feature. I presented a range of wireframes that explored a dashboard style page with class data, report layout and styles. The concept phase allowed the client to react to ideas, refine the requirements and determine which of the the initial asks were necessary or not needed.
Polished design for prototype
I applied our clients’ existing style guidelines for the look and feel. While it may have limited initial ideas for navigation and aesthetic in my imagination, it allowed me to focus on the user experience rather than overly exploring or refining the design on individual components like navigation or table styles.
Building a prototype with Sketch and Marvel
It was a challenge to link 10 page designs with over 50 variations to show different states and elements the user could click on. To manage this, I organized my art boards by page type and also by tasks the users would take in the test.
Pro Tip #1: To save time linking the same component in dozens of instances, link master components that always go to the same page in the symbols panel
Pro Tip #2: For master components like a "Back" button that will take the user to a varying page depending upon where they came from, draw a hotspot in the symbols panel and use the "previous artboard" link. A hotspot will also allow you to change that link in for each specific places instance.
Pro Tip #3: Use Marvel apps "User Flow" feature to review the flow of your document or show to clients.
Feedback from users
Our client remotely facilitated usability testing sessions with select teachers throughout the country. Some of the feedback teachers provided included:

+ Create a new "standards view" so instructors can review students progress.
+ Add a standards metrics tile to the top of the report so always present. 
+ Add a “Date Range” filter so teachers can view the report in specific ranges of time.  
+ Make certain buttons bigger so they are easier to see and click.
Changes from user feedback
Create a new "standards view" so instructors can review students how students are progressing.
Added more summary metrics including a new tiles for standards and a chart top help visualize student progress.
“Date Range” filter so teachers can view the report in specific ranges of time. 
Made the "settings" button larger and more clear.
Building a prototype using Sketch and Marvel for a large feature like this one offered technical challenges, but I learned tips on how to manage a complicated file. Putting this new feature in front of users and gaining their feedback was exciting, especially for the areas that weren’t working because it provided us the guidance to make it better.
Back to Top