4/29: Creating the Learning Experience

Emily Spooner
Financial Security
Published in
5 min readApr 29, 2021

Crafting the content and overall feel of our site in preparation for user testing

Over the past couple weeks, our group has been working to combine our various mental models of what we has envisioned for the finer details of our learning experience, starting with the generation of a few key process screens in our own personal style to compare.

Emily’s test screen for the application (left), Caroline’s test screen for the learning (center), and Yi’s test screen for the pretest (right)

From this, we developed a greater sens of what we enjoyed and what we could improve when resolving the pages further. Overall, we felt that the warm tones helped to create a welcoming environment across the screens, but we worried that the intense warm colors could create a more stressful or intense feeling than we had anticipated. We also felt that it would be important to develop a consistent user interface across all screens with information that would be helpful to each user.

General Style and User Interface

Common fonts and preliminary color scheme
New screens emphasizing composition and styling (Yi: left, Emily: center, Caroline: Right)
Caroline’s form experimentation screens (left) and Emily’s experimentation screens (right)

From this, we went back to our initial mood boards and identified a number of characteristics that we wanted to maintain, such as a fun feeling through style and color, as well as a more simplified, clean style that informed our font choices. While these ideas were still quite different from one another, we were able to communicate our reasoning behind our decisions to negotiate a common style, taking the user interfaces of some, the key information in others and the general feeling as a whole. Class time on April 27th was a great opportunity for this, as we were able to work together directly on a number of boards and communicate directly about our preferences.

Collaborative work screens

While we still had not come together on one exact layout to use as the final, we knew that this was something that we would hope to explore through our testing to determine what general interface is the most intuitive and representative of the style and feeling we hope to achieve: Where does your eye go first in each screen? What elements to you enjoy or find distracting? Is there anything you are unsure of or does anything not make sens to you right away? How do the screens make you feel?

Content Development

The user flow of our overall experience
Revised content (left) for our introduction screen using Stacie’s feedback on our initial text (right)
Revised content (left) for our an application screen using Stacie’s feedback on our initial text (right)

With so much time being dedicated to the style, it was important to evaluate the content of each screen itself and focus on the wording on how each piece of information is communicated. Stacie’s feedback was incredibly helpful in this, raising points like how we cannot guarantee that our learners will walk away learning what we had intended, the power of questions versus commands can be effective when providing instructions, and providing a “why” for each section to understand the motivation and application of this information.

The framing activity during class was also helpful, both in the generation of our own statements as well as the comparison between others. The power of key questions stood out to me the most, understanding how a well-worded question can help guide your learner where you would hope they would be thinking without spelling it out for them or doing all the key work. Using mystery also played well into this, questioning what needs to be spelled out explicitly versus what can be left for your learner to interpret. For me, the questions about what matters most to the learners when making these key decisions was incredibly valuable and something that I hope to include in the final product.

Testing

Going into our testing, we created a rough outline of one chapter for an individual to go through. Key questions for us are:

  • Is this interesting for you? Is the amount of content overwhelming or barren?
  • How do you feel about the pretest? Is it valuable or unimportant for you within the greater scale of the experience?
  • How do the colors and fonts impact your learning experience? Do you feel it is enhanced or detracted?
  • How are the instructions in your understanding, are they clear or confusing?
  • Which layout do you enjoy the most, both visually and functionally?

Gaining clarity on the graphical components as well as the content will help us determine our next steps and potentially raise awareness to areas that we may have ignored in our development. By rating each of these traits for our experience, we hope to gain clarity in how our own visions are coming across to others outside of the development.

--

--

Emily Spooner
Financial Security

Current student studying Design at Carnegie Mellon University, focusing on the Products Track