Civitas

ROLE
UX Design Intern

TIME RANGE
June 2016 - August 2016

METHODS
User Research, Heuristic Evaluation, Stakeholder Interviews, Comparative Analysis, Sketching, Wireframing, User Testing

TOOLS
Sketch, InVision

THE BRIEF

Civitas Learning partners with colleges and universities to produce student success through insight and analytics. As the summer UX Design intern, I was tasked with improving aspects of a web application called Inspire for Advisors on a team of developers, designers, and product managers. Inspire for Advisors is an application that allows users to target students at risk of not persisting to the next semester.

My largest project was to create an onboarding design for the product that would enable users to quickly understand Inspire and to become immediately productive. The timeline for the project was 2-3 weeks of research and 6 weeks of designs, iterations, user testing, and finalizing.

Additionally, I helped identify, design, and test other usability issues, specifically filtering, to improve the overall experience.

By partnering with developers and product managers every step of the way, I learned to take designs from concept to production.

RESEARCH

PROBLEM ANALYSIS AND ONBOARDING

Step 1: Assess the current state of the application – In order to effectively design an onboarding process, I needed to fully understand the function of the application. A heuristic evaluation was a good place to start. Because I was relatively new to the product, I was able to identify simple usability issues— minor things like inconsistency of tags, buttons, and colors, a few redundant features, etc— that were overlooked by the design team involved with the product from its creation. A fresh pair of eyes can go a long way. This step of the process also enabled me to get a firm grasp of the utility of the product that would need to be communicated to users through onboarding.

Step 2: Stakeholder and User Interviews – More valuable than formulating my own opinion was the chance to gather the thoughts of those that had been involved with the product for far longer. In addition to the product manager and UX designer that assigned the project, I spoke with the multiple members of the user research team, the content strategy team, and client managers. Each colleague had different insights into what could be helpful when introducing the user to the product. These were valuable conversations because the people I spoke to were experts on the product’s users . Together, we were able to identify the components of the app preventing consistent use and a full understanding of its capabilities.

The information gathered from the heuristic evaluation and stakeholder interviews uncovered a few key findings:

• Users are generally confused when landing on the homepage of the application. They do not know what is being presented to them, nor do they know how to proceed.
• Users either do not understand or trust the data science that informs a few of the product’s key features.
• The product’s value proposition is still being formulated.

A note about the value prop: I asked stakeholders what they thought Inspire brought to the table. Each answer danced around the same ideas, but none was exactly the same. It is important to have a clearly defined value proposition when designing an onboarding process.

Separate from the stakeholder interviews I conducted was the chance to sit in remotely on user interviews with multiple staff members at a community college in Dayton, OH. The users were being interviewed about a different product in the Civitas package, but they provided key insights into their daily routines which proved to be valuable when it came time to design. I certainly was able to gain empathy for the users by listening to them talk about their engagement with the products and how it fits into their days. An important quote from a college faculty member and user of the product surfaced over the course of these interviews that I would use as a guide throughout the design process: “I think this is a very useful product and it is important to convince other faculty of this. If they can see its value, they won’t view it as just another system we are required to use.”

Step 3: Comparative/Competitive Analyses – An important part of the planning process was to research good and bad onboarding experiences across a variety of products. I compiled dozens of screenshots and pages of notes documenting the many ways applications bring their users onboard. It was useful to mix and match the existing concerns of our product with different onboarding techniques that might alleviate them. This bit of brainstorming was a good way to transition to the early stages of the design process.

Step 4: Keep stakeholders informed – I used the collection of research to create a deck which I presented to the product manager and UX designer. I found that there was general confusion about what users could and should do with the application. Further, there were various levels of misunderstanding and distrust amongst users regarding the data science that informs the features of the application. It was important to eliminate these barriers as these features are powerful— they are a key component that sets us apart from similar products. The goal of the onboarding process I would design was to allow the users to experience the product in such a way that they will fully understand its capabilities and benefits and as such, they will be quick to adopt the product as an everyday tool. 

I communicated this in my presentation and identified the components of Inspire that could most benefit from onboarding guidance. I paired the current trouble-areas with potential solutions that would eliminate them. Together, we were able to recognize which of the existing issues could be addressed by onboarding. Before creating a design, it was important to fully define the problem. Robust research makes for much more focused design.

FRAMEWORK

Step 5: Exploratory Designs – I used the information gathered from the research to begin hand sketching ideas for the onboard design. I would sketch a dozen or so frames at a time and then show them to various members of the product team. I found that people are more honest with and more likely to critique lower fidelity sketches. The hand sketches don’t take long at all to create. As such, they are easier to criticize than a high fidelity wireframe. I think this phenomenon is largely subconscious. Colleagues are generally polite and if it is clear that a lot of time was spent in creating something, it is less likely that they will want to tear it down. But these critiques are valuable at every stage. A bit of teardown early on can save you a lot of trouble down the road.

