Application UI design for
Simon Fraser University
UI mockup of a new proposed application named SFU Connect
link to prototype: https://www.figma.com/proto/nhBXRtA61saGC584Y0yx7z/version1?type=design&node-id=1-2&t=A1UTRKgEcUU7KcvD-0&scaling=scale-down&page-id=0%3A1&starting-point-node-id=1%3A2
Description
In my BUS 361 Project Management course at SFU Beedie School of Business, my teammates and I proposed a new application named SFU Connect. I was the lead designer, where I created and supported my teammates in creating the mockup. This was a 2-month project. My teammates include Sakisha Koonar, Ngoc Kaylee Pham, Mi Hee Hashimoto Chang, and Harveer Dhadda.
Skills
-
The main skills include ideation, creating medium-fidelity sketches, and using Figma to create the application's UI.
-
Time management is crucial as there were five people on our team with very different schedules and abilities. We had to schedule more buffer time for skill support and mini-tutorial sessions so everyone understood what to do.
-
Keywords: UI design, prototyping, research, user journey, usability heuristics, wireframe, graphic design, logo design.
Objective
The objective of this project is an app to help create a community after the pandemic that supports students' education by providing advice from others, supporting students' mental health, creating long-term friendships, and providing a safe and convenient space for students to meet new people. Our objectives are to connect with 2,000 students at SFU over a two-year time period and create a supportive and safe environment for students to build friendships.
 Events Page |  Mentorship Page |  Chat Page |
|---|
Challenges
Actual SFU MFA inserted in the prototype with interactions linked to rest of the pages.
Logging in & MFA
One of the challenges was to link to the actual SFU multifactor authentication (MFA). If we insert an interaction that links to a separate page, we are unable to go back to our prototype. Therefore, after a lot of research and trials, I came up with a screenshot of the SFU sign-in page as a frame and then linking the buttons to the rest of the interactions in the prototype to resume the regular interactions in the mockup.
Toggle Switches for on and off
Toggle buttons were needed to indicate if a certain personal setting was turned on or off. However, we had a hard time creating the visual indication of the toggle switch. I then searched for the interaction online, watched multiple tutorials, and customized the interaction to fit our style.
I also had to define our scope for the customization as time was very limited. I had to select which personalization should be highlighted and focus on those interactions in detail.
I focused on accessibility as that would hinder users from accessing information and the whole user experience, whereas most of the others are just preferences that would not majorly affect user interaction.
The user profile personalization settings, with accessibility function enabled for the screenshot on the right (chat content).
Loading Animation
We were stuck on how to display the system is loading to process information instead of instant response to be more realistic.
However, I could not create a system indicator by percentage under a short time constraint. Therefore, I found gif animations to mimic the loading screen of the system to try to be as close to the actual user feedback as possible.
Mimicking loading application information
Final Thoughts
​
In the future, I would provide wireframes and reference images for the stakeholders so that it will be easier for them to interpret and picture the outcome of the design. Also, I would research and interview different stakeholders such as our target audience, students and mentors, and SFU staff to understand more about the user journey and intentions and more about different kinds of typography and layouts as I believe a stronger Typography and layout could further attract attention. Moreover, simplifying the user path could be explored so that users could potentially reach the same destination in a quicker manner for ease of access.