Skip to content

Design Process

Alishahzaib edited this page Oct 26, 2018 · 10 revisions

SUMMARY

In one word, we design a mobile application for the people of Brisbane who want to learn and practice a specific set of craft skills, creating a craft sharing community where they can communicate and find projects and shared skills and expertise in shared workshops and Markerspaces around Brisbane. According to the research, people who want to learn craft skill always find it hard to get started because it is too expensive to have people teach the skills hand to hand and to find a space and right tools to practice and share their craft work. For those who attend the workshop, they always need a platform that is more focus on their group so that they can post their information in the circle. The general social network is too broad to target the right circle. People learn with video tutorial cannot get the point or find a chance to practice. There is no face to face interaction when learning from a video tutorial, hence, lack of understanding and communication. There is not an existent application that focuses on craft skills, linking beginners, skilled people to use shared workshops and Makerspaces together as a community for skills, knowledge and information sharing. We can do something to help. Solution: Skill up, a social mobile application that allows the users to connect with each other based on their preferences of skill they like to learn from the other person. The idea revolves around connecting the people in a space which has the right tools for learning. This leads us to utilize MakerSpaces as a place for learning and sharing skills. Allowing face-to-face interaction to share skills, information knowledge and to form a community.

DESIGN PROCESS:

RESEARCH:

Initial research was executed to find more information about the domain and to identify the problems and more insights about the domain for that many articles were closely studies and than insights were driven such as, an article that focuses more on online/video sharing then face-to-face communication which we criticize about. As people can not learn specific skills just watching videos they require someone providing them feedback on either they are doing it right or wrong and assist them directly. According to one research, one of the articles indicated that majority postgraduate student prefers face-to-face discussions for knowledge sharing, which include encouragement by the teacher, asking the teacher directly for help, then using online platform. The audience in this article is not what we are looking for, but the activities they are involved in like sharing knowledge, asking for help from experts to learn something are similar to what people go through when sharing skills. Other insights indicate how skill sharing help older peoples to pass on their craft skills to other people to increase communication which can help in healthy living and can decrease the isolation factor. These insights from the articles help us to narrow down our domain to focus on face-to-face skill sharing of craft skills. For which need further research on craft skills and how people share these skills around which directed us to explore The Edge Makerspace as an initial step to interview the direct users around.

After visiting the Edge Makerspace - Fabrication Lab, we were clear that people living in Brisbane who are interesting in learning a set of specific craft skills such using metal fabrication work, 3d fabrication work, woodworking, sewing and others can be our target audience. Learning these skills require the right tools and expensive machines which can be easily found in Makerspaces and shared workshop all around Brisbane. From the fabrication lab we get insights into how users work there and how they are engaged in sharing skills at that space, to gain the insights we developed a set of question and interviews were conducted. We found that people in that space were using a Job skill board to post information, a platform to check the workshop environment and a system to find the right person that can assist on a certain problem. Our major found was finding post-it notes on that Job board that reflects someone request to build a skill board around so people can share a skill. It also recommends making a mobile application just like a dating site where two people can meet and share skills. Another thing that we observe was that people ask other for help which can be in term of technical support or an advice and for that Job board helps them to identify which people they should go to ask.

Reflecting on our insight we come up with two low fidelity prototypes/ wireframes that focus on the important aspects of the application. The discover page, where users can select what skills to learn and who can teach them, or a matching page that shows you the results based on what you want to learn and share with others. A location page to choose a specific Makerspace or shared workshop to work. A profile page where users can upload their qualification for validation and a skillboard page matching the real world Job board system that what users use to communicate and share information or knowledge in that space following one of the Jakob Nielsen heuristic principles that states matching between the system and the real world.

Based on the low fidelity we design our medium-fidelity prototypes. These prototypes had all the important functions that were designed in Low-fidelity prototypes that were based on the insights we got from the research. Each prototype was tested by the users and questions were asked about their preferred prototype and what function in each prototype they like the most. Other than that our main focus for the second round of user interviews was to evaluate our concepts with the users that either they can easily understand the concept through the prototypes and to find usability issues. The user testing session was successful insights gained were important for further research and iteration, the majority of the people prefer prototype B and its functions, on insight lead to more research which asked us to include small people back, which means people with experience but with no qualification that are self-learned and want to contribute to share their knowledge with others. This leads to more academic research and we found an article called, Face-back: Who is the Illiterate Again? which reflect on how to give recognition to illiterate people with specifics skills to earn and spread their skills with other people in society. Which helps us to understand how can we integrate self-learned people with no qualification into our final application.

