Case Study: DearMac

Connecting the community one letter at a time - Pilot kiosk project at McMaster University
https://dearmac.ca/
Role: UI/UX Designer
Project Timeline: March 2018 - Ongoing
Design Tools: Adobe XD, Illustrator, Photoshop, InVision

Introducing short stories to McMaster

Project Overview
DearMac is an interactive kiosk for the McMaster community to participate in sending and receiving letters written by local peers, students, faculty and members in the community.
‍
The idea of the the project was first created by the graduate students at McMaster University and I was fortunate enough to help plan, design, create and execute their vision of the project. Please read more about the installation project here:Read more
Problem Statement
As McMaster university lacks a sense of unity and connectivity on campus amongst students, staff and the community, We, INKspire teamed up with the graduate students at McMasters and McMaster's library faculty members to launch an interactive platform to promote everyone's ability to connect with one another.

My role and responsibilities

DearMac was a collaborative project where we worked in a team of 6 people. I played one of the major design roles to making the project vision come to life. I helped the project out as a UX designer that had some responsibilities in some marketing materials too. Some responsibilities I assisted in the project were:
‍
- Design strategy
- Graphic and website design for branding
- Low-fidelity prototypes
- High-fidelity layouts 
- Usability testing and validation
- Project execution and launch
All My Tools
Paper prototyping, Adobe XD, Photoshop, Illustrator, Sketch, InDesign, InVision, Typeform, Google document and spreadsheet

So, here's our solution

Some of the solutions we developed to solve the problem were:

1) To build a stand alone kiosk with an application that can distribute online letters and stories written by students and the McMaster community via emails.
2) We collected stories from students, staff and the McMaster community through an online submission platform created by INKspire. 

The purpose of the project:
• To bring together communities at McMaster university
• Raise awareness about timeless literature
• Opportunity for everyone to share their side of the story

our target audience...
people we are making this for

Personas
As the project was made for anyone to us, we focused on two major groups. Based on the research of who we are promoting the project to, we decided to promote to our two main target audience:
‍
1) Current and previous students at McMaster University
2) Young professionals in the McMaster community
Users using our products
Users visiting DearMac are either readers interested in reading letters or writers interested in writing their own letters. We categorized our users into 4 groups:
‍
1) New readers
2) Returning readers
3) New submissions
4) Re-submissions

• Readers will access the kiosk with the iPad digital platform to read the letters
• Writers will access the main website and submit a letter using Typeform:https://dearmac.ca/submit/

All about Product creation

Brand Identity
The first version of the logo was created a placeholder for the project. To make it fit into our improved mission and vision or the project, I led in redesigning and cleaning up the brand identity and marketing promotion assets.
DearMac Tablet Design
The goal of the iPad application is to let users send and read letters written to each other. We wanted to make the platform as simple as possible where students or community members at McMaster can interact and engage with others' experiences through written form. The platform is designed for both new and returning users* using the kiosk to read and share stories.

*refer to personas list above on the type of users using the kiosk
‍
Stage 1) DearMac Concept Mock-up
The mock-up created by the graduate student who wrote the mission of the project, showed all the simple flow and logic that they want on the project:https://sketch.cloud/s/ZJWqx/a/Pmw4dx/play‍
Stage 2) Wireframes and mid-fidelity prototype (image above)
To enhance their wireframe vision, we recreated a low-fidelity prototype to add features that users can use to read, shuffle, email and print the letters.
Stage 3) Usability testing and changes to UI design
To examine if the application works and meets the guidelines of what the platform should do, there were numerous revisions done - we started BETA testing with the internal team and collected feedback on changes.
Stage 4) High-fidelity Prototype (image above)
As we went through numerous changes from the low-fidelity to high-fidelity prototype, we eliminated one of the categories (trivias), changed the background and used more generic icons which is more recognizable and universal that our audience will understand right away. This way, the platform will focus entirely on the stories and not get distracted by the icons. The user will have the ability to read as many stories they want by shuffling the letters every time and they can send the stories to themselves or someone else.

Let's see the final thing put together...
DearMac Kiosk Launch and Promotions

Marketing / Promotion Executable
• I created the designs for both the physical stand-up and kiosk executable products for the project
• I assisted in the low-fidelity wireframe planning and helped to implement the design for the DearMac website
The stand up banner was designed to have all the information that users need to know about the project - how to submit a letter, where they can find the letter and who made this project.
‍
The kiosk was designed to have the logo simply on the side while having the respective brands at the top so that users have an idea what is this project and who is in charge or the project.
‍
Submission Platform
The submission web platform for DearMac is an one pager that introduces the mission and concept of the project. The website is structured to have a call to action at the top, introduction, a place for them to submit letters and where to find letters

Success and Failures

• The project was successful in making headlines across the campus and it is still on-going on improvements to make the project more interesting to the audience
• There was a large number of acquisition in letters being submitted
• Students and community members in McMaster was curious on the platform and was able to send in letters as well as send themselves emails of letters
• Students and community members found the platform to be simple to use
• High activity on the kiosk once it was launched and remained a steady rate
• High interest from students as promotions about the kiosk kicked in

In conclusion it's about
connecting with the community

• The project was successful in making headlines across the campus and it is still on-going on improvements to make the project more interesting to the audience
• There was a large number of acquisition in letters being submitted
• Students and community members in McMaster was curious on the platform and was able to send in letters as well as send themselves emails of letters
• Students and community members found the platform to be simple to use
• High activity on the kiosk once it was launched and remained a steady rate
• High interest from students as promotions about the kiosk kicked in

The Next Steps

•All in one platform with both submission and reading
• More useful information on the online website and submission
• Better ways to distinguish us from the South American dating app, as we are receiving multiple messages that are related to the dating app DearMac that people are getting confused about - rebranding
• Users having the ability to make an account for themselves to keep track of the letters they sent in, read or shared
• As this project progresses, combining the mother platform INKspire, with DearMac would help to increase awareness for the users to find a platform to read and write
• Introducing this kiosk project to other parts of the city or to another city - such as Downtown Toronto and the GTA.

Project Credits

Project Concept, Research and Documentations
• Frank Ong (Advisor), Kelly Bradbury (Operations Lead) and Efrah Yousuf (Treasurer)
• Fundraising and grants team at INKspire

Design and Prototyping 
• Frank Ong (Advisor), Linh Le (UX Designer), and Eva Chan (UX Design Lead)

Engineering and Development
• Joanna Ong (Senior Developer)

QA and Launch
• INKspire internal members

Important Linkshttps://short-edition.com/
https://dearmac.ca/
https://gs.mcmaster.ca/graduate-student-life/spices/2018/dear-mac

‍
‍

Interested in what you see?

let's collaborate
LINKEDINContact