Scroll

Product Designer – Francesca Wilder

slide alt

SecureSay allows college students to communicate securely within an academic setting for planning and executing group projects.

SecureSay, developed by students for students, is an application geared towards post-secondary education communities that lets scholars send encrypted messages to their peers, professors, tutors, etc.

Messaging and email encryption can be important especially when sending confidential information. In academic settings, this can be project designs only meant for group members, sending important project documents and ideas to professors for their approval, etc.

My Role

UX/UI Designer responsible for: Wire-framing, UI design, information architecture, screen flows, and design system.

Team

Kyle Hodge, Engineer

Anthony Hsia, Engineer

Maaz Javed, Engineer

Xunjie Zhou, Engineer

 

 

 

Target audience

SecureSay’s  target audience includes students and faculty at post-secondary institutions. Since many emails and important documents can sometimes be sent insecurely, we wanted to ensure that information would have a high level of confidentiality when sending. The team also wanted to focus heavily on group projects in academic settings where project proposals, ideas, designs, and approvals would be sent to the professor and group members.

Initial research

During the beginning phases of the project, user interviews were conducted. The main question asked during interviews with potential student users was:

  • What are your main concerns when sending messages to your peers in an academic community, especially within a group setting? 

After user research was conducted, three main insights were the focus of the application.

Secure message sending

Users, especially during group projects, wanting to send documents securely where only team members and the class professor can view pertinent info.

Instructor communication

Communication with class professors about project changes, content sharing, etc.

Comprehensive messaging system

Instant messaging and video meetings, file and document saving capabilities, and message organization for quick referencing.

Structuring & organizing content

Since the concept and main functions were already established, I wanted to start on the content structure and user journey to show exactly how users can accomplish each of the main goals of the application. 

Kicking off the design

For the actual design, the team wanted to keep the user interface as simple as possible where the main focus cover all three of the user insights discovered during user research. Below is a condensed version of wireframes created to showcase the log in, create account, and user profile that leads to the messaging, folders and documents, and groups pages of the application. 

User registration

User profile

(some wireframes from the design)

After formulating the wireframes, I wanted to go into creating a UI design system so the team could keep track of all the applications design elements and their purposes. A minimal design was used for the iconography and buttons as not to distract from the main components of the application. 

Final solutions

The final design focused on the main concepts of the application and further insights for the research team. More users wanted a way to edit documents live and be as detailed as possible. The two screens below show the login page for existing users and a chat screen that shows communication for a group project.

Login Screen

Attaching files and documents

Students can attach files from different folders that they have created or sample images directly from the web.The file selection list includes:

  • Project Presentations for video clips, power point presentations, etc.
  • Pertinent images for a project that has been saved.
  • Images that relate to a project directly from the internet.
  • EDU gallery which allows users to upload directly from the online class portal, etc.

User Chat Screen

User Chat File Upload *(reached by pressing the attach file button)

Filtering options for the messages screen

The filtering option below allows students to filter chat screens for different classes to keep up with different group projects. They can also view all group chats and individual people by utilizing this feature.

User Chat Screen

User Chat File Upload

Student Profile Screen

Folders and documents screen

The folders and documents screen allows students to:

  • Create new folders
  • View documents or files 
  • Share folders with a group
  • upload new files 

User Folders & Documents 

User Groups 

Groups screen

On the groups screen, users can view detailed information regarding project team members and their respective roles, project details and what class it pertains to, due dates, etc. Any important information regarding a project, the user can view here.

Final results & takeaways

Designing for the application was fairly simple, being that most chat applications have the same features.But the added characteristics, such as messaging encryption and saving/uploading documents to the app space made it a bit more complicated. Some insights were:

  • Communication is Key: Knowing that the research team communicates directly with our intended users, I wanted to keep in close proximity with them so that we could be on the same page at all times. This would help our design process be more efficient, and we could move onto the next step with confidence.
  • Notes, notes, and more notes: One thing that was helpful was to always have a notepad on hand when communicating with researchers. This was conducive because I could sketch things that came to mind. brainstorm, and show my ideas to the research team.