A series of iterations of the same low-fidelity, wireframe sketch

I started out with prompt buttons based on a users profile to help start a conversation, but quickly began testing out micro-copy

Peer feedback is directly related to improved performance and user research should ideally be conducted at every stage (Gielen et al. 2010; Pernice 2022). Following the advice of my betters, I developed a few sketches and sent them out to fellow students with some questions:

Please tell me what you think you can do on these screens.

Can you tell me what you think the primary functionality is of these screens?

What caught your attention first? Can you tell me why?

An low-fidelity, wireframe sketch
An low-fidelity, wireframe sketch

Below are 2 different versions of the same screen, could you tell me how you might change your profile settings in each?

An low-fidelity, wireframe sketch
An low-fidelity, wireframe sketch

Feedback

Usability

Please tell me what you think you can do on these screens.

So far, users have accurately identified the ‘Account Verified’ symbol on both the profile picture and within the chat function. They have also quickly spotted the drop-down window on the chat screen and have correctly assumed this is where users can find a summary of the person.

The micro-copy in the chat window has not yet been picked up by participants, so I might revise my message and ask a question about it specifically.

Functionality

Can you tell me what you think the primary functionality is of these screens?

There seems to be no confusion about the primary function of each screen, and users have consistently identified the ‘Profile’ and the ‘Messaging’ screens. In further wireframes, I will have to maintain this clarity.

Content

What caught your attention first? Can you tell me why?

Participants cited the verified symbol and chat button as being the first things they noticed. I am pleased with this, as these are my product’s two most important functions. Surprisingly, so was the ‘Groups’ container. I will need to take care with the container proportions that are secondary in the hierarchy.

Navigation

Below are 2 different versions of the same screen, could you tell me how you might change your profile settings in each?

Interestingly, in the ‘top’ navigation participants thought they would edit profile information directly within each block in the style of LinkedIn. Whereas in the ‘side’ navigation, the assumption was profile editing would be within the main navigation sidebar.

 

Next Steps
  • Revise my message to my fellow students and ask a question specifically about the micro-copy in the chat screen.
  • Read up on visual hierarchy to maintain screen clarity and object importance.
  • Gather more feedback on settings location and conduct market research into both types of navigation (top and side).

References

    GIELEN, Sarah et al. 2010. ‘Improving the Effectiveness of Peer Feedback for Learning’. Learning and Instruction 20(4), 304–15.

    PERNICE, Kara. 2022. ‘Democratize User Research in 5 Steps’. Nielsen Norman Group [online]. Available at: https://www.nngroup.com/articles/democratize-user-research/ [accessed 28 Feb 2024].

    German vocabulary of the week

      Wireframe – Drahtmodell