Digital Social Innovation Phase 2: UX/UI (Group Project)
*All work in full opacity indicates my individual contributions.
Project Brief
Continuing from ILL 301.4, this second phase of the digital social innovation project required the execution of the ideas conceptualised in phase 1. Phase 2 required the execution of the conceptualised minimum viable product. Using wireframes and user testing, a digital product had to be created that functions as an operational digital prototype of the platform. This had to showcase the chosen user flow and the primary functions of the platform.
Project Deliverables
1. Pitch Deck of Slides 9-11 Containing:
- User testing and paper prototyping
- Description of digital solution
- Final prototype
2. Wireframes
3. Digital Prototype
4. Final Digital Designs
5. Style Guide
6. Development of Process and Conceptualisation
Design Strategy
Digital design begins with a user-testing process in a paper format. With the intention of manifesting a digital, social innovation in the form of a Progressive Web App (PWA), paper prototype tests were handed out to students all around the campus of the University of Pretoria. This method provides quick feedback that can be used by the designer for further brainstorming. The designer can then improve the user-journey and thus achieve more effective design solutions. Using the insight into user thinking and behaviour provided by paper prototyping, one can now achieve high fidelity wireframes. High fidelity wireframes ensure the platform serves its promised service for its specific target audience effectively enough to be regarded a digital social innovation.
The Blueprint Progressive Web App (PWA) is a platform for South African farmers and fishermen to report threats and violations to freshwater sources in their local areas.
Pitch Deck Slides
All these slides were a group activity.
Wireframe Development
When developing the final prototype, designs went through the rough sketching phase before being developed into rough digital wireframes for user testing. Finally the designs were finalised for the digital prototype. Below shows a summary of this process, for all process work, please see our figma process work file.
This was a group activity.
User Testing
This was a group activity.
Digital Prototype
I worked on many of the high fidelity wireframes of the app, while my teammate did the prototyping.
Final Designs
Final designs were executed as a group with equal contribution.
The wireframes were largely a group activity, but specific components I completed individually are specified in the components section below.
Style Guide and Visual Development
Logo
The logo represents the four freshwater ecosystem types: wetlands, rivers, groundwater and dams in a simple yet elegant manner. Initial concept ideas were inspired by the Celtic line style of balance, to commuicate unity. Water connects us all. Inspiration also came from topographic lines as they link back to the literal idea of a “Blueprint”, and how it puts a plan into action.
Grid
The 4 column grid has margins and gutters of 24 px to allow for touch friendly spacing for all people. The rows are an 8px rhythm to comply with UX/UI conventions.
Colours
The main colour scheme for the website is made up of predominantly blue variations which gives The Blueprint it’s unique identity and links to the idea of water. The secondary colour palette, which is used for illustrations is made up of a triadic blue, green and purple palette. This offers variation throughout the site, ties in with the identity of The Blueprint Organisation, and is reminiscent of freshwater landscapes.
I worked on laying out the type colours, component colours and denotative colours in the style guide, as well as the much of laying out the illustrative colours.
Typography
I worked on all the typography section in the style guide.
Icons
The site’s icons follow standard UX/UI conventions to make it easy to identify their function.
Components
A variety of buttons are used throughout the site. The different button styles indicates to users what the primary or secondary actions are on each page.
I worked completely on the Pop-Ups and Report History components. I also illustrated the Icon Buttons.
Illustrations
Illustrations form The Blueprint’s main visual identity. The simple vector style creates an approacheable feel. Various opacity overlays can be used to create shadows and highlights. Simplified, bold shapes create continuity throughout the site’s illustrations.
Bronwyn and I worked together on illustrating the Sign-In Page, and I created all the button illustrations.
