Design Process - Tokolokopoko/Team-Toot GitHub Wiki

Design Process

The design process needed is for Kurt to handle interviews and provide insights to the group for further developments and discussion. With these findings, they would be brought to the rest of the team to help guide the rest of the design process. With this information, Isabella would help develop the wire frames for both the website and app, from there Rika would work on the app design process and Jay would work towards the final website to be implemented.

Low fidelity prototype

  • Wireframes
  • Original Idea
  • Interviews for specific data points
  • Integration of insights from interviews

With the development of the low fidelity prototype, what was brought to the table was some wire frame ideas by Isabella, a start to the websites build, some graphic ideas and design requirements such as colour schemes by Rika and interview material by Kurt.

User Testing

During the interview process there were elements of user testing involved as certain ideas were brought forward by the interviewer. For example, bringing the idea of a working app to homeless people allowed for some insight into human psychology. For example the idea behind Maslow's hierarchy of needs and in order for a homeless person to begin looking for work would need to have some form of shelter in order to build confidence to work. As for the wireframes, they were shown to all group members unlabeled and group members had to guess which area would contain what work. This helped with group members deciding on the best placement of features on the apps space. As for the colour schemes developed, there was a sample group where people were brought various colour palettes to choose from and were told to choose the colour scheme that best represents a feeling associated with homelessness. The most selected colour scheme was chosen to be used.

Evaluation

The final product that was produced was satisfactory for a low fidelity prototype as it created a good starting point for the idea moving forward. The additional research helped guide the ideas to be more manageable, while the physical design ideas helped lay a foundation for bringing those ideas into fruition in the future.

Medium Fidelity Prototype

  • Figma Prototype
  • Graphic elements for Figma prototype The medium fidelity prototype was designed according to the design and system requirements. They were based on the wireframes and incorporated feedback from the previous stage of user testing, along with recommendations from proxies and tutors. The team had settled with a mobile application format, as homeless individuals relied greatly on their smartphones. The medium fidelity prototype was developed in Figma, as it has extensive capabilities, and allows for collaboration. The prototype captured the visual and functional aesthetic elements, along with the core functionalities for our target users. The prototype at this stage did not have much room for movement at all, as users were given specific tasks or screens to go through. medium fidelity prototype

User Testing

User testing was also conducted with individuals of various demographics. Some individuals were job seekers, while others were proxies, such as one anonymous individual who is a UI/UX Designer for Volaby (previously Campfire), and another individual who works at Rosie’s. Kurt brought frames of the prototype during an interview with this individual, for some user testing and feedback. A summary of the feedback received, was recommendation for introductory videos for both the employer and the user, to break the bridge that screens seem to develop, but also to humanise the user, as there is still a large social stigma around homelessness. This allows users to describe themselves in a way that exceeds a still image or a piece of text. An interesting bit of feedback received from a job-seeking user tester was that they thought a user may be at a disadvantage if they did not have an introductory video, this was indeed a valuable insight. Instead of removing the feature entirely, it was relocated to be further down the page and less highlighted, so that it was not a primary feature for users to include, or a primary feature employers could view. Another key point was to add less career-focused sections in the user profile; users could be able to include a statement about what they liked about themselves. This was another factor with the aim of humanisation that other user testers agreed upon.

High Fidelity Prototype

  • Figma Prototype
  • Website
  • Promotional poster For the high fidelity prototype, our group had chosen to work on a Kiosk idea to be simulated. This was done through an iPad and then had cardboard painted to be placed over the top of the iPad to simulate the look of something similar to an interactive museum tablet. This was with the idea in mind that users can access the kiosk when accessing a shelter or other resources and are in a safe environment where they can access the application.

VSD (Value Sensitive Design) was considered in the design of this stage of the prototype, developing a prototype that had more room for movement that the medium fidelity prototype, and was fixed up according to the previous user testing feedback. The values of the users dictated what kind of words could be used, to ensure the users did not feel degraded or undermined in any way, but considered that an application that was far too bright and positive could have an adverse effect.

The high fidelity prototype resulted in having two primary pathways to demonstrate the core functionalities of an existing user and a returning user. It highlights the job searching function, the profile, messaging potential employers, the range of jobs users can find, and the automated resume creation.

User Testing

The high fidelity prototype produced on Figma, was brought in front of various people of different backgrounds for testing. This process started with a “free play” session where the user would interact with the prototype without any guiding questions to see if they can understand the product much like any user downloading it for the first time. From there users would then be told guiding questions such as “create an account” or “add a video” to see how effectively they could navigate the prototype. After this step users were asked more emotional questions such as “do you believe Samaritan is effective in humanizing homeless people.” After this point all that was asked if they would change anything about the app. Any issues that were found to reoccur were discussed with the group and fixed accordingly.