Step 6: Include the Developers – UX designers are required to walk a tightrope by balancing the need to create something innovative and effective while being sure that it is technically feasible. You can waste a lot of time by creating elaborate designs only to find out late in the process that your creation could never be implemented. I regularly showed members of the product’s development team my ideas to avoid this pitfall. I also met with the team’s senior developer to have a more pointed conversation to ensure the design was technically achievable.

Just the same, it is possible to waste time by creating a design that is easily implemented yet not effective in achieving its aim. It is natural for developers to push back against design, but my first obligation as a UX designer is to the users. Therefore, my priority was to create something that would effectively introduce the product to these advisors and allow them to immediately become productive through using it. I received great encouragement from the director or User Experience on this front— make sure your design will achieve its aim and let the developers figure out how to implement it.

Needless to say, striking the balance between creativity and feasibility is part and parcel of the job.

Step 7 : Collect Feedback and Brainstorm – In order to move towards a final design, I turned my sketches into 5 concepts and presented these to the UX designer of my product and the head of UX. The general sense was that my concepts were very straightforward, perhaps too much so. It was worthwhile to create a walkthrough concept that introduces users to the product’s features in a linear fashion, but it would also be good to push the envelope a bit in terms of how we introduced users to the product.

The following week, I organized a meeting with the UX team (4 UX designers, 1 visual designer, 1 user researcher, and 1 content strategist). I printed off a wireframe from each concept as well as a few additional ones I quickly mocked up on the back of the feedback from the previous week and taped these to whiteboards. The UX team provided feedback by making marks on the wireframes and I kept notes on the whiteboard of the conversations in the room. We talked about other ways (beyond a walkthrough) to introduce the app to its users.

We settled on an accessible storytelling approach as an alternative to the walkthrough. We decided to present advisors with scenarios, explained in easily digestible terms, which would show advisors that there were at-risk students in their list that would be overlooked without our product.  The text of the scenarios should be clickable and when accessed, the filters would be set and the list modified to reveal the students in question. This was valuable because it showed the value of the app and revealed to the user how to use the confusing filters.

The brainstorm session was incredibly valuable. It can be difficult to find time for the entire team to get together, but the more this can be done the better. As a team, we were able to come up with ideas none of us would have been able to conjure on our own. Also, because the onboard design would eventually be introduced to all of the Civitas products, the whole team had a vested interest in its creation.

Step 8: Narrow Design and Test with Users – Riding the momentum gained from the brainstorm session, I honed in on 2 designs. As these were crystallizing, I worked with the visual designer to ramp up the fidelity of the wireframes. I then put these into InVision to create an interactive prototype to prepare for testing.

Because of the regular interaction with designers and the product team, the designs had been tested in some capacity many times before. This, however, would be the first time they were tested on regular users of the product. I spoke with two advisors from a community college in Houston, TX. I asked a few questions about the usability of the application before sharing my designs. The two advisors only used one component of the application: the outreach. They bypassed the front page and went straight to the student profile page by using the search. They said this was the case because they didn’t “really understand” the home page, so they were great candidates with which to test the designs.

I let them “drive” and asked questions about their activity. At this point, I was testing intuitiveness of the design and found that it stood up well. Interestingly, one advisor preferred the walkthrough while the other advisor liked the storytelling approach more. They did point out to me how often they used the Log Outreach function of the site which hadn’t been emphasized in my designs. They also suggested ways to increase trust in the data science behind the various predictive features.

Step 9: Handoff the Design – I made changes on the two designs based on user feedback and presented them to the design team. Even at this stage, we were still discussing future iterations. 

INSIGHTS

CONCLUSION

The most likely result of the project will be a combination of the two designs. The storytelling component was more impactful but there is also a time and place for explicit instruction. The danger in a walkthrough is that users will dismiss it. A way around this would be to introduce a more gradual approach, ie, users would not see instructions until they first engaged with the specific components requiring instruction. This would eliminate the danger of dismissal because users would only encounter one instruction at a time. As such, they would be much more likely to learn about the product.

Constant collaboration was a hallmark of this project. I was lucky to be surrounded by talented and experienced designers. It was vital for me to lean on their expertise. It was just as important for me to offer my own ideas, and the team members were big encouragers of this. I couldn’t match them in years of experience, but because I was coming in with a fresh pair of eyes, I was able to uncover things they had overlooked because of their deep investment in the product.