The brief
“Select one or two of the prototyping methods outlined this week and build quick prototypal representations of your chosen artefact. Note down any interesting characteristics of the artefact. Perhaps, you notice the colour palette is used in a certain way or the layout follows a standard grid system. Depending on your chosen artefact, you might want to annotate the dimensions and analyse the padding and spacing used. If you are creating a storyboard for a cutscene in a game, you could identify key components of the narrative arc or highlight various camera shots and how they are used to create drama.”
New Tools and Techniques
I have had no prior experience of Rapid Ideation, the most relevant thing that I have done is coming up with ideas and concepts in my sketchbook when I was doing my art degree.
I felt a mixture of nerves and excitement about creating prototypes. This is something that I have had no experience of.
I chose to focus on the John Lewis website accessed on an iPad. I chose John Lewis as when I worked in project management I worked with the online team who developed the site and I think that the brand and partnership model is brilliant.
I wanted to make a wireframe in Figma, as it is a tool widely used in the industry for UX Design. I followed a Tutorial on Linked in Learning, Figma for UX Design by Brian Wood to learn the basics of the application. I found watching the video and then trying the techniques was effective. I also took notes so I could refer back and to help me commit the learning to memory. I think I am more of a practical learner and enjoyed this approach.
I found a template in the application that I could adapt to create the wireframe for the John Lewis site. The tool was fairly intuitive and I enjoyed using it and learning new skills. I did run into issues a few times with text formatting however, I persevered and worked it out in the end.
Working on the design I noticed that photographs of products and promotions were the largest elements of the site. As you scrolled down the margins and number of columns changed. I was surprised by this as I expected to see uniformity. On reflection, I think it has been designed this way to help the user distinguish between themes and changing categories. There was a large amount of content on the Home Page which I had not expected as a user, I tend to use the menus at the top of the page and don’t scroll down unless I am looking for something specific.
I found it challenging to know how much detail to include in the wireframe. I decided to include text as I felt it was integral to the sight design.
Time management was an issue as I spent so long learning how to use Figma that I ran out of time to complete the wire flow. Templates and training for wire flows were harder to find. During the course, I may use paper prototyping for wore flow design.
Sources:
B. Wood, (2018). Using the exercise files – Figma Video Tutorial | [Online]. LinkedIn Learning, formerly Lynda.com. Available at: http://www.linkedin.com/learning/figma-for-ux-design-2/using-the-exercise-files (Accessed: 07 February 2021).
[Online]. John Lewis & Partners. Available at: http://www.johnlewis.com/ (Accessed: 07 February 2021 ).
UX Design MA Blog 