RSS

Category Archives: Uncategorized

Uncharted 4: A Thief’s End Hey… are you happy with this life?

Uncharted 4: A Thief’s End Hey… are you happy with this life?

Nostalgia Lab

I love you. But this isn’t who I am.

Uncharted 4: A Thief’s End is generally valued for it’s technical, graphical, and cinematic achievements, as were the entries that preceded Nathan Drake’s final outing. I’m not going to talk about that. While that discussion truly deserves our attention, I want to focus on, and talk about a singular moment that occurs towards the start of the game, that doesn’t derive from any technical, graphical, or cinematic achievement. A moment that is truly left in the hands of the player. A moment that is remarkably rare, and I use that word in it’s every sense. I want to talk about why, in spite of everything it will be succeeded by, this moment stands out and serves as an anchor for understanding the human qualities and topics hidden throughout this interactive piece.

Let’s try to explain the context as swiftly as possible.

View original post 1,525 more words

 
1 Comment

Posted by on May 28, 2017 in Uncategorized

 

Post-Mortem – New Intelligence (Studio 3)

Over the past 12 weeks the team (Adam Crompton, Joshua Textor, Nicholas Staracek) and I have stepped through the entire process of creating a mobile app for New Intelligence. An app for their client base to have an opportunity to practice the things they’ve been taught. As a first time working with and creating an app for a real commercial client, it was far from perfect. From our perspective it’s not ideal, and from New Intelligence’s perspective it probably isn’t either. But I’m glad it didn’t run perfectly. Because it means we have SO much to improve on and to learn from in the process.

In twelve weeks, the expectations and scale of this undertaking + some other inherit tasks that followed were:

  • Learn to work with a commercial client.
  • Learn their content (of interview techniques).
  • Remember their content.
  • Practice their content.
  • Research serious games and how they can present information in meaningful ways.
  • Learn how to use their content effectively in way’s New Intelligence agreed with.
  • Create content.
  • Learn how to present their content in meaningful ways.
  • Implement content.
  • Collaborate with the commercial client.
  • Create a survey that asks content related questions in a meaningful way to the commercial client’s clients (end users) to gather a very broad (but oddly) specific answers.
  • Get results and analyse results from testing.
  • Implement changes based on survey and testing.
  • Learn how to do this (effectively) on a mobile device. + Orange
  • Learn how to deploy (effectively) to multiple types of device. + Orange
  • Get this on Android and IOS marketplace.
  • Documentation.
  • Actually make the app and all of the game development processes.
  • Still do university.
  • Do other university classes.
  • Not to mention more that I’ve overlooked or haven’t written down.

The orange are thing’s we’ve never done before.
The purple are thing’s we would most likely struggle with or are time-consuming.
There is a difference to me between scope and scale of a project. Scope being the app and it’s content (in this context), the scale being everything I mentioned above. Don’t get me wrong, I’m not complaining about what was asked of us. But with the aforementioned I think that for 12 weeks, the scale of this project was drastically over sized. Especially considering the quality I wanted this to be and taking into account the things that we had to learn in order to make this a reality. Not that any of this isn’t do-able, just not able to be perfected with the time-frame given.

Project Management Triangle 1.png

Project Management Triangle

We weren’t and aren’t getting paid for our work on this. The “scope” for this project is “scale” instead, and time is the 12 weeks.

NI Project Management Triangle.PNG

The red is where I believe the points on the scale are relative to cost, scope and time. The black is a guesstimate of where the average point of them are. The blue is where I’d wanted it to be (cost irrelevant). But as the next picture describes, the area that the point would end in, doesn’t exist.

Quality Triangle

There is no hybrid of all three, it’s always 2/3


What went right.

Communication between designers.

Throughout the 12 weeks of development of the New Intelligence app all of us designers (in my opinion) could not have communicated better. Whether it was over discord voice chat, leaving messages in specific New Intelligence related discord channels, updating documentation, emails or collaborating in the work space, there were no gaps.

Why?

For a number of reasons, one of which is having very specific work times where we were all in a collaborative work space – University. Enabling to communicate in the most meaningful of ways, face to face for a decent amount of time. Another reason, but also still as important, because we all care about what we’re doing to actively pursue every necessary opportunity to push forward to the best possible outcome. I’d also like to believe it’s because we all enjoy communicating with each other, whether it’s about the project at hand or every day chatter.

What would we continue to do next time?

Continue to separate work related communication channels from anywhere that can have distractions. Don’t have personal conversations within work channels and vice versa. Don’t have work conversations in social media platforms where cat videos can easily get the better of you. This is one of the first project’s where we had very specific channels that only the New Intelligence game development crew had access to. Keep the conversation to work related only, and only give access to those who are on the project with you. Voice chat > text chat always. Face to face > voice chat > text (if possible).


Design and Concepting.

The New Intelligence app wouldn’t be what it is if there wasn’t dedicated time set aside to figure out what it is and to concept how to use content effectively. Here’s a blog I wrote about it.

Why?

Going back to the roots of rapid concepting and rapid paper prototyping was a big contributor to this. Pumping ideas out on pieces of paper that allows us to move on and do this over and over to get a collection of ideas but then to also have a physical pile of ideas that we can reflect on.

What would we continue to do next time?

