Early August 2019 has been mostly about participating as a mentor in Neontribe’s Untangled event, held between August 5th and 9th 2019. This event involved working with students to support them complete exciting and challenging coding exercises and also a little bit of networking with the staff at Neontribe, some other computer science students and employees in other tech firms, notably Rainbird.
This period of time has involved a lot of development on my dissertation idea, beginning to work with a Fashion Design student at NUA to create a brand and products to show on the site as well as some more general web design and beginning to build another version of my portfolio.
This has been easily one of the busiest times of the summer so far! In fact, the whole summer has been busy but this period in particular! I’ve enjoyed working on lots of smaller projects that are fast-paced and quick as opposed to having one long internship or work placement this summer. It has helped to make not only my summer days more interesting and varied, but also my CV.
Untangled – August 5-9th
Without a doubt the most interesting thing that I have completed so far this summer is participating in Untangled. I worked with a group of three students, aged 11-14, who created a Shrek ‘personal assistant’ using Python. It’s been a little while since I used Python – I used to use it all the time in Year 12 studying computer science for my A levels because that is the language my school taught, but since then I’ve not used it a lot.
The program they created is a personal assistant style program that you can interact with via natural language or typing. You can talk to Shrek, ask him questions, get him to complete tasks and he will respond based on keywords in your answer. A mix of Python’s text-to-speech engine and soundbites from the Shrek films are used to make Shrek speak and Python’s speech recognition library (which uses Google’s AI to determine what you are saying) was used to convert what you say into the microphone or type into the textbox into strings that are run through a series of ‘else if’ statements to then determine what action Shrek performs.
Demo videos below! The first one is created by the students for Neontribe to use in presentations, the second one created by me to show some additional features not touched on so much in the students’ video.
What can you say to Shrek?
Many things! The students really got into putting interesting functionality into the program to make Shrek a useful digital friend to have!
Shrek can find recipes, create to-do lists, find the weather forecast for a given postcode, tell jokes, play a number-guessing game, find specific types of music for you and answer a lot of questions or statements from the user containing keywords. Shrek also plays several funny YouTube videos if your correspondence to him contains several key words, for example if you say anything with ‘day’ in it to him, he will start to play a funny video called ‘Shrek’s Day Out’ on YouTube.
The students were keen for this to be used by children and so designed the responses and the actions with the target audience in mind. I find it really interesting how despite these children not growing up when any of the Shrek movies were new, they still love them and there is a massive Shrek following among the children of today – even though the last Shrek film came out in 2010!
Students’ thoughts on their own work
They were really pleased with what they had made and by setting a very reasonably-achievable MVP (minimum viable product), they were able to achieve MVP status by Wednesday and so could spend Thursday and Friday adding new features and fixing bugs. Their presentation to the parents on Friday afternoon lasted 40 minutes and was attended by around 20-30 people. It was a great presentation that showed off what the program could do as well as entertain the audience!
One of the students worked on creating the images of Shrek and went from ‘0 to hero’ with Photoshop in a matter of hours! I taught him how to use the lasso, free transform, eraser and clone stamp tools to achieve what he wanted to do and he ‘clicked’ with Photoshop extremely quickly. I don’t think I’ve ever known a student (or anybody) pick up Photoshop so quickly.
Students’ thoughts on Untangled 2019
They loved it! Upon meeting their parents on the final day of Untangled a lot of them told me how their child had been talking a lot about the event at home and how they were enjoying it and couldn’t wait to keep coming back every day.
I could really see that the students were getting a lot out of participating. They got better at coding over the course of just one week and learned key skills such as communication skills, team-working skills and even how to effectively search for solutions to problems on Google – which as any dev will tell you, a critical part in knowing how to program!
Talking to parents and the students really made me think back to my education days and working with students. Untangled was a really nice event for me to participate in because once again I was able to do something that I love doing, which is mentoring and encouraging students. I felt that I got on really well with the students and was able to help them to produce the program that they wanted to produce.
In early August I put a post up on the NUA Facebook pages asking if a Fashion Design student in Year 2 or 3 would be interested in working with me on my dissertation to provide some clothing and a brand to have on my site. It didn’t take long before a student going into Year 2 in September named Kyra got in touch. Whilst I was at participating in Untangled, I was also talking to her and discussing what could be done for my dissertation piece.
We met on August 10th to come up with a brand name, logo and also think about the products that could be sold on the site and how these should be organised (information architecture). We also discussed how to photograph the garments and even where we’d take photos of the garments with models and what size the models need to be.
Introducing ‘F.F.A.’ – Fashion For Accessibility
This is the brand name we came up with – ‘FFA’ (stylised f.f.a.) is a fashion brand that Kyra and I are creating for the purpose of this project. Accessibility is at the root of the website – and also at the root of the brand. Clothes by FFA can be worn by anybody, but will be designed to be easy for the blind to buy and wear. Little things like:
- Braille patterns so that the blind could read patterns.
- Selling ‘sets’ of clothing that don’t clash and are all made from the same textures and materials (making buying outfits and trousers and shirts easier).
- Items of clothing use stretchier materials so that they don’t need to adjust their clothing as much and also because no fastenings (e.g. zips and buttons) are not required.
- Samples of fabrics are available to buy cheaply so that customers can get an idea of fabric appearance and texture before they buy clothes.
The clothes tend to be black and white in colour to give the feeling of elegance, high class, quality and professional. FFA sells good quality clothes that are produced ethically. Some other darker colours may also be introduced into the product range, such as dark reds and dark greens.
The FFA Brand
The brand itself is fairly simple and elegant – it is based somewhat on Zara’s brand, using a Serif font for its logo (Edwardian Script) and focusing on a very simplistic black and white colour palette to maintain elegance and cleanliness.
We began by considering adjectives and mission statements for this brand. Accessibility is the core of the site, so we felt that it should also be the core of the brand too. After considering ‘Access’ as the brand name, we began to add some adjectives and statements to it, soon shortening that to ‘ACS’. ‘Access To Fashion’ (ATF) was considered which turned into ‘Fashion For Accessibility’ and then also considering ‘Fashion For Accessibility And Inclusive’ (FAI).We felt that that got the message across, but upon drawing the brand mark in a variety of fonts and cases, we concluded that Fashion For Accessibility, stylised as f.f.a. in the brand mark, looked best and ‘rolled off the tongue’.
The logo itself is ‘FFA’ (without the full stops) in braille – further adding to the accessibility theme. The logo so happens to look similar to the brand mark and is extremely simplistic and memorable.
The logo also works well in the style of a tag or footer logo, shown below.
What does FFA sell?
The information architecture diagram below not only describes how the site’s layout will be structured, but also the products that we hope to be able to have on the site.
We’re going to sell skirts, dresses, shirts and trousers mainly – for adult men and women. Kyra is going to produce some new clothes for this and is also going to use some of her work from Year 1 of university. Kyra is also going to help me source models, photograph the clothes for the website and also help write the alt descriptions for the images of the products. We decided that the alt text for the images needs to include:
- The colour.
- The size.
- The fabric used.
- The kind of person that would wear the item.
- A brief description of any patterns on the clothing.
These are probably the kind of things that would describe the product images without repeating everything that is in the product description. Writing alt text that is descriptive, short and not repetitious of actual body copy on other parts of the page is a challenge.
The IA is not set in stone – it can of course change as the project develops. It will be good to have an IA a little like this because:
- It is a multi-page website with sections and categories that mimics a real e-commerce site.
- It provides the challenge of creating navigation that works well with a screen reader.
- I can be more flexible with the usability test that I write – I could get users to just browse the site and feed back to me, or write specific tests that have measurable goals and outcomes that measure how effective the site is.
Th IA is based very loosely on that of the H&M website in terms of what its top layer and second layer pages are.
Visual design and brand vs technical design and usability testing
It is very important to stress that the core of this project is not the brand or the products – it is the way it works with a screen reader.
However, as documented previously, the benefit of having Kyra onboard is that she is able to help me understand the industry better, able to help me write more descriptive alt text, help me understand how better to present and structure the site and also some products. All of this helps not only to make the website more accessible, but also more realistic because I find it very hard to build websites without knowing the target audience or product market. I can now build this prototype site knowing who to aim it at. That will make the prototype so much better to test, make the testers feel more comfortable using it and thus provide me with better data, enabling me to better answer the question.
Wireframes and high-fidelity designs
One of the things that I wanted to get better at over summer was using software like Axure to improve my design skills, so I thought that I’d use the new Axure RP 9 to design some wireframes and high-fidelity designs for the FFA website that Kyra and I came up with.
Between August 11th and 13th I created wireframes and designs for the home page, an example product category page (Women’s) and an example product page (a black dress). The next thing I really need to design is the checkout page. I created mobile and desktop versions of each wireframe and design, starting with the mobile designs because that is the core of my dissertation.
The easiest way to show all of these designs is to look at the embedded PDF document below which contains all of the wireframes and high-fidelity prototypes as of August 13th.
When designing the site I thought very carefully about how it would work with a screen reader – which ultimately is what it needs to be able to do. Therefore, I designed this with the following in mind:
- Menus that are not duplicated – i.e., in the mobile view the menu needs to be exactly the same as the desktop one, just rearranged into a different view (no separate HTML code for the mobile menu) so that the menu is only read out by the screen reader once.
- Few big background images are used – instead images will be placed in divs and which makes adding alt text easier than trying to add alt text to big images, often set in CSS.
- Second-level navigation (seen on the women’s desktop page) is obviously going to be read out after the main navigation by a screen reader and could be placed in its own section so that the user can skip it if they’d like.
- No carousels are used – instead, a sighted user can click on the small image thumbnails underneath the main image on a product page to see a bigger version. The screen reader will theoretically just cycle through the different images and describe them to the user.
- Descriptions are fairly short to save the screen reader reading out a lot of content.
- Elements such as drop down boxes and radio buttons are generally avoided since these are difficult to use with a screen reader. Text input fields are only used where absolutely necessary.
- Buttons are generally used to access pages – when using a screen reader buttons are more obvious to the user as links than having linked images are. Generally clothing websites just use clickable links and in my mobile design I went with that, but I may use buttons on everything.
- For those who need the best colour contrast, text is generally not overlaid on images. If it is, then it’s white text against a dark part of the image so that the text is as legible as possible.
- For the best colour contrast, blacks and whites are generally used, but the stark blacks may need to be changed for a dark grey to improve legibility further.
Like the IA, the design of the site, especially the product page, takes inspiration from H&M’s website, but also from more luxurious brands such as Zara – especially in terms of colour and font choices (explained earlier).
All images and text on the designs are subject to change – they are not representative of what the final text and images will look like, rather they are just there to demonstrate how the site could look.
Why does the visual design matter if this is going to be used for the blind?
The site is going to have an appearance – it needs to look decent and be usable by those who are not blind. To make a site ‘accessible’ it needs to be able to be used by all people – the sighted, the visually impaired and the blind. I’m just testing mine with the blind and exploring how I can make this site work really well with a screen reader. Lots of people design websites that work well for the sighted and conform to their reading patterns and what the sighted deem to be beautiful. Lots of people also think about people who are not blind but have other visual impairments such as dyslexia by ensuring that their colour palettes render legible text – but you just have to read the WebAIM Million report to learn that screen readers and assissitive technology for the blind are often totally overlooked.
Bidwell Joinery website launch
Tying in nicely to my dissertation is the launch of the Bidwell Joinery new site. They’ve been a customer of mine since the end of 2013 and for the past month or two I’ve been constructing them a new website. Their new site is built on a new framework of mine called ‘Dragonbase II’ which I have used to begin creating my portfolio website (again! Read on!) which is much better-written than older websites of mine and I have taken this opportunity to learn how to make a website work with a screen reader.
Recently I tested the first prototype of this with a screen reader and found it to be really easy to use, apart from the carousels being a bit problematic. The solution was to just remove the carousels altogether and have the images displayed in a nice grid on the page. It works well and looks better in my opinion. It also removes the need to use jQuery because the carousel library I was using (OwlCarousel) was powered by jQuery.
The prototype was finished in early August and sent to the Bidwells for evaluation. Final changes have been made over the past few days and the site launched on August 17th 2019, available here.
This site forms the basis of my dissertation website (the prototype FFA site), which I hope to ‘lay the keel of’ some time in the middle of August and have completed soon after. Then I can start writing the usability tests and think about how I’m going to prove that there are things that can be done to improve accessibility for the blind.
Lighthouse is a Google Chrome extension that audits websites for several different things such as performance and accessibility. I’m pleased to report that the prototype website for Bidwell Joinery scores 100% for accessibility. This proves that technically the site ticks the right boxes regarding accessibility. How it works with real blind users will be interesting to see.
You can see the full Lighthouse report, from August 2nd, below.
‘Pendragon 3’ – A third time lucky?
By far the most challenging thing about being a UX student at the moment is not actually explaining UX and your course to people or finding graduate positions in the industry, but actually creating a portfolio that showcases your work and is right for the industry. In the past year, I’ve had three separate versions of my portfolio – all completely different from one another and all received in different ways by different people – but each an improvement from the previous version.
The current version (2.1) was created in May 2019, shortly after I completed my second year of university as a result of the generally negative feedback that I received at The Big Book Crit from graphic designers on May 2nd. It launched on May 21st with a new layout, shorter case studies and many more images of my work. I raced to get a ‘fixed’ version of my portfolio out before the beginning of the summer just in case I needed to use my portfolio to apply for summer interviews, but I’ve been unable to secure a long-term summer internship in 2019. So, Pendragon 2.1 has not yet really served its purpose other than as an example to Bidwell Joinery and Foster’s Solicitors of the sorts of websites I produce these days.
Pendragon 2.1 was very different from any previous version of the Pendragon Online website, mainly because it featured 80% fewer words than the previous version and many more big images and ‘final outcomes’. This was a good thing in that it made the portfolio quicker to read and people could see my final outcomes, but potentially it turned it scarily close into a graphic design or graphic communication portfolio, which is definitely not the idea.
At a networking event in Norwich called UX Therapy held on July 2nd, Olivia Campey from The User Story offered to review my portfolio (Pendragon 2.1) for me and provide me with some feedback. This was a groundbreaking moment for my portfolio because this was the first time that a UX designer had reviewed my site.
Around a month later, Olivia sent me her feedback. On the whole she was very impressed and felt that my site showcased all of my skills very well, if there were a few minor visual issues with the site (caused by its relatively messy codebase that has been ‘adapted’ for years). She commented on how she felt that for a Year 2 student it was a very strong portfolio. However, she felt that was missing from most of my case studies was a clear ‘process’ – i.e. show how each case study follows the UX process.
Which is a bit annoying – because previous versions of my site had that (if a bit wordy), but it was criticised for that at The Big Book Crit. I think this just goes to show that those at The Big Book Crit who reviewed my site just didn’t understand UX or what it was about and were more suited for reviewing portfolios from graphics students.
What happens next?
Using Olivia’s feedback. I create a new version of my portfolio – again!
As of August 13th, creating Pendragon 3 is in the works. All of the case studies have been rewritten to show how they follow the UX design process, each with a lot more data in the case studies. Some of the older pieces of work such as work I did at A level have been removed to make it more obvious that this is a UX portfolio site, not a graphic design portfolio. One case study (Nellie’s Nursery) has been made into a page for the new site. The other case studies will follow.
In terms of the photography sections, I will likely put them in their own ‘sub-site’ and make it clear that the UX and photography areas of my site are very separate.
Pendragon 2.1 is built on old code that’s too difficult to maintain now, so the new portfolio is a ‘clean slate build’, built on much cleaner and much more manageable code. This not only makes it easier for me to manage going forwards, but also reduces the likelihood of having these visual and small functional issues that make the current site not as good as it could be. The site will also feature no jQuery, just like the Bidwell site and the FFA prototype. It will be built on similar code to them.
Accessibility is also going to be important – as with the Bidwell site and the FFA prototype, I will design this portfolio to be screen-reader ready. I feel that web accessibility is something I am very interested in and so the portfolio website needs to reflect that. The Lighthouse scores for the current version of the portfolio aren’t great – a lot can be done to make the site better.
However, it seems that once again I am going to be trying to race this out – this time my deadline is the end of August since graduate schemes start to open in September and I need a UX portfolio that makes the UX process obvious in order to get considered and put me ahead of other applicants who may have a portfolio that is similar to my current one.
At this point it’s difficult to write too much about Storehouse, but a lot has been going on. A lot of what’s been happening needs to be kept secret until September 24th when Issue 19 is launched, but in essence the cover has been chosen and designed, the magazine pages are being designed and early test prints are proving to be very successful. There have been a few changes to team members and how the team runs, but I’m still loving running the team and feel in control. I definitely think that this issue is going to launch on September 24th and it is going to be a big success!
The Storehouse website and Storehouse Article Creator software really need to be made. I’m hoping that this can begin with Ameer in the middle of August.
…it’s not all about work, portfolios and supporting students!
It’s the summer, it’s also time to have fun! I like to add at least one ‘fun’ thing I’ve done to these posts. Usually it’s high octane stuff like riding roller-coasters, driving supercars or admiring fighter jets. This time it’s a bit slower paced but just as fun – on August 6th I went canoeing!
The Students’ Union arranged a night of canoeing on the River Wensum in Norwich. My friend Valentina (soon to be starting MA Moving Image & Sound at NUA) canoed right through the centre of Norwich on the River Wensum. In two hours we managed to canoe from the centre of the city, to the western end, then to the eastern end and back to the centre again – in the sun and the rain! It was a lovely evening and a really nice way of chilling out and getting away from the computer screen, thinking about coding, students, Storehouse and the portfolio.