Conducted
Initial Research (User Interviews)
Information Architecture
Wireframing
UI Design
Securesay, developed by students for students and faculty, enables secure communication within an academic environment for group projects.
With this platform, Students are able to send notes, files, images, and other pertinent documents securely to their group peers.
My Role
I was in charge of the UX/UI design and initial research tasks for the SecureSay project. This included user research, early wireframes, visual design, branding, screen flows, and design systems.
Team & Timeframe
Kyle Hodge — Engineer
Anthony Hsia — Engineer
Maaz Javed — Engineer
Xunjie Zhou — Engineer
Me — UX/UI Designer & Researcher
5 months to release the first version of the app.
Secure Say was completed using an end-to-end process as a native and web application.
Building a safe space for group project communication
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.
Stage 1:
User Research
What do students have to say?
Based on my conclusions from research and having a clearly defined problem to solve, I proceeded to the ideation phase by organizing my observations to help generate as many ideas as possible.
any students cited a number of features that would assist them while participating in a group project. We wanted to narrow this feedback down to the most useful features to include within the application.
Research Methodology
How was testing performed? To better understand the wants and needs of students participating in group projects, I created a student profile survey to gain feedback from students on campus. Some answers are from students who have already participated in group projects in the past.
Questions revolved around two main points:
-Students’ main concerns when working in a group.
-Application features that would be the most useful and relevant to include.
01. Main concerns..
User question 1
What are your main concerns when sending messages to your peers in an academic community?
02. Project goals..
User question 2
How can an IM system help you accomplish project goals?
03. App features..
User question 3
What features within the application would assist students when completing projects?
Qualitative interviews
User research was quintessential. I gathered as much information as I could in order to understand the challenges they face and how they see the app making a difference in relieving pain points. I wanted to also understand what features the user would like to see that would help to target project needs. Below are a few response from the user questions.
— The ability to send different file formats pertaining to project needs.
— Ensuring that messages are sent securely without getting lost. This was one of the main concerns for students as this problem has happened in the past for a few of them while working in team projects.
— File and document sharing so all project members can view pertinent information.
Experience mapping for the user
To further validate the application, an experience map was created to help visualize the possible end to end process that a user can take.
Stage 2:
Ideation
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.
This phase was also a catalyst for forming options outside of the obvious ones and making room for innovation. The left image is a complete mind map of all the solutions and the right image is marked with an indicator that the solution may involve hybrid learning or virtual and in-person learning.
As discussed with the group, we wanted to ensure that there was an onboarding section where students can enter their school credentials to create an account. Also, one of the main features to include was the ability to create folders and upload important documents that pertain to group projects.
Stage 3:
Design
Starting 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.
We wanted to focus on four sections of the app including the student profile that would contain all pertinent student information, messages where students can view all of their most recent chats, groups, an area that displays the different chat rooms pertaining to each project, and folders and docs where students can view all created folders and uploaded documents.
Stage 3:
Ideation
Generating & developing ideas
Based on my conclusions from research and having a clearly defined problem to solve, I proceeded to the ideation phase by organizing my observations to help generate as many ideas as possible.
This phase was also a catalyst for forming options outside of the obvious ones and making room for innovation. The left image is a complete mind map of all the solutions and the right image is marked with an indicator that the solution may involve hybrid learning or virtual and in-person learning.
I found that the majority of the above solutions could be displayed online or via a mobile app, however many of the options would benefit from a hybrid solution where students can gain hands-on experience as some students learn better in an actual environment. For instance, tasks like job shadowing can take place in a virtual sense, but certain majors may be better experienced in an in-person setting such as biology or physical therapy.
Attaching files and documents
Students can attach files from different folders that they have created or sample images directly from the web.
File Selection List:
— 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.
Attach files and documents
Students can attach files from different folders that they have created or sample images directly from the web.
– Project presentations for video clips, power points 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.
Student Chat Room
Students can attach files from different folders that they have created or sample images directly from the web.
Upload Option
The upload option allows students to include files including images and other documents that pertain to the project. Students can access this screen by pressing the small paperclip icon in the chat room.
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.
Student Chat Rooms
This screen displays the multiple chat rooms that a student is involved in. These rooms will be divided by specific projects and will have students pertaining to each project in them.
Filter Option
The filter option allows students to filter by class, other students, professors, and groups that the student may be in.
Folders & Documents
The folders and documents screen includes folders that students can create to put pertinent project files in or upload and view documents.
Groups
On the group 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.
Stage 4:
Analyze (again)
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 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.