Do the same as mentioned in the blog. Design concept, Paper concept, paper prototype. Don’t just dive straight into unity. Dive into unity when you have something worth prototyping. Don’t build from scratch and fumble in the dark.
Also: USE A GIANT WHITEBOARD OF A WALL. I can’t stress how useful it is to have giant wall to draw on. Big enough for a few people to all draw at once. It’s like having a physical 3ds Max, Unity, Source Tree, Google drive, Paint, where everyone can sculpt pathways and plant trees. Take photos of it, put it in a shared google drive for everyone to reflect on.


New Intelligence received and app.

They got an app. We Delivered. Although it might not be to the original scale that was expected of the team, the project was still delivered, and in the form of an app.

Why?

We followed a project schedule and a project plan. I wrote about project methodology in this blog here, which helps define that this project plan was in no way linear. It was incredibly hard to account for the amount of possible changes or challenges to occur, although I’m sure this is just called game development. The reason why we were still able to push through was because of this project schedule and project plan. That and treating this as a real job. You don’t go to work to not work right? Well at least in my mind I go to work, to work. This opportunity had importance and outcomes, the team and I treated it accordingly.

What would we continue to do next time?

Continue to have project methodology. Know it, understand it, plan it, document it and use it. Have a project manager to enforce project schedule and project plan.


What went wrong.

GDD Documentation for programmers.

This is the most critical thing that went wrong with the project. Although the designers and I were pretty on top of the documentation, there was one flaw within the GDD. We had documented for 1 of the 3 types of question types. The functionality of the question type and how it operates within the app, how user’s interact with questions to achieve the desired effect. The three different question types each had different functionality. Because they had different functionality they needed to be presented in different ways. There were different amounts of information that needed to be presented in different sizes and places. Somehow in production it was decided that we we’re procedurally generating questions. I think we were trying to go for procedurally generated UI is so that the system would be infinitely expandable and it’s just self handling. That would have been fine if we had the time to do so. In this instance I don’t think we did.

We spent 3 weeks waiting on programmers for the system to have been created to procedurally generate UI and questions and all of the bits and bobs so we could start pumping content in and for it to self handle. In those three weeks us designers were doing other things, it wasn’t just 3 weeks of downtime. But we (kind of) hadn’t even opened up Unity until this point. It came to the point where the programmers said “Yup this is ready for you to do what you need to, here’s how it works, aaaaaand Go”.

Because there was so many different types of answers, and sized answers and structured answers with ever-changing amounts of text and the location, how the programmers handled it worked but it wasn’t user-friendly at all. It wasn’t easily decipherable or customisable. We couldn’t put any of the content in the app and have it user-friendly, in the right location, size. Every UI panel was different and we couldn’t possibly procedurally generate everything we needed and have it formatted, sized and placed properly in order to be coherent. I’m not saying it can’t be done. It just couldn’t be done to the level of expertise we needed it to in the time frame given. The solution was a hybrid of the designers manually constructing UI panels and attaching correct functionality to where it was needed. Then for those panels to be instantiated under the appropriate conditions of activity and exercise. It’s a lot more manual labour, which is what we were trying to avoid. But it was a necessary evil in order to get where we needed to be.

Why?

There were gaps in the GDD. There were gaps in the GDD because in the entire development process, it got a bit messy, focus changed and some things got left behind, some things got lost. This comes down having such a large-scale project in such a short time frame. Part of this was also because there’s so many different new things we were trying to learn how to do at once distracted us from the things we already knew how and what we should do. This isn’t an excuse but rather a point to reflect on that lack of experience with so many areas affected part of this project.

What would we do next time?

In the project schedule have a specific iteration time for documentation. I can’t specifically state where in the timeline that this went awry. I can’t and won’t point fingers, but if this process was implemented and every member on the team went and did iterated over documentation weekly I’d like to think that there’s a strong change that this could have been of less impact. Isolate specific areas that we don’t know how or what to do, gather and practice knowledge that allows us to not fumble in the dark.


Writing a questionnaire.

We ended up spending almost a whole week trying concepting and coming up with very open questions that aren’t very specific but oddly evoke a very specific answer that we can extract an array of information from. It was dragged out a little longer than what it could have but this was going directly into the end users hands after it went through NI. The downfall was that the questionnaire never got sent out. So we never got any answers back that would have helped inform the design of this app.

Why?

This is completely out of our control. New Intelligence had the list of their clientele, and for confidentiality reasons we did not, nor would we or could we gain access to it.

What would we do next time?

Email New Intelligence so frequently asking them to send the survey to the point where they get so annoyed that they actually send it just to shut us up.


Some other side notes.

Intertwining two projects into the same repository.

This wasn’t terrible, but having so many members and not so many scenes we wanted to avoid conflicts with merges, Designers had 1 project, programmers had another. It was in the same repository (repo). Because the programmer repo was where all of the magic was happening and I/we weren’t exactly familiar with the layout of their project/hierarchy. The ‘designer’ repo that I set up for the designers to use was where all of our work went. I guess it was basically me just testing different things out as a ui designer, getting a feel for what the app could possibly look and feel like / layout etc. And by no means did I think this was going to be the repo that the app was getting built from. I was dabbling and implementing different ideas in my own time to test things out before production on the app actually started. By the time production actually started it was inside of the programmer repo. The ground work that I had done before was still good content and was going to be transferred into the programmer repo. The designer project wasn’t a complete app, but had the foundations and templates of how the app could/might work/look. It came to a point where we transferred the current progress of the designer project into the programmer project. We ended up importing individual prefabs of activities from the designer project into the programmer project. Packaged it and put it into the programmer repo.


