Iterative design for existing research.

Project: Iterative wireframing, UI mock-ups and prototyping informed by usability testing.

Client: Communiteer

Overview:  This case study focuses on the latter part of the double-diamond in the user-centred design process and taps into the application of gamification techniques in order to drive retention and encourage engagement.

The brief

Communiteer is an online community, purpose-built to foster social participation. Communiteer leverages the technology behind social media and crowdsourcing platforms to increase user engagement and collaborative volunteer opportunities. 

The brief given to me focused on enhancing the user engagement of the communiteer platform using gamification techniques. The overarching goal was to drive repeat use, retention and engagement. 

​I was asked to study what gamification techniques existed in the market, apply gamifaction techniques and design a suite of gamification enhancements to drive user engagement, and conduct rounds of usability testing to refine my solution.

Client stakeholder interview

A brain-dump of questions to potentially ask the stakeholders, Victor (CEO & Co-founder) and Bishakha (UI Designer) was first conducted on Miro sticky notes. They were then grouped together and affinity mapping was conducted to sort out any duplicate questions, topics that needed to be covered, as well as the loose order in which the questions should be asked.

A one hour client stakeholder interview was then conducted in order to gain more understanding about Communiteer. Their values, customer needs, business needs and scope were all topics of discussion.

​The information gathered from Victor and Bishakha was first put into a standard table and the Communiteer style guide provided was referenced.

Key learnings

• To show your respect for the client's time, sometimes you have to discard pre-planned questions in order to stay on time.
  
• As you ask questions, sometimes the scope of the brief enlarges and it's important to clarify the focus and direction to understand what their priorities are, and what's secondary "nice-to-haves" if you have time.

Ideas brainstorm

A preliminary brainstorm of potential ideas based off of answering key pain points and issues highlighted by the clients in the client stakeholder interview was then conducted in preparation for the creation of customer journey maps.

Key learnings

• In an idea brain-dump with a team, there can be times where different members of the team come up with the same sort of thing. These are good to explore as it indicates that it's a fairly popular idea. 
  
• It's still the most important to ensure these ideas are well-founded with user validation, so not to get caught up with a single idea!

Customer journey maps based off of pre-existing personas

The pre-existing personas provided by Communiteer were very specific as to what they wanted in relation to what the Communiteer platform could provide with regards to their career progression as well as pain points. However, it didn't record their typical likes and dislikes, living situation or other extensive background information. Future Customer journey maps were created based off of the brainstorm brain-dumps and applied using a persona (either Nellie or Victoria). As-is customer journey maps were not supplied by the Communiteer team in this instance.

Key learnings

• Without doing the user interviews myself, it felt as though a part of the empathy process was missing and it made it much harder to create a realistic journey map without the help of the person who conducted the initial user research. Empathy is such an important part of the UX process that it's important to get involved as early as possible or try to understand the users more before proceeding.

Lo-fi wireframes and usability testing round 1

An initial wireframe was created based off of the brainstorm of ideas. These allowed me to envision the solution without committing too much time and resources before the first round of usability testing was conducted.

The Nielsen Norman Group (World leaders in research-based user experience) published that you only need to test with five users per round of usability testing and this sentiment was echoed by my mentor Andrew Hiles (UX Manager at Vodafone Australia). As such, I tested with 5 users who are volunteers in the community. After transcribing the moderated tests with Otter, I put the key take aways onto sticky notes on Miro to be sorted using affinity mapping.

Key learnings

• Initial low fidelity wireframes allow the stakeholders to focus on UX function instead of the nitty gritty in the UI, fostering smoother discussion on the design intent and direction at hand instead of how it looks, which should be focused on further down the design production process.

Iterations, further usability testing and multi-variate testing

Further mock-ups of wireframes in increasingly higher fidelity were created based off of the usability testing results. A/B testing was also conducted in order to assess which layouts and background was preferable.

For example, through usability testing, I found that users are fairly confused about why they should use the Communiteer platform, so a page with such info. was added.

The users also mentioned that while they liked the idea of earning badges that they could then use to customize the colour of their profile picture frame, they mentioned that they would stop caring about badges once they found their favourite colour. However, considering that one of the business objectives is to drive retention, the idea was then developed to the badges adding different flairs and objects to the frame rather than simple colour changes. Therefore customization would be ever evolving.

Multivariate Testing was also done in order to assess the preferable background and layout for the solution. Rather than typical split testing conducted focusing on quantitative conversion rates that need about 10,000 visits, this was done as a guerilla tests that asked as much people as I could for how they felt about each design and layout. This way, I was able to understand the "why" behind their preferences so that the result isn't superficial. By understanding the "why", I could disassemble the design into the elements that elicited the respective responses.

Finalising the prototype and documentation

A final high fidelity clickable prototype was then created in order to present to the client. The presentation slideshow and supporting report I created were both done on Canva.

​The link to view the final prototype: https://www.figma.com/proto/WQQEGOcF8BQRBKmjvfMjTe/Communiteer?page-id=39%3A18190&node-id=39%3A18203&viewport=241%2C48%2C0.25&scaling=scale-down&starting-point-node-id=39%3A18203&show-proto-sidebar=1

​My mentor for this project, Andrew Hiles (UX Chapter Lead at Vodafone) took me through typical hand-off documentation with the different active/inactive states, branding, pixel spaces, etc. via Zeplin.

​A video of the final prototype in action is currently being created in Adobe After Effects. Stay tuned!

Reflections

I absolutely loved working using gamification techniques and have read numerous peer-reviewed studies on how just enough gamification can allow for increased engagement in your offering. It was a great learning experience and it allowed me to create a fun-filled solution that I knew did good for the non-profit world. 

The knowledge I attained from this project will definitely be shared elsewhere (when appropriate) as I'd love to see more dynamic approaches to retention and engagement in traditionally more rigid projects. 

Interested in working together? Get in touch!

Aska Lai
-
UX/UI Product designer
aska.j.lai@hotmail.com

Proficiencies
-
Figma
Figjam
Miro
Jira
Confluence
Photoshop
[Currently learning] Blender