BCIT Project Hub

Part 1: D3 Project Hub

This portion of the case study was written earlier in the practicum. This was before the D3 Project hub was expanded and became the BCIT Project Hub. Several features that I had taken out while creating the D3 Project Hub were added later on when working on the BCIT Project Hub.

The D3 project hub was a concept for a web application that allows first and second year D3 students to upload and display all of their projects in one place. This application can help D3 students organize all of the projects they create during the program. Students can also view the projects of past D3 students in a project archive. The primary users of the D3 Project Hub would be D3 students with instructors acting as moderators.

Ideation

I spent the first few days focusing on ideation. I wanted to have as solid an understanding as I could gain. I asked questions such as “What problem are we really trying to solve here?” and “Who are we trying to solve it for?”. These questions were paramount in keeping the primary users at the forefront of the design process. I wanted to create an application that would be useful, easy to navigate and connected to the BCIT brand.

I found the BCIT style guide which helped guide the structure of the app and the overall design. I also had the idea of using the apple app store and the google play app store to guide the concept of students listing their projects.

Web Mapping

Web mapping was helpful in laying out the user task flow. I found that a signup/login screen wouldn't be needed if just D3 students and instructors were using it. There was also going to be a tutorial, but I felt the project uploading was intuitive so it wouldn't be necessary.

Wireframing

Wireframing was very helpful in forming the early iterations of the app's structure. I went through a few iterations for some of the desktop and mobile version's screens. I removed some features that I thought were redundant or unnecessary.

Removed and redundant features

I merged the view solo projects and collaborative projects on the home screen into view projects. I removed the ability for students to view each other's profiles and projects. The purpose of the app would be for students to organize their own projects, not compare or socialize.

Students cannot upload projects on mobile. I felt that the feature isn't necessary for the mobile version. The process of uploading a project on mobile would be cumbersome and the majority of students would be more likely to be using the desktop version. This could be changed in future updates.

Core App Function

Uploading, Editing and Deleting Projects

On desktop students can upload new project and edit and delete existing projects. Successfully uploading a project will send students to the project details screen. All the information they entered before will be displayed on the project details page.

Secondary App Function

Navigation

I changed the desktop navigation from the top nav to side nav. The top navigation began to feel a bit cluttered.

On mobile I used the common bottom navigation instead of the sandwich menu navigation. This is because all of the screens within the app can comfortably fit in the bottom mobile nav bar.

Archived Projects

The archived project page is structured similarly to the projects lists page with the difference being the timeline feature. Every node on the timeline is a different year and would populate that screen's project list with projects from that year.

Filter Menu

Students can filter the projects that are displayed on the project list and project archive screens. Some of these options include solo projects, collaborative projects, graphic design, coding, etc. these tags would be set at the time of uploading the project so that they can be filtered through or searched for.

Search Function

The search function can be used to quickly navigate to a specific project or section of the application.

D3 Project Hub Final Mockups

The final mockups for the D3 Project Hub's desktop and mobile version took the least amount of time from each stage of creation. The iterating through the wireframe designs made it so the structure was ready. Using the BCIT style guide made adding the colors, fonts and other design elements much simpler. There is room for refinement of the current content, more features to be added, and possible expansion to other programs if the demand is there.

Part 1: D3 Project Hub Results

My goal from the beginning was to create a mockup for an intuitive web application that would allow D3 students to organize their projects. I believe that the result of this project means I have reached that goal. There is plenty of room for this result to be refined, remixed and reinvented. For the time being I believe the main objective has been achieved with this mockup.

If I were to approach this project again, I would make heavier use of rapid prototyping. I find that it is helpful because it forces creation with a short deadline. This forces me to let go of any ideas of perfection and to just create.

I would spend more time during the earlier stages of ideation and wireframing figuring out what items are used a lot and turning them into components.

I also didn't use the BCIT yellow #FFF400 as much as I wanted. I was surprised to see that it was one of BCIT's brand colors, which shows how sparingly it's used in BCIT's branding. So I wanted to use it more in this project.