e-Portfolio
The web and mobile ePortfolio apps by D2L work together to allow students in experiential learning courses to easily document and share what they learn throughout their trips and experiences. This allows them to easily build reports later and for teachers to view and comment on their progress.
My Contribution
The ePortfolio web app already existed in D2L's product suite. The task presented to me was to design a mobile companion app for both iOS and Android.
As the only designer on the mobile ePortfolio project I worked as part of an Agile SCRUM team to iteratively design the application from the ground up.
This meant sketching screens and workflows, wireframing, prototyping, usability testing, and design critiques.
I left the project a couple months before product launch after having defined the navigation and layout of all the screens via medium fidelity wireframes. A significant portion of the development had been completed. When I left, the team's next step was to move into higher fidelity designs by defining the final visual style.
Usability Testing Example
As an example of some of the work I did, please see the below summary of a usability test performed with a Balsamiq prototype.
Design Problem
Users must be able to easily and quickly Share, Tag or Collect a post (Reflection) when they create it.
Options
Two prototypes for creating a Reflection were created. One uses the Hub and Spoke UX pattern and one uses the Wizard UX pattern.
The hypothesis was that the Hub and Spoke pattern would be faster to use when the user simply wanted to create a Reflection and did not want to share, tag or add it to a collection, whereas the Wizard method would be faster and easier when a user did want to take each one of those steps.
HUB AND SPOKE Wireframes
The initial create a reflection screen follows the iOS paradigm for most popular social media applications at the time. A user can add photos, videos, audio clips or a link to their reflection.
The above review screen allows users to review their Reflection and the auto-generated title for it before they post. They can also choose to Share, Add tags, or Add to collection which will take them to a different screen where they perform the action and then return to the review screen. This workflow uses the Hub and Spoke method.
Wizard wireframes
The initial create remains the same in both workflows.
After selecting “next” the user is taken to a Share screen. When next is selected from that screen, the user sees a Tag screen, then a Collecting screen. The goal is to make it easier for users to engage in sharing, tagging and adding to collections by taking them through the step by step process of each action.
Test Method
Each of the four scenarios below were performed by 5 different users who matched the demographics of our persona. A script was used to maintain consistency. The option that a user started with was rotated to achieve unbiased results.
1. Wizard UI. Post text only. (No actions).
2. Hub and Spoke UI. Post text only. (No actions).
3. Wizard UI. Tag, share and collect while posting text.
4. Hub and Spoke UI. Tag, share and collect while posting text.
Qualitative data was gathered through questions after each test.
Results
When posting text only, the Hub and Spoke method outperformed the Wizard method as expected. Qualitative feedback on the Wizard method was negative as users disliked seeing screens that were not useful.
When posting and completing all 3 actions the Hub and Spoke method outperformed the Wizard UI again. This result was less expected, but showed that the Hub and Spoke method can be easier to discover and understand than the Wizard method.
Users also gave negative qualitative feedback about the wizard flow throughout the user research.
Therefore, the Hub and Spoke method was selected for the app.
Android phone image from p-px.com