UI.

There was a few problems with UI scaling and when the panels got instantiated the entire panel didn’t scale or position correctly on different devices. A large portion of this was from having prefabs that we exported through packages (from the designer project) with specific anchoring points/stretch position etc. Because there were so many people working on this project. In source tree somewhere every time the prefab was overwritten to correct the prefab and or the ones in the scene, somehow they were getting overwritten. It was a never-ending loop of tracking down an anchoring position for a while in a meta file or something rather? Luckily, eventually a source tree wizard was able to track it down and we halted production on all the prefabs, deleted old ones from the projects and refreshed to only have the up to date ones and push those.


UI Design.

On this project I was the lead UI designer. Learning specific things from – Steve Krug’s: Don’t Make Me Think.

Having specific buttons always in the same location. Easily Navigable. Make things that need to be pressed “Buttons” look like they can be pressed. Make things that don’t need to be pressed look like they don’t need to be or can’t be. Headings, always let the user know where they are. Tell them, show them how to complete activities and how to play. [I’ll link to a blog post here about the things that I’ve learnt and the traits that I’ve carried over and implemented].


Working with a client.

It was daunting but also thrilling to work with a commercial client. Getting to meet real people who work for a real company that have sought our area of expertise to help them achieve a desired output is a real confidence booster. Having those initial meetings where we lay the foundations and approach the scope of the project is something that I look forward to doing again in the future. It’s so unfamiliar yet so intriguing. Then to go on and go through their interview technique training course made it surreal. They’re actually investing in us with their time. In this case we didn’t get paid, but they spent money and didn’t ‘make’ money to provide the training that they did. We walk away with that knowledge and also had the opportunity to work with a real commercial client whilst we were still university students. Ultimately there wasn’t as much contact with New Intelligence that would have liked to have, but it’s still one part of the spectrum on how contract work can go. When we did have contact, they were always more than supportive and invested in what we were all trying to achieve. They had opinions and expertise and they weren’t afraid to express it, but did so in a professional manner.


Designing for content to go into an excel spreadsheet.

The back-end systems were being designed by the programmers. We were to design content and put it in very specific ways in an excel spreadsheet that they would be able to do their wizardry on and sift it back into unity. The point of this was so that if we ever needed to extend or change content we wouldn’t (or if other people worked on it, they wouldn’t) have to sift through different parts of unity to try to find where it needed to be changed. It would all be within very specific areas of documentation. It also aimed to be self handling so in the long run it’s a lot less manual labour.

XML

Adding content into an excel spreadsheet and formatting it appropriately for the programmers to export into an XML spreadsheet and read into through Unity.


Opening Unity a little earlier.

I wish we Opened unity earlier as a team, and got to fiddle with different aspects sooner. Such as UI layouts and starting to discover all of the fires we’d come across later in mobile development because there was quite a large portion of this project that we had never done before. Testing out reading specific elements from the XML and being able to format it right and position it right. Understand that there’s so many differently sized information that a one size shoe wouldn’t fit all. But how could we possibly have known that we needed to open Unity earlier instead of honing in on the design concept? It’s like a double-sided sword. Open Unity too early and design suffers. Open Unity too late and the fires have already been burning. Wasting the week waiting on the questionnaire could have been used more effectively. But again, how were we to know? This project has ended from being solely on us to complete in 12 weeks to – hopefully – a bit longer of a project that others might get to pick up on and continue with. Or New Intelligence might want to keep pursuing this with us at another time? Who knows what the future holds.


Stepping Down.

This is one of the first projects where I’ve stood down from being the point of contact for the other disciplines and also stepped down as project manager. I explain the project management side of things in [this blog].

But as for being the external talent liaison, Art and audio was Nic S, Programming liaison was Josh. There were times of conflict that the programmers were literally in the next room and that it was much easier for me to go and discuss what I needed to than relay it to Josh to then walk next door to do the exact same thing. But one of the problems was that because josh had been the point of contact between the programmers and the rest of the group he ultimately had all of the knowledge on what was going down. And I didn’t. What I thought ‘must’ be right and the right way to do it wasn’t necessarily the case. So stepping away and respecting the fact that he was the liaison was something I actively had to remind myself of.


Stepping Away.

