UI Design
Research on possible user disabilities and ways to create an accommodating UI and UX have been documented in the following document: https://docs.google.com/document/d/10L6B2yZmxZ-YEC60kwEfVfSLpnfk73y8eHhX407BJhY/edit?tab=t.0
Our UI team constantly keeps evolving our design and leaves all of the progression and design history visible. Due to the free-tier collaborative version of Figma we are using, we are limited to a maximum of 5 pages, which we have divided into features and overall PO feedback (because of this limitation, Features 4 and 5 share the same page). Some elements of the design become deprecated and are marked accordingly, following this is a Refactoring section illustrating the design replacing the deprecated one.
Screenshot showing the Figma page limit and organizations:
Elements marked as deprecated are followed by a Refactored design to better illustrate UI/UX progression.
Each mockup has been designed to provide the best Usability Experience UX to our users, including our personas with disabilities. All designs are made accessible such that no matter one's disability, each user has the same UI offered to them. ConUMaps is made accessible by nature. Designs go through a series of tests, namely colorblind tests where the colours used are put to the test for Deuteranopia.
| Sprint | Link to Figma + info |
|---|---|
| Sprint #1 | Sprint 1 mockups can be found here. Feature 1 (campus map, toggle between SGW and Loyola campuses, get information about buildings) will be implemented during that sprint. Screenshot illustrating where you can find the Feature 1 work. Deprecated elements are marked visibly.  The refactored design can be seen under PO Feedback:  Modified mockups have been named "PO FEEDBACK SPRINT 1" in order to keep a trace of the UI progression |
| Sprint #2 | Sprint 2 mockups can be found here. Feature 2 involved a user selecting a start and destination building, the start building being determined automatically by user location, and directions being displayed on the campus map. This feature focuses on outdoor navigation, yet if the user selects a class as their destination, they will view a modal once they have arrived to the destination building and be prompted to resume their navigation indoors. This sprint has also involved refactoring the display icon for when a user is inside a building. Pop-up prompting the user to resume their navigation The delivered refactored Sprint#2 design can be found under PO Feedback: 
|
| Sprint #3 | Sprint 3 mockups can be found here. In this sprint, PO comments have been addressed to refactor the building-to-building navigation feature and its design guidelines. Namely, current building icon overlays (indicating the building the user is currently in) have been produced and tested for accessibility. The latter can be found under the page "Feature 2", under the Refactored header. Moreover, the home screen design has been refactored to now have a search bar. This modification ensures a smoother search of buildings and seamless transition to the building navigation. Lastly, accessibility research have been implemented into the design layouts of the navigation (use of textures for the navigation routes) and navigation options were made horizontal to reduce user scrolling and save time (having it visible without scrolling helps users with reduced articulations mobility use the app and makes our product overall cleaner). Screenshot illustrating the refactoring of the building-to-building navigation search:  An overlay from last sprint has been decided upon to be our final design to signal the user's current building. Introducing a new highlight colour would've been too confusing to the user, hence why an overlay that looks intuitive (person design) was the choice made here:  Refactored navigation search:  Use of textures in navigation, following research:   The remodeled design guidelines support both light mode and dark mode as well as the autofill search feature implemented by the Devs. Refactored vertical layout for navigation and horizontal layout for travel options (bus, shuttle, etc) 
|
| Sprint #4 | Mockups can be found here. In this sprint the UI time implemented mockups for the schedule viewer and 'view next class' feature. The UI team also heavily refactored the building-to-building navigation feature, and the feature for displaying directions to the next location. This involved extensive usability testing, and more refactoring is planned for future sprints. |
| UI progression can be found under "PO FEEDBACK" | ------------- |