The final episode of the Sam and Tom Talkshow. This is session 5*.
We talk about prototyping, creating our final outcome and submission, user testing and recap some of the topics we have covered over the semester and how we felt about this project.
Aqua Utopia|海の底で記憶を紡ぐ
h
YOU ARE THE REASON

izzy's playlists!

No title available
let's talk about Bridgerton tea, my ask is open

Discoholic 🪩
he wasn't even looking at me and he found me
we're not kids anymore.
Game of Thrones Daily
Stranger Things

PR's Tumblrdome
almost home

Kiana Khansmith
Sweet Seals For You, Always
$LAYYYTER
Monterey Bay Aquarium

⁂
hello vonnie
I'd rather be in outer space 🛸

seen from Australia
seen from United States
seen from Argentina

seen from France
seen from Chile

seen from Chile

seen from Türkiye
seen from United States
seen from United States

seen from United States
seen from United States

seen from United States

seen from T1

seen from Australia
seen from United States

seen from United States

seen from United States

seen from Morocco
seen from South Africa

seen from United States
@sam-hunt-creativetech
The final episode of the Sam and Tom Talkshow. This is session 5*.
We talk about prototyping, creating our final outcome and submission, user testing and recap some of the topics we have covered over the semester and how we felt about this project.
Hey! The Sam & Tom Talk show episode 4 is out now! This episode was the first catch up after the break. We discussed mainly plans on developing UI and hosting our last workshop. The end of the episode is just a couple of sponsor name drops. You can ignore that part.
Sam & Tom: Session #3. In this episode, we discuss the second workshop, preparation for the two meetings next week with UoA and AUT, our new brand identity designs, our completed personas and other nonsense.
Sam & Tom: Session #2. In this episode, we discuss our recent workshop, some of the conversations we are having and finally our next steps for the coming week AND (good news for everyone but our project sponsor) we also confirm more pizza will be available for the next workshop session.
Sam & Tom: Week One
In this episode, we cover topic areas such as Our concept for this semester, the problem that this concept is focusing on, a workshop that we’re planning on running to explore the problem area and finally a tinder status update.
Featuring a poor edit, of an advertisement that doesn’t actually play. Oops
Project Management - Reflective
Reflective means after the date of submission - a reflection of the entire process.
I had taken the position of project manager at the start of the semester with the job of setting up what methodologies we are using to keep track and planning accordingly. I have to admit I did not do a good job this semester for this role. I kept putting off creating a board of tasks and it got out of hand pretty quick.
When I finally got round to setting up our workspace I decided to run with Microsoft teams. There are a few reasons as to why I chose this. Firstly, it seemed to be a cool platform to explore. Secondly, it integrated well with the university.
We could have conversations, store files and create tabs of external information all on the one page.
I think my favorite feature was the tabs and having the ability to project manage directly from them. This is extremely handy especially for the fact that I don’t need to remember 20 different websites for everything - it can be linked all in one place.
In retrospect, we should have utilized this more throughout the semester as opposed to the last few weeks of the semester. I feel as though our outcome could have been so much stronger and overpolished if time was managed correctly from day one.
Design Thinking and Studio - Reflective
For me, the two classes really lined up together very well. In Design Thinking Processes, we had the semester to go through each stage of the design process and utilize many tools to see where they can and cannot work.
Timetabling worked in my favor this semester with DESN in the morning and Studio in the afternoon. This allowed me to practice what we learned in DESN through Studio by implementing many of the tools and stages we had just learned that morning.
Using some of the tools that I hadn’t used before both improved my own knowledge of how and when to use these tools while also improving on our Studio idea and outcomes.
An example of some of the design thinking tools I utilized in Studio were:
Knowledge gathering, case studies and market research - This was EXTREMELY important in developing our final concept. Especially case studies on Snapchat and Eventbrite.
Empathy mapping for our users - How would they feel when using this app. What key points are we missing and what insights can we gain from this? We found many holes in the application originally which needed defining such as what is the reason people would want to use this compared to another app. What do we provide - this is where Memories was born.
Personas/POV - Creating possible users from all different backgrounds allowed us to determine where they could possibly lose interest or how one design decision targeted at one demographic could affect the rest of them in positive or negative ways and further, how we can manage this.
Unmet needs - What are our user's unmet needs. These were finding something to do right now, sharing experiences in real time (inviting friends to join them), automatic memories of what they have attended.
Lotus Blossom - when we had an idea which we wanted to implement but didn’t quite have the right approach for it, we would sit down and complete a lotus blossom of ideas to determine which one could be the most feasible.
Brainstorming
Throughout the semester we had two walls setup to keep references on a few things.
Most importantly:
- The current market
- Design trends
- Similar products
- Inspiration
- The pepsi brand guide (Our inspiration for a design book)
Each part of the wall was extremely important over the semester as it was fluid and always changing. We used string to draw our conclusions and make notes of things such as themes, things we like etc.
Unfortunately, I didn’t take many pictures during this process as it was always up in studio throughout the semester and so I cannot show a to-from of where it started to where it ended. However, I can talk about some key use cases and how it helped us make our decisions.
When we started out, Murphy already had an idea set in his mind. He wanted to create this event app and that was final. I took on the role of devil's advocate and questioned every assumption he made when it came to the application and the current market. This is what inspired me to create a “criminal” board - using string to track clues.
The biggest explorative point was that there were already apps that do things extremely similar to what we were trying to achieve - most notably Eventbrite. Drawing conclusions of a big physical wall were extremely beneficial as it was a constant reminder in the physical space and also it’s just more fun to deal with it hands-on as opposed to a virtual whiteboard.
Finding out just how similar so many services are we found ourselves hesitant to continue (basing it on) if we went to market we didn't have the users, the experience or the infrastructure.
Using this information and the board I had set up we pivoted the focus for our idea slightly - and also our approach. We were further refining our idea to sit within the context of social more clearly and less focus on future event finding and more focus on current event finding. Events that are happening right now - not in two days time.
To blend the social features of Snapchat, the ease of use of Uber and the event design layout of Eventbrite.
Yourtopia now has a solid framework and clear goals, we were aiming to blend social content creation in both digital and physical ways.
Our final outcome was also influenced by our setup - we decided to put up the Pepsi rebrand document onto the wall as an inspiration of one of our outcomes, creating a book. This book was going to have a few key ideas within it. Who we are, what our app is, how/why it was designed this way, the features of the app and where we plan to take this exploration next.
This idea was set from that point on and part of our submission was to have a cool little booklet of some sort showcasing this information.
Many of the design decisions (which are covered in other posts) were put up on the wall for a short period of time to compare and see how it stacks up against other designs and any major flaws that could be seen and the market research we had done. Visually comparing them on the wall allowed us to just stand up together, grab some string and pins and just note down what we see. Key findings and insights that we notice from seeing it placed around other apps.
New Trends - That’s us
Even though our brand aims to stand out from the crowd - we also cannot ignore trendy designs because frankly, they work. This new idea is to put the most important information at the bottom of the screen. Now there are a few reasons as to why this is a good idea - the biggest being the ease of access.
Steven Hoober conducted a survey which shows that 49% of people rely on their thumb for most of the work they do on their phone. https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Summary of how people hold and interact with mobile phones
A great case study is Youtube and their decision to have their main functionality available from the bottom of the screen as opposed to the top which we see typical of many apps.
I have also spoken to some of the guys in my team about it and they seem to also be interested in the new Apple cards design and the potential it brings. They are slightly concerned with how it is implemented however with them expressing concerns of how it can easily ruin a design as well.
Image of the new youtube design with the bottom navigation
I have started exploring how our design could implement this idea - and more importantly, would it benefit from it. Here are some rough sketches I have done to play around with the positioning of the components.
References:
https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/
https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f
http://www.androidpolice.com/2017/05/30/youtubes-new-bottom-navigation-ui-official/
https://medium.com/tall-west/lets-ditch-the-nav-bar-3692cb17cc67
[All Thumbs, Why Reach Navigation Should Replace the Navbar in iOS Design](https://medium.com/tall-west/lets-ditch-the-nav-bar-3692cb17cc67)
The Singularity - Semi Perm
The singularity is a term that was adopted and appropriated by Vernor Vinge to describe the point where technology reaches a point of such exponential growth that we can no longer use previous models of prediction to map the next steps/leaps in technology. (Vinge, Vernor, 1993).
Ray Kurzweil uses the term ‘the singularity’ in explaining the coming urgency to consider the effects of exponential changes in Artificial Intelligence, biotechnology, and nanotechnology. (Ray Kurzweil, 2005).
To me, and my project this semester the singularity is about when that change takes over, what will the future of content sharing and social media look like. When we have finally overcome the limitations of the current digital-only ways of sharing will we blend the two together. Creating phygital, a term Laurent explores in his recent paper “Beyond mobile AR, MR and VR, shall we start investigating about the phygital, a combination of physical and digital?” (Antonczak, L. 2017)
Semi-Permanent gave @bctadventure and I the chance to speak to some amazing influential people during the after party over some nibbles and drinks.
One of the questions that we couldn’t help but ask was their opinion on the singularity and their insights surrounding emerging technologies such as Mixed Realities, Augmented Intelligence and the possibility of Artificial Intelligence in the future.
Take a listen to a few of the answers we got during the event.
Afterwards, we had a one on one conversation with many of the speaker but the most notable were Sisel as she completely dismisses virtual reality (at least in its current state) however when asked about the singularity she had a few things to say.
She referred to Kaspero and how we are already in the midst of the singularity, granted we have a while to go, it has already begun. see https://www.youtube.com/watch?v=NJarxpYyoFI for more information on what this is about
She was overall mostly excited for what AI could do - but extremely not-excited for the highly likely event that humanity loses their own independence and don’t do things themselves.
Nicholas Kamuda: the sensory design director for Microsoft mixed realities has some really interesting views on the singularity. He is working towards allowing technology and physical spaces to exist at the same time. When asked about the singularity he refers to the AI singularity and mentioned how stupid AI is and how far away we would be from the singularity from that perspective.
Some of the questions we asked being answered during QnA with Nicholas: https://drive.google.com/file/d/0BwTwTb0EGf71THkyZEN4VDVySE0/view?usp=sharing
References:
Laurent Antonczak, Catherine Papett, Towards a Mobile Enhancement Of Glocal Heritage? (2017)
Vinge, Vernor. (1993). The Coming Technological Singularity.
Ray Kurzweil. 2005. The singularity is near: When humans transcend biology
Do I need to say anything? Life above the clouds just looks so amazing. See you there #travel #awards #govhack #fun #wellington #auckland #weekendaway #minibreak #notreallyiwasdoingmyassignmentintown
Back-end Development
Studio IV: 8/09/17
I have used both Azure and more recently a lot of AWS for all of my backend and infrastructure needs. There is something exciting in stepping out of a zone you are familiar with. For this project, we’re going to be trying out Google Cloud.
I haven’t been on this long but I have already managed to start up a basic server running Node.Js (our choice of backend). I now need to explore setting up a mongo db as Murphy wants to develop using mongo db.
Even though this interface is in fact Google - which is extremely familiar I have been struggling to navigate it as there is just so much information in front of me. It will just take a bit of getting used to their layout. I had the same issue with AWS when I first started with their product anyway.
Funnily enough, one thing I can’t find is how to stop the server which is costing me. brb going to find out how to stop this
AUT: Live
AUT: Live (for those who don’t know) is AUT’s “Biggest open day”. It’s where they open the doors to guests from anywhere and everywhere to come and check out some of the cool things we have going on. As well as this it allows prospective students to learn more about the courses and opportunities.
For me this year, it was greatly empowering and inspiring, but I'll get to this shortly.
I was up on level 11, the Colab level. Here I had a few jobs. Firstly, I was greeting everyone up to the floor and showing them their way to the room where the presentation was going to take place. Secondly, I would be finishing up the presentation by talking about my experiences at AUT and Colab and then finally giving everyone a tour of our floor and answering basically any question that could be asked was asked. Many of the repeat questions were around what this course can do for you and more information on how it works with having “Only two” exams.
It was an extremely inspiring feeling after speaking to everyone and then answering questions after the presentation that I have helped countless people decide where they potentially want to take their future and which course they will choose and apply for. I had people who ranged from no idea about the course through to those who are excited but just wanted to fill in those final gaps about the real experience in taking this course.
I was asked some really tough questions which really made me think. No person went without their question unanswered, however - whether it was by me or whether I referred them to the programme leader for those really tough questions that I really had no idea how to answer.
I really loved the present to all of the guests as well - it was such a fun experience and although the first session or two were a little bit iffy after that it seemed to go so smoothly and could see that I really connected with some of the guests. Heck, I had some people come up to me and say they’re so excited to start this course after hearing what I had to say.
This experience also allowed me to get to know the lecturers more outside of the classroom and really be engaged in a positive way.
Coming back earlier in the post I used the word job - which to a few people has a negative connotation attached to it but I highly disagree in this context. It was such a fun experience and given the chance I would do it again.Just the feeling that you have helped someone - especially with such a massive decision in their life - knowing that you have helped or made it slightly easier to make is a great feeling.
Accessible designs
Studio IV: 7/09/2017
Firstly, I must cover how colourblind may impact a user who is interacting with your project. The most common is red/green color blindness, where sufferers mix up all colors which have red or green as part of the colour.
Just imagine if this was in an application, say a button:
("Tips for Designing for Colorblind Users | Design Shack", 2017)
In the decisions to creating our styles, I have been referring to a great tool that eightshapes have created which allows you to test for accessibility in accordance to WCAG 2.0 requirements. This tests the contrasts between colours and their choices to determine whether they’re readable or not to those who may suffer from most vision impairments.
This is a living document on our server and I have attached a screenshot to this post to show how it looks. our color choices are strong with the bottom side of the grid being our backing colours and the above all text colours.
Furthermore, I have been playing with stark to quickly see how the design is looking to those who are colourblind to also see outside of the grid whether it’s easy enough to read or not.
I have attached an article in the references which outlines some of the important reasons as to why designing with colourblindness in mind is extremely important and how crucial it is to their experience using your product ("Why all designers need to understand color blindness", 2017). It’s amazing how easy it is to forget about how big of a difference it makes when designing something, I am guilty of this in many projects I do.
References:
Cat Noone, B. (2017). Stark Plugin for Sketch. Getstark.co. Retrieved 2 August 2017, from http://www.getstark.co/
How to design (in Sketch, Photoshop and Web) for color blind users. (2017). Medium. Retrieved 5 August 2017, from https://medium.com/sketch-app-sources/how-to-design-in-sketch-for-color-blind-users-2b189c0d58fe
Why all designers need to understand color blindness. (2017). 99designs Blog. Retrieved 9 July 2017, from https://99designs.com/blog/tips/designers-need-to-understand-color-blindness/
How to Design for Color Blindness. (2017). Usabilla Blog. Retrieved 6 September 2017, from http://blog.usabilla.com/how-to-design-for-color-blindness/
Tips for Designing for Colorblind Users | Design Shack. (2017). Designshack.net. Retrieved 7 September 2017, from https://designshack.net/articles/accessibility/tips-for-designing-for-colorblind-users/
A Seamless Workflow - Design/Dev
Studio IV: 7/09/2017
One important and unfortunately an easy problem to run into when first starting without planning is a good workflow - especially with getting design assets to the developer in a format they can work with. To solve for this, I have decided to incorporate all of my designs into Zeplin which is convenient for @murphy as he can simply copy and paste many style values directly into his code as it supports react native.
Why did I choose Zeplin for our project? Firstly it’s a tool I have worked with before and I am familiar with. At the point in time we are at and with the upcoming new tools, we’ll both have to learn it seems extremely counter productive to learn another tool.
Jumping into Zeplin:
To start, I have created a stylesheet page which currently has all of our colours and their names which make it easy to call and should ensure we don’t have 20 shades of the same colour. The beauty about this workflow - and the designs - is that everything has a variable set for the colour or text style, this is extremely important as this is our source of truth, if I change a colour in the design Murphy simply has to just pull that new update to the style file. Easy and painless (In theory). So far it seems to be working nicely, and Murphy is pleased that I have finally sent him some designs to start developing with as he feels he is ready to create our main UI pages. Exciting times ahead.
Not only does it have a style guide but it also allows Murphy to create my designs precisely and hands him all of the attributes he could possibly need to implement each component. On top of this, it supports react native just to add that nicer integration.
As you can see in the above screenshot it has the colours and attributes used in the object selected on the right inspector pane. Probably one of the other major features is the ability to add comments on the design - so if something confuses Murphy or I want to explain for example the type of animation to be used on a particular action we can explain these in the notes.
Colour Theory - The Meaning
17th August 2017
Refining the colour choices was a long and very thoughtful process as each colour must have a reason for being chosen - whether it represents one of our core values or moods Yourtopia should be representing. This led to a small description being written up to compliment the final colour palette.
You can see these descriptions in our render of our book. NOTE: These definitions are subject to change
For some reason my internet refuses to upload a readable resolution of this image - I will supply a readable version shortly
Colour Theory - Yourtopia
15th August 2017 - Backdate
Throughout this studio period, I have planned to create a design book which will hold all of the design decisions we made and where we came from. As a part of this, I have created our version of a colour palette. When sharing the design assets with @murphy we need to agree on a colour naming scheme so with this colour palette comes a name for each colour. The real goal is to make this unique and make the colours fun and exciting while all within the theme of the app we are creating. below is an image of our first draft version which I think will go mainly unchanged throughout the semester with the main changes being a reduction in the colours.
How did we get here though? Well, firstly I printed out an A3 document of some of the most popular websites colours as a reference. This was put up next to our exploration board on the wall which allowed us to see the most common colours - and rule them out. Part of this app is to stand out and choosing a colour such as blue will not make us stand out in the ecosystem of apps and social media platforms. See a previous post with an image of the research on colours in the market.
We cut out all of the colours that we were not happy with until we had shortlisted it to a few colour choices - around 10.
From here we spoke about what kind of vibe our app should portray. That is of excitement, fun and interest. From here I went away and cut this down to the current working document we have (the image at the top of this post)
This is the beginning of our colour theory
References used when designing (excluding case studies):
Colour Theory - A poster. (2017). Graf1x.com. Retrieved 5 August 2017, from http://graf1x.com/wp-content/uploads/2014/09/color-wheel-poster.jpg