This is one of the first projects that I’ve actually had some pretty heavy personal issues come up that effected my ability to ‘do life’ among other things. Heavy enough that I dropped off the face of the earth for over two weeks. I never said anything to my team mates (and I’m sorry for that), but at the same time without me needing to say anything they were able to pick up on the fact that I needed space and continued to power on without me. While the approach that I took wasn’t the best, because sending a message isn’t that hard at all, It’s important to take away that in a team like ours woven so tight together, If one thread comes loose the entire weave doesn’t fall apart. Foundations and frameworks had been built for the project and as people who allowed the team to follow through on what needed to be done. I like to think that I’m a team player and contribute the best I can so walking away isn’t something I’m particularly familiar with. I’ve been told that sometimes maybe I need to ease off a bit and spend a little bit less time working and a little bit more time for myself before I burn out. This was one of the only times that I’ve barely been able to function as a human being, and I apologise if this is a bit personal for a game development blog (and this isn’t exactly something I’m comfortable with leaving sitting on the internet for public consumption), but I’m leading to a point. I’ve always been so worried about spending time away from part of my career journey because I’m pursuing something that I love and I’m contributing to something that’s part of a larger picture. But in times where we can’t possibly ‘human’, how can we even think about work? We don’t. We shouldn’t.

We need to take care of ourselves before all else.

Balance. The world keeps going. If the frame of the picture you’re in, doesn’t put your well-being as the most important pixel, you worry about you and do what you need to do to be right. I’m writing this in the post-mortem because these wise words have been spoken to me, and I’m speaking them to you. That, and also so when the time comes that I’m sifting through this blog in a few years time I can reflect on this moment and know that I made it through and so did the project.

If you wish to read any of the other post-mortems from any of the other designers:

Adam: Post-mortem.
Josh: Post-mortem.
Nic S: Post-mortem.

Until next time –

Nic

 
2 Comments

Posted by on May 5, 2017 in Uncategorized

 

Studio 3 – The Past 13 Weeks

Studio 3 and I made/worked on an app for a commercial client – New Intelligence.

AppIcon


I wrote a few blogs on the things I did:

https://feenikxfire.wordpress.com/2017/02/07/new-intelligence-a-new-chapter/
https://feenikxfire.wordpress.com/2017/02/12/serious-game-the-presentation-of-information/
https://feenikxfire.wordpress.com/2017/03/13/freedom-through-a-lens-ui-part-1-main-menu-camera-flash-effect/
https://feenikxfire.wordpress.com/2017/03/15/freedom-through-a-lens-ui-part-2-selecting-photographs/
https://feenikxfire.wordpress.com/2017/03/20/the-choices-within-my-friend-game-design-ethics/
https://feenikxfire.wordpress.com/2017/03/23/new-intelligence-tools-paper-prototyping/
https://feenikxfire.wordpress.com/2017/03/31/new-intelligence-project-methodology/
https://feenikxfire.wordpress.com/2017/05/05/post-mortem-new-intelligence-studio-3/


I made a game with Nicholas Staracek – called Freedom Through A Lens.
(Programmed and did UI)

FTAL Itchio.PNG

Which got featured on four sites!

GameJamCurator

WarpDoor

NewNormative

FreeGamePlanet


I prototyped a menu where all of the UI elements are physical objects. And this menu aims to eliminate load screens and down time with player interaction, never removing the player from the game.


I watched and took some notes on Anisa Sanusi’s GDC talk on Dark Patterns:


Started to read through a Usability through motion manifesto.

View story at Medium.com


I worked on a controller based button pressed UI with some juice and random fill origin, method, rotation with some shake.


I Read a book on UI design:.


I made a Turntable UI that works with 3d or 2d elements. Created animations in unity.


I recreated the functionality and part of the aesthetic that Dirt: Showdown uses for their menu.


I converted some GUI (Unity 4) from a paid asset into Unity 5.+ UI and condensed it to not use so much screen space.


 

Got trained in Interview Techniques from New Intelligence to know the content in order to make the app for them.

 

Until next time –

Nic

 
Leave a comment

Posted by on May 4, 2017 in Uncategorized

 

How Can I Be A Commercial Game Dev Other Than Selling A Game?

I am (and my team mates/friends also) are nearing the end of our studies and we have to consider all of the ways game development exists in a commercial market other than make a game and sell it. In our recent journey through studio 3 and working with New Intelligence we were following one of those alternate paths than ‘make a game & sell it’.

We’ve been introduced to a Business Model Canvas.

Business Model Canvas.gif

A Business Model Canvas


I’d love the possibility to continue doing contract work as a UI/UX Designer. So what steps would I take to set up my own business model canvas if I was to pursue this line of work?

1. Customer Segments

Who are my clients? Anyone who has UI or UX. Sure, but more specifically what is the client’s audience? How large of a project am I taking on and whats the time frame they need it in? I’d like to start off on very small scoped projects and as my skills and confidence and contract work experience grow and solidify, expand the horizons and start to join larger teams and projects. Starting with any of the connections I’ve made in university, then onto any of the internet’s very small-sized games who require the assistance of a UI designer. Slowly building the confidence (with possibilities) to move onto to larger games that reach a larger audience.

To me, my goal isn’t to work on large-scale games for the purpose that those games reach more people and more people get to see my work. Sure that’s cool and all, but the goal is to work on a game where my skill set is required, trusted and effectively utilized enough to accomplish the goals that game sets out to achieve. The larger the audience the larger the scale for scrutiny. The goal to work towards larger projects is to push myself as a designer, to constantly be getting better.

2. Value Propositions

What do I bring to the table?

  • To deliver content that achieves its intended experience.
  • To not make users think about what they have to do.
  • To make UI
    • Useful
    • Learnable
    • Memorable
    • Effective
    • Efficient
    • Desirable
    • Delightful

3. Channels

