Ollie Moser

Today we explored CSS in order to style the HTML that we had produced in yesterday’s class. CSS is ‘another’ language to get your head around but getting it right, is really where you start to feel the rewards of your hard work.

This is what I produced...

How does the web work?... That was the topic of the day.

After an easy to comprehend demonstration, using string, card and of course post-it notes, we learned about the relationship between client and server and the role of the browser. 

After learning about the relationship between UXDesign (including IA and Visual Design) and Web Development, and how the process is passed over seamlessly using annotated wireframes, we were ready to move forward with the basics of front end coding.

We started with an overview of the 3 key languages of front end development html, css and javascript. 

The below html is what I developed today using Sublime and text files located on my computer.

Today I presented my app design to a group, in order to get critical feedback on my design work so far. I pinned up my mood board and any work that helped me get to the current state of the design. So far this included adjectives and any style influences, typography, colours and shapes as well as brand associations and thinking about structure of content and gestalt principles.

The ‘Group Crit’ was excellent and provided me with some more invaluable feedback on my designs. With the mood boards, style tiles and the designs all up together it was helpful to demonstrate my process so far and gave my critics a good foundation to base their opinions on. Participants were encouraged to criticise all aspects of the screens, including typography, styling, layout, page interaction continuity, use of colour, buttons, and navigation to name a few. 

Today I learned about visual design analysis and how to analyse my design objectively, through desirability testing and a well structured questionnaire. 

These were incredibly useful exercises performed to deconstruct my design and to work out whether my original design idea was actually represented as it was intended. Which would act as a great base for further changes and testing. So, using my mood board, my descriptive adjectives and my style tile was created and then the first hi fid wireframe and now it was time to find out what other people thought of the designs and to see if it is in line with what I wanted to achieve. 

In order to get the most out of my testing i developed a questionnaire which was structured specifically to get the information i needed to critique and deconstruct my design. The aims were to ask the testers to explain how they feel about the designs, the shapes and the colours and the layout, what they thought of the mood of the designs, what they thought of the icons (design and use), what adjectives they could use to describe the design with a short explanation why.

Today I finalised my sketched screens for ‘Vlogged’ and began work on my Digital wireframes. After testing the wireframes for usability and page interaction I began to develop my hi-fidelity wireframes. I created digital icons for my app based on my earlier sketches and mood board, which I felt matched my branding.

To start with, I created a style-tile based on my mood boards, which acted as a guide for the hi-fi wireframes. This also was a great way to get buy in on the branding before I went ahead with the hi fidelity wire framing. The style tile included information like the colour scheme, the typography, imagery, brand adjectives, the elements and the icons. 

So, using the style tile I started to add and apply the visual elements to the design and to see how the design fitted together using the design principles and now the new addition of colour and shape and detailed styling and typography.

With the mood boards and word association for the app completed Today we developed our app designs further by thinking about applying the themes as well as design concepts such as groupings, hierarchy and gestalt theory through the redesign of our original sketches based on these more structured principles of design thinking. 

Having made the second round of changes to our digital wireframe design, we began the next round of user testing. This time we took our clickable/ tappable prototype to the Playstation gaming bar in Soho and tested it in context with our target user. This was very useful and the feedback we got was insightful.

The changes that we noted were mainly focused on use of iconography, language used in the Call To Action buttons and the positioning of some of the elements.

Once we had noted the changes from this round of testing, we began work on the presentation of our project, which was due tomorrow. 

We started off by setting the structure of the presentation. The structure was going to be centred around the story of our two primary personas and how we found them, how we identified their needs and frustrations and how we propose to help them.

Once we had decided on the structure, we began work on the graphic design for the presentation and the script, again this was to help us to build up an engaging and thought-provoking narrative.

Each of our group was allocated a part of the presentation to present, we were eager to demonstrate that our team was aware of every aspect of the project, so we made sure that this was reflected in the way we collaborated in the presenting of it.

With a few hours of practising the presentation together to ensure accuracy and timing, we were ready for the big day.

Today we analysed the findings from the interviews of our final user set, the creators of video game walkthroughs. We identified key commonalities and pieced together the data to create our personas.

Once we had the final set of personas based on the second user type, we used this and the task analysis to help us to develop a user journey for that group.

Next we needed to decide on a set of features that would help to solve our users’ problems (identified through the interviews).

We took the feature set, developed from the user research and competitor analysis, and attempted to prioritise the features. We prioritised the features according to the business’s needs and the users’ needs by deciding what was important or not, using the MOSCOW method. We then matched these features against how much time and effort each one might take in terms of development. Finally we identified a set of features that we, as a team, feel will help to solve the users’ problems as well as to create a solution to address the business’s needs.

Based on the competitor analysis and the feature set and requirements for the design, we then developed the sitemap.

A good place to start...