LOW FIDELITY PROTOTYPE

Insights from the users provide us design opportunity to came up with two low fidelity prototypes or wireframes. These prototypes provide the basic functionality of the application. We design an mobile application as it is easier and it can be used anywhere anytime which make it flexible to use. The first prototype has a basic function of finding people based on their skills and filtering function which is shown is discover page, it also has the location function where people can select the location to share their skills and work together and learn and lastly a skillboard page where people can post what they want to learn and other people can reply them back. The second prototype has a matching function which is initially mentioned in our proposal that allows one user to exchange skills based on the preferences which reflect the finding one to join page, the other pages from that prototype are a basic function of message and profile. Below are the images of the prototypes. Paper prototype
Wireframe of Low-Fi prototypeA

MEDIUM FIDELITY PROTOTYPE

The Medium Fidelity prototypes were designed in XD and Marvel. These prototypes were based on the low-fidelity prototype will all the similar functions. The prototype a contains an additional function of DIY where people can ask for help in making something. Two prototypes were designed and A/B testing was conducted with the users. These prototypes had all the important functions that were designed in paper prototypes. Each prototype was tested by the users and questions were asked about their preferred prototype and what function in each prototype they like the most. Other than that our main focus for the second round of user interviews was to evaluate our concepts with the users that either they can easily understand the concept through the prototypes and to find usability issues. The insight we gain from the testing reflects that one user wants people with no qualification but experience that are self-learned to be included in the application for sharing skills and contributing to help others. The other insights were related to add the rating functions where on user can rate the other user and provide the reviews and it can also show the rate of activeness of the person, that how frequently they share skills or how active they are, so other users can easily make a decision to select a person that they want to work with. Overall, user testing session was successful and we found many aspects to iterate based on what user evaluation and we selected the one prototype to work based on the votes of functionalities and the interface that majority of user likes.
Go to the prototype link: https://marvelapp.com/3f2336d
Go to the prototype link: https://xd.adobe.com/view/dfc7b7d3-00a3-41b0-627e-85c2f3884743-a9f6/

HIGH FIDELITY PROTOTYPE

The finish application is a combination of the Marvel app, and PHP, HTML, CSS and Javascript using links the Marvel apps connects with the external links that show components such as profile function and a selecting a location or Makerspaces to share a skill.

Based on the iteration from the user testing prototype B was selected, few aspects were removed from the prototype such as ask function that actually works similar to the skill board and rating system was improved to showcase which people are actively participating and reviews from other users rather than a rating system that only reflects users self-evaluation of their skills. The experience section was added in the profile where the user can add the experience or pictures of what they have made and provide reference number of a person they have worked for validation purposes. This was included for people who have no qualifications but are good at certain skills and are self-learned.

FINAL PRODUCT

The finish application is a combination of the Marvel app, and PHP, HTML, CSS and Javascript using links the Marvel apps connects with the external links that show components such as profile function and a selecting a location or Makerspaces to share a skill. In our app, we have three main functions. The UI style simple and easy to understand, consist of Hot magenta as the theme colour, and minimal icons for easy and quick interactions. First, it provides a skill board for users to post information about projects, human resource, technical questions and upcoming event etc. Having this platform on hand, everyone gets a fast access to the circle. In the prototype, it is available to post comment and images like in a normal social network application. Secondly, a powerful category to about the craft technology and who is working in that field that users can join and share skills. Also, a list about how people like this people. You can message them or view the profile by a simple click. Apart from individual skill category, we also provide a group project function on the top tag, where the user can view and join a different group working on different amazing projects. Thirdly, a Brisbane map view of all the shared workshop and the basic information of them with a link to the official website. This map is useful when the user searches the appropriate workshop and makes an appointment with others. Go to the prototype link: https://marvelapp.com/a2a6g3e/screen/49387951