Now that we know who our customers are, and what we are offering, we need to think about how we are going to find customers and what the best channels for doing so is. We found a process that outlines how we would go about finding clients, listed below.

  1. Explore our existing connections.
  2. Reach out and make new ones.
  3. Self advertise on social media, kickstarter, exhibitions
  4. Setting up a meeting to sign contracts and further pitch our service and support. Define handover and future support. Platform updates?
  5. Ongoing consultations as develop the final product.
  6. Ongoing support/updates.

4. Customer Relationships

What type of relationship does each of our customer segment expect us to establish or maintain?

  1. Initial point of contact with our customers, whether it’s online or in person.
  2. Show existing work, or current work in progress.
  3. If spiked interest put together a Concept to give a preview of what we could offer them. Depending on my experience with UI/UX design and the scale of the potential work load, this could be paid work. Paid concept work is a small cost to see potential and still low risk. Phrasing it as ‘and then you don’t have to pay anymore if you don’t feel it’s going the right direction’ would be helpful.
  4. After a green light with the concept, would get a contract signed and move forward into development.
  5. After handover we would have an ongoing relationship. This will vary largely depending on the contract signed and the amount of support/updates needed post handover. This would include setting up lines of communication that won’t go out of action.

5. Revenue Stream

From what sources and how am I going to get revenue?

Concept development – offering this service for free would be too much of a gamble if they didn’t choose to pursue my services afterwords. It’d be like asking a tattoo parlour to tattooist to draft a tattoo for free, then doing it and the customer walking away saying no thanks. It’s a waste of time especially if it’s repetitive. The small amount of money for these individuals or teams shouldn’t matter. And if it does then they probably aren’t seriously interested anyway or willing to invest.

What about content delivery?
This again comes down to the scope of the project or the workload I’m taking on. If it’s a rather large project and for risk management sake, there would be milestones set and payments to be received in order to continue work. This allows them to pull out of the project at any of these milestones and we are still payed for our work. I’d also compare this to what others in the team are getting paid and the amount of work that is asked of me in what time frame.

6. Key Resources

What are some of the resources that this project and business model would need?

  • Software and a place to work. Whether this is at home, while travelling, in a collaborative work space or even in my own work space. Which software I’m using and is there any upfront costs or costs to be accounted for?
  • A list of production costs.
  • Intellectual rights on their work and mine. Agree on who owns what.
  • Human resources – in this case at this current point I or my client might have to outsource art – because art is not my strong point.

7. Key Activities

What are the core activities that I will be undertaking?

  • Content Design – Concept development, what I bring to the table.
  • Content Creation – Create the content.
  • Content Implementation – Implement the content to be usable.
  • UI/UX advice – guide the client and justify reasoning for my choices through experience in this field of expertise.
  • Content Refinement – Make it the best it can be.
  • Content Polish – Make it super juicy or clean and delightful to use or see.
  • Relationship Maintenance – Continue to collaborate and keep contact with client.
  • Delivery – Present content to the client.
  • Support and Updates – ongoing support.

8. Key Partners

These are the key people/companies I could be working with

  • The client – ultimately they’re the ones I’m designing for.
  • Game Designers
  • Game Developers
  • Indie Developers
  • Indie Studios
  • Studios
  • Large Studios
  • Artists
  • Programmers
  • Platform Owners – Unity, Unreal, 3DS max, Blender, AI, Photoshop, Windows, SourceTree, Github, ETC.
  • Customers – the people actually using the product
  • Bank – If I need financial support.

9. Cost Structure

What are the costs to consider while doing this line of work?

  • Living costs
    • Location
    • Vehicle
    • Food
    • Water
    • Internet
  • Travel costs, accommodation.
  • Face to face meetings – wine and dine, self living costs.
  • Equipment and software – platform, licensing, work space.
  • Marketing – website costs.
  • Salaries.
  • Legal costs.

While this is a very general business model plan, it’s hard to be to specific at the moment with so many variables. This isn’t a comprehensive list of all of the things that could possibly go under these headings, because that would make for an extremely long read, plus I think there are people who actually teach this type of thing to a professional capacity.

Until next time –

Nic

Bibliography

Image and Video

Business Model Canvas Osterwalder, A. (2013). A Better Way to Think About Your Business Model. Harvard Business Review. Retrieved from https://hbr.org/2013/05/a-better-way-to-think-about-yo

 
Leave a comment

Posted by on May 3, 2017 in Uncategorized

 

New Intelligence App – !Play Testing

We had the original timeline of having an alpha by week 7 and a beta by week 8. Week 8 is when we were going to send out beta builds to New Intelligence’s client base (our end users) and start to gather analytics and improve the apps usability based on feedback. But unfortunately this never occurred, not even a little bit later.

There were some forms of play testing though while we were in the paper prototype phase. At some point the team and I were at a point where we were in between transitioning from marvel app to unity. In this transition I had already prototyped some menu stuff to get a feel for what it could look and feel like. This was much different to the menu stuff that we had within Marvelapp. During this transition, each of the team selected a section of the app that they’d prepared and paper prototyped (on post-it notes) each possible screen that a user interaction could lead to. It wasn’t assessing the testers knowledge of the app or assessing them at all. It was solely to asses the apps usability and how people interacted with it, to watch what they thought they could interact with.

