top of page

Week 3 Prototyping

  • Matt Wilson
  • Oct 9, 2020
  • 4 min read

Updated: Dec 31, 2020

I started this week feeling a little bit disappointed in playing it safe in my last piece of work. Using the techniques that i am familiar with didn't give me much to take away after it was done and so i wanted to approach this week from a different stand point. There seems to be a lot of UX Designers in the group and Game Dev is more my area i guess. So i decided to take this weeks challenge from a UX direction and maybe learn a little more along the way.

The task this week was to take an existing artefact and reverse engineer and use a range of prototyping techniques to play around with it. Seems straight forward i guess, like breaking down a product and making it better or adding to its usability. Yeah i can do that, i think.


So i needed to look a little into UX and get a general idea of what i was looking at.


Very often, UX is connected with usability which refers to how usable and easy to use an object is. Usability describes most intentions with designed objects, but in actuality, UX can be any type of experience, be it happiness, or gratitude, or even sadness.(Araz, 2018)

I wanted to look at Twitter as my Artefact. I use Twitter daily and yet i despise the platform. In my opinion its a cess pool of opinions (ha), negativity, and narcissism. However on the flip side it has possibly one of the best GameDev networks around and it literally puts you in touch with devs all over the world and can be a great tool for creativity and opportunity. Therefore im torn. I use it daily but dread opening the app.

I needed to formulate the problem in a way that i can work on the Solutions, in the challenge discussion forum Laura recommended an article on User Stories something that i am familiar with in the Agile process. In creating the User Story it is recommended that we come up with Acceptance Criteria in order to assess that the solution is successful and in turn keep focused on the problem. It is suggested no more than 3 criteria per Story.


Acceptance criteria could establish a boundary that helps team members to understand what’s included and what’s excluded from the scope of the user story(Ravlani, 2017)

My User Story

As a Twitter user, i would like to control the content on my feed based on suitability to mood and emotion.  Without deleting or muting who i follow, it needs to be a fluid action and changeable at any point in the app.


Acceptance Criteria

1. Filter content on creator and subject.

2 Easily create mood profiles in App that is fully customisable

3. Be able to quarantine tweets/users from profiles for a period of time. 


Now for the ideation and prototyping, I wanted to try a different approach with the outcome so i knew i wanted to use some form of Interactive wireframing. To try and realise the solution into something i could use and interact with i would need to map out the idea and break down the stages of interaction in a Flow Chart of sorts.

To formulate a solution i chose to sketch out the designs using a whiteboard this would allow me to change it on the go and see it on a larger scale.


To create mood Filters for the App, that could be customised by the user. I worked on the idea of Mood in a Grammatical sense in which i would use three meanings.


Subjective; meaning wishful, Hypothetical and therefore i linked this to Creative.

Imperative; meaning instructional, encouragement and therefore i linked this to Motivational

Indicative; meaning Facts and therefore meaning Truth


This would be loosely the idea and it would be the moods that would in turn effect the emotional state of the user. I wanted to create filters that would represent these so that the user could turn these on at any point and be exposed to the relevant content a side from their usual Timeline. When the user needed to boost their creativity, motivation or just plainly cutting the Bull***T. I wanted to do this without deleting Users, cancelling or blocking them. Everyone has a bad day now and then.



Visualising how the App would work at this point was more important than the aesthetic, this would have been more time consuming at this point and although it would definitely improve the user experience later down the line i needed to have something working first. I knew i would be starting to use software from scratch so keeping this simple so that the idea would come across to the user and i would be able to have a "playtest" to see if the design worked and to see if it had credibility. I also need to keep to what my acceptance criteria required.


For the final Prototype i used Framer, this was the first time i had used it and after about 20 minutes it became rather intuitive. It provided me with a very quick working prototype with plenty of scope to add more to the App and expanded on my idea. It was appealing to me as i could test the app as i was building it, this is very much like creating a game in Engine. Testing through play and the iteration through the designing and building of the app.

The video clip shows the working of the app with a short description. The prototype shows the functionality of the idea but i found there were some things that i couldn't do without scripted knowledge. Creating the profile setting for instance is a concept and would need further thought. This could have easily taken me down a whole other path.





You can try the app out using the link below.




Ravlani, K., 2017. 7 Tips For Writing Acceptance Criteria With Examples - Agile For Growth. [online] Scrum Certification Training and Agile Coaching. Available at: <https://agileforgrowth.com/blog/acceptance-criteria-checklist/#:~:text=When%20the%20product%20owner%20verifies,can%20be%20automated%20and%20executed.> [Accessed 9 October 2020].


Araz, C., 2018. Why You Should Ditch Your UX Definition, And Use This One Instead 👈. [online] Medium. Available at: <https://uxdesign.cc/we-have-lost-track-of-what-ux-actually-means-8d55259dacb0> [Accessed 9 October 2020].


Friis Dam, R., 2020. Prototyping: Learn Eight Common Methods And Best Practices. [online] The Interaction Design Foundation. Available at: <https://www.interaction-design.org/literature/article/prototyping-learn-eight-common-methods-and-best-practices> [Accessed 9 October 2020].

Comments


bottom of page