Northumbria Design

Northumbria Design

Northumbriadesign.com - Conceived and managed the development of an online portfolio platform for Northumbria university students within creative courses to collaborate, find work and promote the university (trialed in beta phase). Presented to graduating year group, University staff and Steven Kyffin Pro Vice-Chancellor Business and Enterprise.

Overview -

- TimeLine

6 months 2017-2018

- Role

Managing Project, UI design and collaborating with Developer

Managing the project, collaborating with a developer for MySQL, database design and understanding the various technical challenges behind developing a social profile site with a submission blogging/ Portfolio platform. Learning how to bring a complex project from conception, ideation, site architecture through to a finished result. My CMS skills improved as well as those of UI and UX

- Problem and Need

Collaboration and Communication

Students in different creative courses can communicate and connect to collaborate on various projects. By viewing students portfolios and projects they can  see different skills, interests and capabilities of the student. e.g:

  • A light designed by an industrial design student that needs fabric working with a fashion design student. 
  • A fashion student needs buttons cad designed by a industrial design student
  • Architecture students wish to collaborate with interior design students.
  • UX design students have an idea for an animation on their website and wish to work with animation/ media students.
  • It could even be a case that people in non creative disciplined courses wish to work network with someone internal to the university. (Business Students looking to work with design students).

Faculty staff need a better way to notify and communicate with students. University events occurring throughout the different departments and students from the various creative disciplines need notifying. e.g:

  • Design students are working on a research project and need to work with other students.
  • A design lecture is being held in industrial design on ‘future materials’  which fashion students are interested to join.

By developing the inter disciplinary connections with students form various courses, the creative community will flourish. University is not about sitting down and being taught, but learning by doing, trying, communicating and experiencing, sharing expertise . In the working world after university people are becoming more and more diversified required to have experiences and multiple capabilities outside their role type. By helping students learn new skills and better collaborate at university, they become more adapt for later life.

Student Discovery and Promotion

Students are eventually required to have a digital online presence and ways to share their portfolio. This can help gain their discovery in the world through external site visitors showing interest in their projects/ work as well as sharing their work.

Social links built into the platform enable promotion or projects and works to various social medias (LinkedIn, Facebook, Instagram, email, etc.)

University Promotion, History and Records

The University wishes to gain a greater position when competing with the other universities. A key way students evaluate the quality of the courses is by looking at facilities, ex students and their works. By the university having a way to document students works they keep a record and can better promote the course capabilities, skills learnt, projects. The university can also promote students projects that have received various awards.

External Advertising and Interests

Various creative organisations, communities and events occur outside University within Newcastle and the greater area. Through NorthumbriaDesign.com These external opportunities could be submitted to the platform and then presented to the students.

E.g. A screening of ‘the history of the moving picture’ is airing at Tyneside Cinema.

The current method of communication within the university is email marketing focussed, which can be mistake for spam and is not centralised through a one stop place to see what’s happening.

Due to the high number of pages and profiles, there are also great opportunities for selected and appropriated advertising banners.

e.g. Student Discount on Laptops at abc shop in town..

- Users and Stakeholders

A range of University internal and external stakeholders will adopt the platform

  • Northumbria Students in creative Disciplines
  • Companies looking for interns and Graduates
  • University staff and creative communities
  • University relevant advertising companies

- Opportunity

NorthumbriaDesign.com

An online portfolio platform for Northumbria university students within creative courses to collaborate, find work and promote the university. Also a hub for relevant stakeholders to engage within the creative courses and community. 

- Project Constraints

Time

 A target date was set for a presentation and introduction to a trail group of students. Therefore the platform needed to be operational for the demo and core functions.

Financial

Most of the site and CMS was designed by myself with the integration of plugins/ tools, however collaboration with a developer was required for database (MySQL) work and certain functional changes. The developer incurred a small fee for their supporting work. Therefore it was essential everything was developed in place ready for the planned time period for their works. The developer was managed with a traffic light deliverable check list system.

Design Development

-The process

Post it notes

To begin looking at the brief it was clear the solution needed to fulfil two key factors: 

  • The project sharing and uploading capabilities
  • The profile creation and community functions