New Intelligence with mid circle

Sorry for not having photos of the paper prototypes, they must have gotten lost in the fires. One of the most prominent issues was originally when I made the PROSPECT model unfold in a circular motion, I had a middle circle there to help me position the exact location of where the PROSPECT letters would sit. It didn’t look terrible and it didn’t look not (!)terrible. But every user that tested the paper prototype at one point or another tapped on that centre circle. It did nothing, and after watching every user tap on it made me realize it’s just a distraction and the PROSPECT model doesn’t need a center hub to rotate around,


There was also the point in time that we were far enough in the design process and marvelapp that we had a scheduled Skype meeting with NI. The Skype meeting was to give them a build of the marvelapp that they can run on their phone and to play test it. Marvelapp didn’t allow us to have the functionality that we wanted of the UI at all but allowed us to get a feel for layout, spacing and transitions. The skype meeting with NI allowed us to not only present what we had so far but gave them the opportunity to critique what they liked and didn’t like. But at the same time, run through the application with them and watch how they used it.

In the case that we would have been able to gather analytics on alpha and or beta builds it would have been awesome to gather:

  • How long each user spent on each question.
  • The frequency of which answers were chosen.
  • The percentage of which users got answers right and wrong.
  • How long they spent looking at feedback screens.

Seeing how long each user spent on each question might not give very specific information but would allow us to identify an average completion time and understand which questions are more time-consuming or difficult to answer.

The frequency would allow us to detect what users think the more obvious answers are or which they think are the correct answer.

The percentage of right and wrong would help us to determine if the way the question is being presented is too difficult or too easy. Or the users are having difficulty finding right answers, enabling us to iterate on design and aim to not just test retention but reform questions in ways that still do as intended but in a more decipherable way.

Detecting how long they spent on the feedback screens (in comparison to how many times they’ve completed that question) would be the most intriguing in my opinion. If the users spent a lot of time on the feedback screens (I’d hope) it’s because they’re actually reading the reasons of why the answers were right or wrong. If they’re practically skipping it, did they do it by accident or do they just not care? Because if they don’t care, this app is pointless. The point of the app is to give opportunities to those who have gone through New Intelligence’s training course and practice those skills whilst outside of work times. If they don’t care about the app, do they care about the training they’ve taken? Or will they even put it to use?

Until next time –

Nic

 

 
Leave a comment

Posted by on May 2, 2017 in Uncategorized

 

UI Choice Design and Application

Tips and Tricks from Steve Krug’s: Don’t Make Me Think

I aspire to become a UI/UX Designer, among other things. This recent project of making a mobile app for New Intelligence where the entire game is essentially UI, would make a great opportunity to learn important theory and application for good UI right?

Steve Krug Dont make me think

Unfortunately I didn’t get to finish the entire book (as of yet), but there are still very important insights that I’ve taken away. Steve says at the start of the book that a lot of what he talks about isn’t going to blow your mind, in fact you probably already know a lot of it. I find that he phrases and presents this already found knowledge in very meaningful ways that really sends it home and makes it blatantly obvious. Like looking at every day things that we see and then getting a microscope and seeing things in a different light. And while this book was originally about Web, it’s been adapted for mobile as well, but can still transfer the principles to general UI design.

A few notes.

The number 1 rule, which is also the title of the book “Don’t make me think”. Making a page self-evident is like a store with good lighting, or in this case, good level design with good lighting, guiding users. And a prime example of this, was recently when I started to play Black Desert Online. There’s no tutorial on the UI, and with the amount it shoves in your face, it needs one. You get dropped in the deep end and start drowning. Well that was my experience anyway. And this is coming from a veteran of World Of Warcraft. The UI is same-same but different. Same conventions, but BDO has a little bit more complexity and depth.

I don’t expect you to watch this video, just mute the audio and have a flick through to get a feel for the amount it shoves in your face. And by no means does this video cover it all. My point is though, Black Desert Online, even though using general conventions, had so much complexity and wasn’t easy to decipher, it was constantly making me think. To the point where I was actually getting frustrated. To the point where I stopped playing. Call me crazy, shake your head and tell me that doesn’t happen, but it does. I’ve installed countless apps where I’ve done the same because of bad UI design. It leads (but does not always) to bad user experience. And as Steve says “If there’s good navigation, users have a good impression and start to trust”.

  • Don’t re-invent the wheel! Use Conventions – It’s a risk vs reward type scenario.
  • We parse visual hierarchies so fast. We only recognise that we do it when we can’t do it.
  • Work most magic at a glance, most people spend less time looking at it than we think.
  • People rely on cursor change to tell whats clickable.
  • Highlight where we are in navigation – in tabs too.Tab hightlight
  • Avoid wall of words.
  • Design for scanning – not reading.
  • Take advantages of conventions.
  • Create effective Visual Hierarchies.
  • Break up pages into clearly defined areas.
  • Make it obvious what’s clickable.
  • Eliminate distractions.
  • Format content to support scanning.
  • Every page needs a name.
  • More importance = more prominence.
  • Prominence, grouping, nesting.
  • Consistency – BUT – CLARITY trumps consistency.

