UXUI DIGITAL DESIGN WORK
 

Maklik networking application

Maklik is a web application that helps to make communication and resource sharing easy and accessible to an educator community.

PRIMARY TOOLS= FIGMA + PHOTOSHOP + ILLUSTRATOR + MAZE
DURATION = UX 2 WEEKS + UI 2 WEEKS
home-screen.png
new-topics-screen.png
CHALLENGE

School’s Cool is a Dutch organisation that facilitates a community of voluntary mentors. The mentors currently communicate and connect using a combination of social-media platforms which is inefficient and ineffective. A web application was proposed that consolidates the disparate communication channels and a functional prototype has been developed.

before 1.png
before 2.png
before 3.png

For this project I was briefed by the developer team to refine the user experience and interface of the existing prototype, through research and user centred design thinking.

MARKET AND USER RESEARCH

Following an intense client kick-off workshop, I analysed other products in this category. Amongst others, I looked at Facebook, Edmondo, Google Classroom and Brainly. These platforms have many features in common, but user ratings and reviews, which are synonymous with social media, are missing from the education applications. On the other hand, Facebook is the only one without a shared cloud based library. Privacy is also a big issue for users who engage with Facebook and for this reason there is a concern about sharing resources on this platform.

Positioning map.png

Based on these findings I created a brand positioning map, identifying a gap in the market for a networking and communication tool that incorporates a user generated and user rated shared resource library.

I found it really interesting that ratings and reviews are missing from other educational apps as user engagement and validation is a key motivator in prompting ongoing user participation. 

 

So the raw concept was to design a platform where users can safely (privately) engage and contribute to, as well as receive feedback and social validation from, their educator community.

A survey helped to validate the brand positioning goal and showed that only 3% report using a shared library and yet a combined 70% said that they would find it extremely or very useful. Over 60% say that they base their resource choices on what other educators have shared, and 58% look at user ratings of an online resource before using it.

The ultimate success of this application concept lies in repeat user engagement and participation. To achieve this the app would firstly need to effectively solve the existing problem of disorganised communication channels and resources. Through an intuitive interface it must be effortless for a user to participate with the community and shared resources.

 

But in today's tech space, with so many new products available everyday, to ensure ongoing user engagement that becomes habitual, the app would need to do more than just solve a problem. It would also need to add value beyond the initial solution. By introducing the social interaction of comments, likes and reviews the app becomes a credible library that doubles as a social platform... think Pinterest for educators. Instead of sharing pretty pictures users can share and reshare their favourite resources. 

As the library grows and more users participate, the usefulness of the application is increased by providing the community with an open source pool of resources. Furthermore, when users upload their own content to the library it is a form of investment in the app for which they are rewarded when other users comment, like or review. All of this increases product loyalty and users are more likely to continue using the app.

survey.png

A number of user interviews provided further insight. People spoke about wanting to have all their communications in one place, with organised and catalogued shared files. Users also expressed the frustrations resulting from multiple communication channels and a difficulty keeping track of shared files on chat platforms such as Whatsapp. There was also a strong desire to connect with people and be a part of a community, which has been effected by the move to remote online teaching. This was summarised by a teacher's comment, "I became a teacher because I love people. It is all about connecting with a community!"

interviews.png
EMPATHISING: JOBS TO BE DONE

After analysing all of this information using an affinity diagram and empathy map, I determined the jobs to be done. Why would a user choose to use this app over other apps already available. The main job to be done is “when I am educating or mentoring kids I want to be part of a community who share ideas and resources so that I feel supported and can be confident in giving the best to the kids in my care.”

jobs.png

This main job was then explored further as related jobs to be done. Each related job focused on something that would make the mentor’s experience as easy and enjoyable as possible, such as time saving, streamlined communication and self-improvement

related-jobs.png
USER PERSONA

Thinking about the users I created user personas that would help to guide my design thinking. Melissa is a more mature user and an experienced educator. She is keen to be part of a community but can feel intimidated by technology. Matthew represents another category of user who is younger, more tech savvy, but less experienced as an educator. He is quite suspicious of main stream social media but also wants to be part of a community that can give him guidance.

User persona.jpg
User persona 2.jpg

Based on these personas looked at user journeys to identify frustrations and potential opportunities for this new networking app. In Melissa's journey she has created mentoring resources that she is keen to share with her community towards getting feedback. But soon thereafter she is asked to re-share as people have lost the message and can’t locate the resource anymore. Through this analysis I saw the potential advantages of creating a shared resource library that exists in parallel to the messaging, as well as user ratings and reviews.