Bringing these two categories together provides a truly unique platform for the university students.  The capability of being able to discover students from their uploaded work provides an invaluable way to network and publicise the university’s potential. First step.  Post it note ideation to explore core site functionality and page requirements. It was realised early on that the main site navigation could be broken down into:

  • Home page  -  to attract first time visitors and to re-direct to the main pages of the platform
  • Projects directory page -  a directory listing of designers uploaded projects with filtration options
  • Designers/users directory - a way to filter designers by profile fields to then view their profiles and publish work
  • Course features - an area that provides general community information and resources

There would have to be considerable thought into profile page layout, filtration options and controls to ensure project media and content is uploaded in a uniformed manner using a controlled template system. 

    Home Page

    Exploration of home page layout and requirements as well as navigation menu, styling, drop down options for key pages.

      Directory Filters - Projects & Designers Pages

      Thoughts into the projects directory page filters and designers directory page filters and layout. It became clear both key pages although each having large volume of results they could both be filtered by the same profile criteria.

      • Course
      • Graduation year
      • Awards or project tags

      By implementing these three crucial filtration methods all designers and projects could be discovered in the most powerful way

        Project Page template Layout

        Although multiple projects need to be previewed in the projects search page, when clicking on a project to view it, as a page a template system was required to ensure uniformity across all content and projects uploaded by designers.  I did not wish to infringe upon the actual content that they created but instead provide an easy adaptable template system where their text, images and videos could be placed.  As a student of a design discipline myself I knew one of the best ways to communicate a project was by showing a hero image.  (One clear image which clearly communicates the project) A simple title and then the opportunity to provide more detailed description, text, video and supporting images. (Very similar to a blog layout)  When designing for the web it is very important to consider mobile responsive layouts and how a page layout could be viewed on a computer screen and then be adapted to a narrow screen on a mobile/portable device. 

          Profile fields, features and data collection

          Thought into profile field options, visual layout for viewing profile data and uploaded projects as well as the appropriate data to be collected from the user during the sign up process.  What are the crucial ‘required fields’ ? 

           

            Project preview for directory listing

            When looking at multiple projects in the project directory it was important that a project be displayed in the most appropriate way but also provide all the necessary info for a site visitor to be attracted to click and read further.  Exploration was undertaken as to the best layout and way to preview a project for listing.

             

              Wireframes to check page links

              Wire frames were created to explore layouts, interlinking and re-direction between pages to check no core functionality was overlooked.

               

                Wireframe Layout

                After developing wire frames in illustrator I then explored templates for wordpress CMS that could easily be stylised and  adjusted with css.  Various plugins were available to help provide the user profile and network functionality as well as ability to upload projects in the front end. A unique text editor tool with easy image upload and video embed features was used. Essentially the core site was built on a blog publishing theme that enabled projects (blogs) to be listed by categories and tags to then be filterable (with some database/ developer support).

                  Management of Process

                  Simultaneously managing and working with a developer enabled the project to be delivered sufficiently. A traffic light system was used to evaluate cost and timeline as well as Kanban board to manage the project development.

                  As I was mainly working on design and appearance.. I had limited knowledge in how to code in php and develop certain database filtering and functionality changes. It was therefore essential I had an understanding of the end User experience I wished to achieve, to develop this I needed to consider the requirements  and individual changes ( build a scope) to inform the developer for the traffic light system so they understood exactly what they needed to do.

                   

                    Scroll through Projects

                    Northumbria-Design-phone-scroll

                    Introduction to the community

                    -Presentation made to graduating Industrial design year group 60+ students, University Design Department, Steven Kyffin (Pro Vice chancellor Business & Enterprise)

                    Presentation viewable below by clicking through slides.

                     

                      Moving forward how I would like the project to improve:

                        • Further adoption and development by the university board and supporting students.
                        • Development of unique site branding by student teams
                        • Grow student user base and awareness
                        • Implement new content through a management commits ..such as podcasts and tutorials and news uploads.
                        • Improve site performance and server speed
                        • Build in moderation systems or more administrators to enable approval of certain content   areas.