Usability

  • Useful – Does it do something people need done?
  • Learnable – Can people figure it out and know how to use it?
  • Memorable – Do they have to relearn it each time they use it?
  • Effective – Does it get the job done?
  • Efficient – Does it do it with a reasonable amount of time and effort?
  • Desirable – Do people want it?
  • Delightful – Is using it enjoyable or even fun?

Trunk Test

A simple test to perform on web sites, possibly within games or apps.

  • What site is this?
  • What page am I on?
  • What are the major sections of this site?
  • What are my local navigation options?
  • Where am I on this page?
  • How can I search?

Application
New Intelligence 1

The main screen is comprised of a minimal amount of things. The title of the game/company name. The game doesn’t actually have a name, it’s just called the ‘New Intelligence App’. Because like Krug says, every page needs a name and the more importance the more prominence. Although it is the newIntelligence logo, it’s a branding thing, this is the app for their company, plus it tells you what app you’re in. Originally there was a screen before this that had the NI logo and a button that said start which would bring you to this screen. It was removed because – when a user opens the app, we don’t need them to ‘start’ the game, they just opened the app, they’ve already started. Having the start panel/page there is a needless and time-wasting interaction and it didn’t add anything to the game.

It also has nested among it a picture of a ‘head shot icon / profile’, rather than the word ‘profile’. Which can be conventionally identified to have the functionality of a profile and the details in which it may contain user specific information. When it comes to scanning, not only does the icon take up much less valuable screen space, it can be condensed to a very precise location that works within the limitations of the banner space and more hastily and easily identified. Scaling text large enough so it’s legible but to fit within that small amount of space would clutter the banner and detract from the prominence of other elements. Scaling the text too small so it doesn’t clutter the rest of the banner and still works to the prominence and grouping conventions, but makes the word illegible.

The last element on the screen is rounded PROSPECT model that unfolds each time a user enters this panel. Each of the prospect model letters are a button that navigates into the appropriate panel. “Transformation is the most discernible, largely because it stands out. A ‘submit’ button changing shape to become a radial progress bar and finally changing shape again to become a confirmation check mark is something that we notice. It grabs our attention, tells a story, and has completion” (Willenskomer, n.d.). The intent behind having the PROSPECT model unfold is to grab attention and make users want to interact with it.

Clock
How do we read? From left to right. How do analog clocks display the time? The PROSPECT model unfolds from left to right, so as conventions have already taught – not to mention in the ways that the letters unfold, users should already understand how to read this transformation. I’ve they’re using the app, they’ve also already undergone training with New Intelligence and understand what the PROSPECT Model  is. Although they are only circles with letters in them, nothing up until this point has led users to understand that these letters could be pressed. Among only having the game title and a profile picture, there’s not much else to draw attention, at this point everything could look like it can it pressed, everything could look like it can’t.

The only difference between the letters of the prospect model and the profile icon (which are the only interactable elements on this panel) is that the profile icon doesn’t have a backing image to keep it consistent with the conventions of what other interactable elements are in the game. The reasoning behind that was because as I mention in my post-mortem, I had to step away from this project for a time and someone else took the reins of lead UI designer (Josh). I’ve asked Josh and his reasoning was he was doing less outlines in general. He updated all of the conventional banner buttons (home, back, exit activity, profile) to be just the necessary icon. The touch zones are larger than the icons to allow a larger space for touch functionality. He said it just seemed like unnecessary contrast when we already have the white bar and it allowed the icons on the buttons to be bigger.


New Intelligence 2

When inside of any part of the PROSPECT model, the colour of the background is the same as the letter. Although it’s a straight panel swap because time didn’t allow for super juice, I think this is a fantastic and easy way to identify where the user is within the app due to recent selection. It eliminates the need for a title “YOU ARE HERE” and the colour contrast works really well. If we had more time, it would have been really nice to be able to transition between those panels through watching the PROSPECT model button’s colour fill the screen and the elements transition in and out where needed.

But much like the last screen, not much has changed. There are buttons to choose from to take the user into an exercise, and the profile button is still in the top right. In face that profile button’s location never changes and is always there. Consistency and clarity. Wherever the user is in the app, in the top left of the screen (or the left side of the banner) is a button that takes them to the previous panel. Like the back button for and internet browser (the most used button). Except within the app the icon changes according to where the user is. If in an activity like the photo above, it’s a home icon to represent going back to the home page. If the user is in an exercise like the next photo it’s an X icon to represent exiting that exercise. The functionality remains the same but the visual distinction is different because it has different consequences within each panel. And the icon’s are easily recognisable to reduce the amount users have to think.


New Intelligence 3

This is one of the different types of exercises within one area of the PROSPECT model. In each activity the banner has an exercise text to instruct on what the aim of this activity is. Underneath that is how to users are to interact with whats presented in order to complete the exercise. In this exercise there’s a blue line to separate where the answering zone is, and where the options are to make the answer. Answer zone is always on top, answer options always on bottom, and this is a convention carried through the app, with the exception of some special case exercises that can’t use this convention. The answer slots are greyed out the same shape as the answers.

Unlike in Duolingo like I mention [here], we’ve made sure that the first word of each sentence isn’t capitalized to reveal which answer it is.

