Design for Social Change

digitalart Mobile app mobile app design socialchange ui design UI/UX uxdesign ILLUSTRATION PWA wireframe

Brief Summary

Conduct paper prototype testing based on the Minimum Viable Product from phase one. By making use of paper prototyping, test the UI design solution with users for two iterations. Develop comprehensive wireframes in Figma based on user input which will be used as the basis for the style guide, components, UI design and digital prototype. Create a style guide that includes all the main components of the user interface. Use the wireframes and style guide to design the user interface using Figma.

List of Deliverables

. Paper prototype testing (in the Medium article)
. Wireframes (in Figma)
. Styleguide (in Figma)
. UI design of the user journey (in Figma)

Design Strategy

To provide a solution to the problem statement in the first half of this project, a Digital Social Innovation (DSI) in the form of a Progressive Web Application (PWA) had to be designed. Ideally the application should be fully functioning in providing an accessible platform for the South African Alcohol Anonymous (AA) organisation. For this project, however, the user flow to be designed is essentially an alcohol tracker, serving as one of the functions within the AA application. It is hoped that the alcohol tracker will draw and engage casual drinkers as much as people who are considered alcoholics.

The approach the the interface is to design a tracker that provides users with the main function of tracking their alcohol intakes and set intake limits for themselves. A calendar encourages users to track and journal their daily progress to sobriety or to lowering their overall alcohol intake. The application provides users with milestones to be reached and further encourage a streak of little to no alcohol intakes. Insights provide users with various statistical summaries of their intake logs.

The interface design takes on a bold, vibrant, illustrative and friendly aesthetic, consisting of smooth, round UI components. The AA brand’s colours have been re-introduced as a more vibrant orange and blue serving as the main colours on the clean, white interface. The aesthetic adds to a modern feel and inviting interface for users to track their alcoholic intake without feeling intimidated by sharp, bold shape language. The use of round buttons and cards, further symbolise comfort, wholeness, totality and happiness - emotions we want to evoke in our users. The general tone is friendly, encouraging and informal - inviting anyone, regardless their journey, to partake in the AA community, even if it is just to track your alcoholic intake.

Relevant Links

Medium Article - 'Putting a Cap on SA’s Alcohol Consumption' may be read here.

Figma Wireframe, Style Guide and UI Design may be found here.

Step 1/ Digital Social Innovation Target

Application Goals

Step 2 / Establish the Flow

User Journey

Within the AA's main application, the alcohol tracker serves as one of the many functions within the P.W.A. It was decides to merely follow the user's journey through navigating the alcohol tracker.

Step 3/ Test the Flow

Paper Prototyping

Designing a prototype on paper is an economical and effective way to test the initial design and conduct user feedback. The users were asked to navigate through the prototype and complete a series of tasks. The feedback was used to then improve upon the design. A second round of prototype testing also took place once these changes were made to help finalise the wireframing.

Step 4 / Frame the Flow

Wireframes

Wireframing serves as the foundation and basic structure for the final UI design. All of the user feedback from the prototyping provided the best possible solution to approaching the wireframe design. Wireframing serves as the foundation and basic structure for the final UI design. All of the user feedback from the prototyping provided the best possible solution
to approaching the wireframe design.

Step 5 / The Look

Style Guide