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.
Kyle Hodge, Engineer
Anthony Hsia, Engineer
Maaz Javed, Engineer
Xunjie Zhou, Engineer
I was tasked to be in charge of the UX/UI tasks for the Secure Say project. This included early wireframes, visual design, branding, screen flows, and design system. I worked alongside a UX researcher who provided more context and information, as well as a few engineers within an agile environment.
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.
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?
- How can an IM system help to accomplish project goals?
- What features within the application would assist students when completing a project?
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.
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.
(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.
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.
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.
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.
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
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.