And without describing every single process we’ve gone through to construct the UI in this New Intelligence app, I think that’ll suffice on some of the techniques I’ve learnt and the application in this app. These are very strong foundations and I plan to keep using these in future projects.

Thank you for reading, and I hope that some of the things I’ve discussed or learnt to help me in my journey also help you.

Until next time –

Nic


Bibliography

Willenskomer, I. Creating Usability with Motion: The UX in Motion Manifesto. Medium. Retrieved from https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

 
Leave a comment

Posted by on May 1, 2017 in Uncategorized

 

New Intelligence: Tools & Paper Prototyping

IMG_3019.JPG

The gang of designers

Over the last few weeks the design team and I have been exploring different areas and tools to help us in the process of creating the serious game for New Intelligence. After we’d done the training course and analyzed a few different types of games and how they present information we came together and found the commonalities between what NI thought needed the most attention and what we thought needed attention. One of the tools that has actually been extremely handy to have is a giant whiteboard (which is the size of a wall) to quickly dump a large sum and variation of information.

IMG_2964After we identified the commonalities we all ended up having a half hour rapid brainstorm session. The brainstorm session was to jot down as many different ideas that we could, that was the summation of all of the content we had learnt and what needed to be in the app but in-game form. This was the time to start transferring all of this knowledge into activities that can played/used by players in the app. We wrote down our ideas on post-it notes. Post-it notes worked really well for a few reasons.

  • They work well in a collaborative work space. You can all end up putting them in a specific area within a room like a pin board for everyone to see while brainstorming and afterwards.
  • They limit the amount of information you can put on one, so it ends up being a more condensed version and somewhat easily decipherable by others.
  • Because they limit the amount of information it means there’s less time spent sitting on a single idea, it almost forces you to push onto another.
  • It makes you constantly move to put the post-it note onto the ‘pin board’. Makes you stimulate body and mind. I find that this gets all kinds of creative juices flowing and improves workflow.

The result:

This slideshow requires JavaScript.

Then after that, we each wrote on the whiteboard which ideas we liked best out of all of them. As well as another consolidation of the most frequent ideas that came up.

This slideshow requires JavaScript.

After we had commonalities, we assigned particular tasks and split up to start drafting up how particular exercises on post it notes and how they’d work within the app. To testing if any of these ideas could possibly work or what they felt like to operate. And much like what we’ve done in other stages of game development  is paper prototype!

This slideshow requires JavaScript.

There were large sheets of paper to test on and post it notes along with a whole box of goodies that can used for paper prototyping. In Adam’s case, he was using some of the large sheets of paper with lots of goodies from the box. Having physical objects that can moved around, simulating what the apps screen might look like. Us others stuck to post-it notes, because these sized post it notes are almost the same size as what 2016-2017 modern-day mobile screen sizes are. If we could fit our prototype content onto these similar size post-it notes, we know it could translate onto phones in a similar fashion. If it fits onto these sizes, it’s only going to be easier to interpret and decipher on larger screens such as tablets.

17622715_10208785383696464_1872970218_o.jpg

Some of my paper phone prototypes


Eventually it came to a point in time where we should start seeing where these elements fit into the app and how the app flowed. This was/is another ongoing conversation because this is iterative design. It was back to the drawing board – literally. We started to figure out how and where each of the game elements worked. Using the bit white board ‘wall’ as a plotting space to compile all of the common aspects and activities we wanted to be in the app.

This slideshow requires JavaScript.

Once there was enough knowledge on how the app could flow and some of the prototype content could fit in it was about time to move onto testing how this would actually look/feel/operate on a digital device. So luckily being in the 21st century and having technology at the finger tips, instead of blasting straight into unity which is what we’re pretty much used to doing, we took another approach. The internet has plenty of places to do “proper” or “mockup” UI designs. And one of the greatest things about using one of these sites is that if we made this quick prototype in unity it might have felt like this was the beginning of design. Sure it could be iterated on but we might have been afraid to discard it. Being on an external site means we have to discard it. Rather than sticking with the first thing we try, explore different ways of doing things. Here’s a few sites that we tested that enabled us to do what we wanted for free:

Now without going into great detail about whats so good and bad about each of them I’m going to do a quick summary. They all do what they’re supposed to. Some have minor differences in aesthetics and what it enables you to do or what is available to use. Some were Mac only. The one that stood out was Marvelapp. For a number of reasons.

  1. Multiple people can be invited to the project and work simultaneously.
  2. There’s an app that you can download and view your project on.
  3. Within the app you can play through your design.
  4. The app is free also.
  5. You can send links to people to play through your design!
  6. You can record exactly what users do!
  7. It updates live (when there aren’t any syncing problems).
  8. It updates live on mobile devices (when there aren’t syncing problems).
  9. It can be used on both PC and Mac.

Here’s a list of cool features that it can do. It lacks a few features that makes the difference like simple copy and paste or drag and drop functionality in play mode. Parts of the simple functionality was missing which makes it a little more time-consuming to make it do VERY simple screen changes which gets the idea across, but the app itself makes accessibility a breeze. But when it came to sending the link to NI and getting them to run through the app in its most basic form and to get the message across and for them to understand it confirms it was the right choice.

Marvelapp.JPG

Until next time –

Nic

 
2 Comments

Posted by on March 23, 2017 in Uncategorized