User Journey #1 - first person narrative.png
User Journey #2 - first person narrative.png
DEFINING THE PROBLEM

With this in mind the problem statement was defined as, “Remote educators need a way to easily communicate and share resources with their network because they want to be more efficient and effective”

Using the Moscow map method I then determined the features of an MVP that would address this problem statement. The MVP was defined as a networking application that will enable educators to connect, share and collaborate with like-minded people.

With a user-created and rated library of resources that is catalogued and easy to use, coupled with a chat function that includes organised channels, this web application enables educators to focus on what they do best … caring for kids.

IDEATION

The existing site was mapped out and then a revised site map was designed. The new design reimagined what was previously called "Channels" as conversation "Topics" which integrate with the online resource library for streamlined networking, communication and sharing.

A user flow diagram shows a detailed expression of the happy path: a user arrives at the home page, creates a new topic, adds a post with an uploaded file which is categorised to be stored in the library for easy search and then invites community members to join.

userflow.png

Using the user flow I created concept sketches to figure out the functionality and then created a low fidelity prototype for usability testing. A number of issues were identified and aspects that could be changed to improve the experience. 

rapid.jpg

Changes and improvements were implemented in the mid-fidelity and further testing done using maze and in person testing.

 

The Maze test uncovered additional improvements that could be made. Some users tried to use the Topics dash to navigate to the topics page and and many users mis-clicked when asked to add members to the topic. To improve functionality I reworked these in the high fidelity.

maze.png
DESIGN AND MORE TESTING

While the mid fidelity tests were being completed I began thinking about the user interface design and brand identity. This mood board is my visual representation of the brand and was shown to a number of users. Their reactions confirmed that the brand attributes were being accurately portrayed.

moodboard.png

Product names were brainstormed with the client and Maklik was chosen as it translates as easy, capturing the brand mission. The colour palette is inspired by School’s Cool branding with adjustments made for maximum accessibility. It is fun and supports the brand personality. Karla is the selected brand font as it is very legible but also has an approachable, playful twist to the letterforms.

 

This all came together in a bold logo design that feels familiar in the product space, yet unique and distinctly recognisable. The logo icon is made of four parts, representing the four aspects of the product and shows collaboration with the speech bubble shapes coming together in a conversation. This speech bubble shape is a consistent UI element, applied to dash and comment cards. It subtly symbolises communication throughout the design. 

 

The style tile summarises the basic elements of the atomic design system which was used to build the User Interface. Consistent use of shape, colour and typography serves to create a unified design system that is clear and easy to use.

Style-tile.png

The final high fidelity prototype integrates a user dashboard and a live community feed on the website home page.

The user dashboard can be customised to display the preferred information, and the live feed can be filtered by "All activity" or just "Followed activity". 

The live feed shows all community engagement with the various topics, which is in the form of a group chat. For one-on-one communication there is a chat function which can be always be accessed using the icon in the bottom right of the screen.

Tablet_Pro_Mockup_11_ copy.png

Below is a video demo, showing the high fidelity prototype and the persona's user happy path. Logged in, Melissa arrives at the home page where she has a dashboard summarising her interests and activities on the app, which can be filtered based on her preferences. There is also a live feed showing recent activity in the community where she can engage with user posts and get a quick preview of any files that have been uploaded to a topic. To create a new topic she goes to the topics page and thereafter creates a post, adds a file, invites members to join and lastly engages with members on the topic.

 

When creating a new topic or adding a file she is prompted to choose its category and subject. These relate to library folders that are predefined by the admin of the site and can be community dependant. When adding a file she can also specify the target age and add tags refining search capabilities. In this way files are easily added to the correct folder by the user, and the resource library remains organised, easy to search and easy to use. 

LEARNINGS AND NEXT STEPS

Creating a community networking application is not as straight forward as I initially thought, and I learnt that simplifying the complex is often the biggest challenge of all. The main goal in this project was to design an application that successfully incorporates all the necessary functionality while remaining uncluttered. The information is thoughtfully layered so that it is accessible without becoming overwhelming.

As next steps, the developers will apply the design system to the existing coded prototype, while I follow the same UXUI design process for the library section of the website. The library experience will be vital to the usability of the app and we have already started thinking about how the cataloguing system could work. This will need to be tested and refined and then implemented.

SEE MORE UXUI DIGITAL DESIGN WORK