Main Function

  • Profiles screens At the first round of user testing, we found that our profile pages have some problems. The main issue is about the rating system. Our target users thought using circles and score to evaluating a person is more obvious and interactive than using stars. So we change the view, below are the profile screens:

  • The profile page should be including personal information, professional skills, qualifications and experience (like CV), so people can better know a person’s ability, we also include this function, to allow users to see the uploaded files of qualifications. People should also be able to edit their profile pages, and in the edit page, people can upload their qualification files (in .jpg or .png). Also, we include the links to personal Facebook, Twitter, Instagram and Google+ pages, so users can better know a person. below is the edit page:

  • Map screen
    One of our key features is to encourage people to meet offline, so map function is vital. We use Google Maps API to achieve this function, below is the screen of our map function, we already marked four Makerspaces in Brisbane so users can choose one of them to meet.

  • Database
    We use MySQL database to store users’ basic information and use PHP to pull out data from MySQL and show them at the web page. The information includes name, phone number, professional skills, availability status etc.

CONCLUSION

In summary, our team produced a mobile application that provides a platform for skill sharing to create a process-sharing community that helps people learn and practice a specific set of process skills. We use Adobe XD, Marvel, and a series of web technologies like HTML/CSS/JAVASCRIPT/PHP to help us implement our concepts. In the process of design and implementation, we have achieved the following achievements. First of all, our products are greatly different in form of similar products on the market, breaking with the traditional way of sharing skills using video tutorials and creating a craft sharing community to promote face-to-face communication. It is unique and the only platform that not only helps people to find other people to share the skills but also provides a place where they can find the right machines an tools to work and share skills which are easily available at Makerspaces and shared workshops around Brisbane. This, on the other hand, can also help these Makerspaces and shared workshops to get more people in terms of reach for which they spend a lot of money on marketing and calling people to work. Second, the product was produced based on a lot of research and actual user interview during the design and production process and we also frequently visited Makerspace to interview the potential user groups to meet the actual requirements of the target audience. In addition, our mobile app can not only give access to newcomers to join the community but also allows frequent users of Makerspace to sharing skills and collaborate on projects in the community. Finally, in the showcase, people expressed appreciation for the innovation and practicality of our idea and said that they would look forward to the specific implementation and use of mobile applications. Along with our achievements, we have some opportunity for improvement. In the future we can further enrich the content of our products by adding more functional sections, optimizing existing features while also refining them to distinguish them from existing Google + discussion groups. In addition, our existing mobile app is a mixture of prototype and web pages, and in the future, our team will translate this concept into practical applications if there is a chance.

CONTRIBUTION

  • Team Leader: Ali Shahzaib Ali
  • User Research / Evaluation, Introducing & Interview: Ali Shahzaib Ali, Huanmin Fu
  • User Research / Evaluation, Recording & Analysis: Wanning Tian, Peiquan Li
  • Prototype Developer & UI Designer (A/B mode): Ali Shahzaib Ali, Huanmin Fu
  • Database Developer & Web Designer: Wanning Tian, Peiquan Li

REFERENCES

Inspirations: CNC machine icon: https://iconscout.com/icon/cnc-machine-3

Wood Working icon: https://www.iconfinder.com/icons/489794/build_building_construction_electric_saw_tool_woodwork_icon

Laser cutting icon: https://thenounproject.com/term/laser/190353/

Sewing Icon: https://www.freepik.com/free-icon/sewing-machine_745611.htm

Icons used for cartoon user profile and in group page: https://www.freepik.com/free-vector/people-icons-collection_1024244.htm

Functions: https://bootsnipp.com/snippets/z4P39

Article: Hamouda, H. A., Hussein, M. M., Sharaf-El-Deen, M. H., Abdel-Aziz, N. M., & Hanna, S. M. (2011). Face-back: who is the illiterate again? (p. 953). ACM Press. https://doi.org/10.1145/1979742.1979503

Majid, S., Yang, P., Lei, H., & Haoran, G. (2014). Knowledge Sharing by Students: Preference for Online Discussion Board vs Face-to-Face Class Participation. In K. Tuamsuk, A. Jatowt, & E. Rasmussen (Eds.), The Emergence of Digital Libraries – Research and Practices (Vol. 8839, pp. 149–159). Cham: Springer International Publishing. https://doi.org/10.1007/978-3-319-12823-8_16

Liddle, J. L. M., Parkinson, L., & Sibbritt, D. W. (2013). Purpose and pleasure in late life: Conceptualising older women’s participation in art and craft activities. Journal of Aging Studies, 27(4), 330–338. https://doi.org/10.1016/j.jaging.2013.08.002

Duncan, I., Yarwood-Ross, L., & Haigh, C. (2013). YouTube as a source of clinical skills education. Nurse Education Today, 33(12), 1576–1580. https://doi.org/10.1016/j.nedt.2012.12.013