Satisfied with my early sketches, I’ve now interpreted these as scaled wireframes. As the MA programme has progressed I have come to appreciate the iterative development process – I have found that the opportunity to review designs and interpret them as a higher-fidelity versions permits me to critique those designs, find flaws, and suggest improved designs. This presentation documents some of the design debates that I came across, mostly referring to the placement of user interface elements, which required me to find a balance between accessibility and aesthetics.
Babu, R. (2019). Inclusivity guide: Usability Design for Left Handedness 101. [online] Medium. Available at: https://uxdesign.cc/inclusivity-guide-usability-design-for-left-handedness-101-2bc0265ae21e [Accessed 24 Jul. 2022].
Nadir, M. (2021). Left Handedness and Mobile User Experience. [online] Medium. Available at: https://bootcamp.uxdesign.cc/left-handedness-and-mobile-user-experience-a3728c72f880 [Accessed 25 Jul. 2022].
Nielsen, J. (2005). Scrolling and Scrollbars. [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/scrolling-and-scrollbars/ [Accessed 24 Jul. 2022].
Sherwin, K. (2019). UX Guidelines for Ecommerce Product Pages. [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/ecommerce-product-pages/.
Since my positive meeting with Christopher earlier this week, and learning that he’s interested to see the visual development of the project, I have moved forward with producing some early sketches.
In the below presentation, uploaded to YouTube, I discuss some of the sketches and my design ideas further. Please note that the presentation contains some key points about accessibility, functionality, and links to theory in my DM7915 proposal.
Heller, J., Chylinski, M., de Ruyter, K., Mahr, D. and Keeling, D.I. (2019). Let Me Imagine That for You: Transforming the Retail Frontline through Augmenting Customer Mental Imagery Ability. Journal of Retailing. doi:10.1016/j.jretai.2019.03.005.
Løkke‐Andersen, C.B., Wang, Q.J. and Giacalone, D. (2021). User Experience Design Approaches for Accommodating High ‘Need for Touch’ Consumers in Ecommerce. Journal of Sensory Studies. [online] doi:10.1111/joss.12727.
Peck, J., Barger, V.A. and Webb, A. (2013). In Search of a Surrogate for touch: the Effect of Haptic Imagery on Perceived Ownership. Journal of Consumer Psychology, [online] 23(2), pp.189–196. doi:10.1016/j.jcps.2012.09.001.
Yesterday, I met with the Founding Director of Edwards of England/Blossom & Easel, Christopher Johnson, to discuss some of the outcomes of the research to date. He was particularly interested in the results of my competitive audit and very keen to learn how the ‘digitising’ of the products via techniques such as photogrammetry could improve sales and possibly allow him to places products in the metaverse.
Below I have listed my notes from the meeting as well as the action points.
Meeting Notes
Christopher was very interested in the results of my competitive audit, and agreed with some of the outcomes. Requested a copy and intends to action some of the areas where B&E does not align with its competitors
Very constructive discussion about how product qualities (weight, capacity, colour/design, texture, build quality, etc can be captured in media. John Lewis examples contrasted with Sainsbury’s provided clear explanation and demonstration
Christopher understood that much of this research would be theoretical, and attaining quantitative/qualitative feedback from customers was beyond the scope of this project
Christopher agreed that providing many sources of information (images, videos, text description etc) could be overwhelming for some customers due to cognitive load. Good discussion around how one visual form of media could suffice (e.g.: teleshopping)
Christopher mentioned an interest in ‘digitising’ some of his products for sale in the meta verse. Just something he’d like to explore
Overall, Chris was very supportive and remains interested in the project and has agreed to the actions listed below
Alongside my competitive audit, this week I’ve also been analysing a few similar augmented reality deployments alongside the required technologies to create them. Along the way, I’ve been highlighting elements of inspiring AR deployments that my client could benefit from having in their experience.
I have compiled this research into an ISSUU keynote presentation, available below, and have presented this as a short Youtube presentation too.
Alper Guler (2021). Converse Skate Park – AR Virtual Try on. [online] Youtube. Available at: https://www.youtube.com/shorts/5kRAHM3L1F4 [Accessed 10 Aug. 2022].
Apple (2020). Apple Developer Documentation – ARKit. [online] Apple.com. Available at: https://developer.apple.com/documentation/arkit/ [Accessed 16 Jul. 2022].
Apple (2020). ARKit | Apple Developer Documentation. [online] Apple.com. Available at: https://developer.apple.com/documentation/arkit/ [Accessed 2 Aug. 2022].
Apple (n.d.). Apple Developer Documentation – Adding Realistic Reflections to an AR Experience. [online] Apple Developer. Available at: https://developer.apple.com/documentation/arkit/camera_lighting_and_effects/adding_realistic_reflections_to_an_ar_experience [Accessed 16 Jul. 2022].
Bulgari (2016). Serpenti Forever Top Handle. [online] Bvlgari. Available at: https://www.bulgari.com/en-gb/bags-and-accessories/womens/bags/top-handle-bags/serpenti-forever-top-handle-calf-leather-green-290569 [Accessed 8 Jul. 2022].
Bulgari (2019). BVLGARI TOVCH. Tap to Dive into Our world. [online] Youtube. Available at: https://www.youtube.com/watch?v=eMn5kNrZHsM [Accessed 10 Jul. 2022].
Design Hubz (n.d.). Designhubz 3D & AR | Web-based Augmented Reality (AR) for ecommerce. [online] Designhubz. Available at: https://designhubz.com [Accessed 5 Jul. 2022].
Facebook (n.d.). Spark AR Studio – Create Augmented Reality Experiences | Spark AR Studio. [online] Spark AR Studio. Available at: https://sparkar.facebook.com/ar-studio [Accessed 10 Jul. 2022].
Genius Ventures (2021). Luxury Handbags AR Commerce by Genius Ventures Inc | Augmented Reality for Fashion Brands | Spark AR. [online] Youtube. Available at: https://www.youtube.com/watch?v=8MAWU2vpNvk&list=PLfCFtdiO4_nyPtl4izl3yvLGUUpYIGtyR&index=3 [Accessed 10 Aug. 2022].
Genius Ventures (n.d.). Augmented Reality Business Solutions by Genius Ventures Inc | AR | XR. [online] Genius Ventures Inc. Available at: https://geniusventuresinc.com/services/ [Accessed 9 Jul. 2022].
Online Campaigns (2012). Converse the Sampler iPhone App. [online] Youtube. Available at: https://www.youtube.com/watch?v=lBQzXi04JpE [Accessed 10 Jul. 2022].
Snapchat (n.d.). Lens Studio Marketing. [online] Snapchat Lens Studio. Available at: https://ar.snap.com/lens-studio [Accessed 10 Jul. 2022].
Tech Magic (2021). Bulgari Iconic Bag in Augmented Reality. [online] Youtube. Available at: https://www.youtube.com/shorts/OWMYi7QmcWU [Accessed 9 Jul. 2022].
In order to better understand my client’s position in the retail market and learn how their online presence compares to key competitors, I have carried out a competitive audit. My intention is that a competitive audit will inform some of the upcoming design decisions in a redesign of the Blossom & Easel website. I will also highlight any potential usability problems in competitors’ websites and review gaps in the market where there is opportunity to innovate. Overall, this process aims to improve the efficiency of the forthcoming design process by maximising the return on time, money and energy (Google, n.d.).
During the previous module I produced a research proposal that are listed for large-scale competitors of blossom and easel, these were Sainsbury’s, next, John Lewis, and ASOS. In addition to these Christopher Johnson has informed me of a further three competitors that are similar in size to Blossom & Easel.
All of the competitors analysed are in direct competition for a very similar audience. I have been able to analyse each competitors strengths and weaknesses regarding their online presence, including aspects such as: accessibility, user flow and navigation (across a product page), media (e.g.: product images and video), and tone/descriptiveness of written product descriptions.
All visuals that were inspected for the competitive audit, as well as the outcomes, have been presented as a Keynote presentation document here:
I have compiled the data from the competitive audit into a Microsoft Excel document, which is available here:
Above: A SWOT analysis comprising results from the Competitive Audit
To summarise the competitive audit, it appears that the inclusion of emerging media could be a unique opportunity to aid high–NFT consumers’ confidence, allowing Blossom & Easel to increase the endowment effect among their customers in a manner that their competitors do not currently achieve. However any experience must address salient qualities of the product (Peck, Barger and Webb, 2013); some similarly priced competitors demonstrate product capacity in their imagery, providing consumers with confidence by alluding to scale and build quality using methods that Blossom & Easel currently do not.
I’m very much looking forward to presenting this data to the client at a meeting next week.
References
Google (n.d.). Start the UX Design Process: Empathize, Define, and Ideate: Week 5 – Competitive Audits. [online] Coursera. Available at: https://www.coursera.org/learn/start-ux-design-process/home/ [Accessed 28 Jun. 2022].
Peck, J., Barger, V.A. and Webb, A. (2013). In Search of a Surrogate for touch: the Effect of Haptic Imagery on Perceived Ownership. Journal of Consumer Psychology, [online] 23(2), pp.189–196. doi:10.1016/j.jcps.2012.09.001.
Above: A Content Directory of the Blossom & Easel website, displayed as a mind map
As my project would involve rebuilding the product page on my clients website several times (as part of an iterative process of prototyping), it was necessary for me to catalogue all of the page’s content. Above, I have recorded every page element and allocated it to a section e.g.: “Image gallery section” or “Production description”. Not all page elements may find their way into my final prototype, as the inventory process has allowed me to visualise and audit the content before implementing features back into a redesign (Cronenwett, 2019). It may be the case that content is outdated or replaceable with newer technology (i.e.: photogrammetry scans may remove the need for an image gallery).
Site Structure Diagram
Above: A keynote slide recording the site structure of Blossom & Easel’s current mobile experience
My next task was to create a site structure diagram, which would assist me in understanding information architecture on the Blossom & Easel website. Although this project will not see me make alterations to the entire site structure, my adjustments to the product pages may impact where information can be found. Based on my findings it appears that the product pages would be the most suitable area of focus for my project, as this is the only area of the website addresses specific products; the ‘Story’, ‘About Us’, and ‘Contact’ sections address the company and its ethos, but not the products directly.
User Flow
Above: A flow diagram that capture’s the product purchase flow on the current Blossom & Easel mobile experience
This led me to explore how the user may interact with the Blossom & Easel website. Until I am permitted to view any analytics data from the website, I must work via assumptions; and that process starts by visualising a common flow that the consumer undertakes – purchasing a product.
Highlighted in red, I have identified the part of this flow that involves consumer decision-making. In this process the consumer would be required decide whether to purchase the product, and this is the area that may become problematic for high-need to touch consumers, as outlined in my DM7915 project proposal. It is this specific part of the process that I intend to address via an iterative prototyping process, to ascertain how adaptations could be made to an E-Commerce Mobile Platform to address high-need for touch consumers.
ISSUU Presentation
Please note, the above screenshots are available for viewing in a larger format via the ISSUU link below:
References
Cronenwett, D. (2019). Interaction Design: Structure. [online] LinkedIn. Available at: https://www.linkedin.com/learning/interaction-design-structure?u=89462170 [Accessed 5 Jul. 2022].
In this blog post I will be detailing some of the research I have carried out on my clients current mobile experience.
Client Branding Guidelines and Corporate Image
Above: Preview screenshots of the client’s branding guidelines
In response to my request the client has provided me with their branding guidelines. These serve as rudimental guidance on the usage of logos, graphics, and typography across the client’s website and product lines. It will be important for me to respect and adhere to the guidance set out in this document, especially during the medium and high Fidelity development stages when there will be a large emphasis on visual design.
Above: Two Keynote slides capturing the corporate image of Blossom & Easel
I have noticed that imagery surrounding my clients brand has focused on common themes, including: nature, art, young artists, and products. Images have a bright yet vernacular tone to them, yielding a feeling of casual optimism.
I will not be contributing to the photography during this project, but will be borrowing these images (or similar from a stock imagery bank) to increase the realism of my prototypes.
Analysis
A large amount of my visual research into the client’s current mobile experience highlights positive elements of the experience. Evidence can be observed of the product page being carefully crafted, adhering to many practices that positively impact user experience, such as the inclusion of gestalt principles, the establishment of a visual hierarchy, and the adoption of recognisable graphical elements. This is unsurprising as the eCommerce aspect of Blossom & Easel’s website is powered by Shopify, which is a widely used ecommerce platform that benefits from a wealth of knowledge and funding to maintain a high quality user experience.
However, my assessment of the experience so far does leave plenty to be desired regarding the accommodations for consumers with a high need for touch. Despite including some textual information about the product, little-to-no description is provided regarding the texture of the product, its operational moving parts, or its size in relation to other objects.
Above: Two Keynote slides featuring bulleted observations of current product imagery
I have conducted a critical analysis of the product images available on my client’s website. In particular, I have been critical of how the salient properties of the products are presented within the images, this relates to the products’: “softness, texture, weight, and texture” (Peck, Barger and Webb, 2013). Being able to address these salient properties may positively impact the confidence of high-need for touch consumers, which forms the basis for my studies in this module.
Above: Two Keynote slides recording product imagery for two different products
Where imagery has been used, as six images of the product providing a range of angles, the quality of the photographs is good enough for the product’s exterior material texture to be observed. In specific images other objects such as an eyeliner and a hand can also be seen alongside the product – this allows for consumers to observe the scale of the product in relation to common objects. Unfortunately the execution of this may not be too effective, as on some occasions not all objects are fully in frame.
Above: Four Keynote presentation slides, analysing a product screen on the current Blossom & Easel mobile website
Product descriptions accompany a small range of imagery. They are written in a friendly and informative manner, containing factual information such as product size, care information, and named materials used for products interiors and exteriors. Information about the design and designer is included extensively, and even in video form. However, information that may provide a consumer with ‘haptic imagery’ is sparse (Peck and Childers, 2003); across many product listings, descriptions of product materials and textures is not present. Despite some imagery in the product listings closely depicting the textures, the consumer must make assumptions about how products feel, their weight, scale, build quality, capacity, among other qualities. This lack of information, or the requirement for a high-NFT consumer to balance information from a range of media, may become demanding upon their cognitive load, or negatively impact their willingness to purchase (MacInnis & Price, 1987).
ISSUU Presentation
Please note, the above screenshots are available for viewing in a larger format via the ISSUU link below:
References
MacInnis, D.J. and Price, L.L. (1987). The Role of Imagery in Information Processing: Review and Extensions. Journal of Consumer Research, [online] 13(4), pp.473–491. doi:10.1086/209082.
Peck, J., Barger, V.A. and Webb, A. (2013). In Search of a Surrogate for touch: the Effect of Haptic Imagery on Perceived Ownership. Journal of Consumer Psychology, [online] 23(2), pp.189–196. doi:10.1016/j.jcps.2012.09.001.
This past week has been a particularly productive one for planning this project. I have been able to establish a client who is smooth, E-retail business could profit from the research outcomes of my proposal and final major project.
The client is a small e-retailer called Edwards of England, who trade under the name “Blossom & Easel,” and they specialise in selling products that feature artwork and designs by young, budding artists. My contact at Edwards of England is the company’s Founding Director, Christopher Johnson.
On Friday I attended a meeting with Christopher to ascertain the level of involvement he would like in my project. He was pleased to be involved and preferred to be updated when visual designs, prototypes, and interesting pieces of research were available. For this reason I intend to show him the outcomes of my early sketches and wireframes, as well as each stage of the prototyping process (Low-fidelity, medium-fidelity, and high fidelity).
Above: My initial DM7908 GANTT ChartAbove: A Mindmap of initial ideas for DM7908
This week I have also continued with my literature review, specifically focusing on how augmented reality technologies have been researched and used to address consumers with a high need for touch. I have summarised the outcomes of this literature review in the below slides and document:
Above: Summaries, Extracts and Recommendations from my Literature Review
Please note that I may continue to build upon this body of knowledge and update my literature review as the project continues and I begin study at PhD level.
Following feedback from previous module submissions, I intend to keep my blog posts more concise and within the mandatory word count limit, so I have uploaded a keynote presentation of my client research to ISSUU. The presentation addresses the client’s business details, key products, and an analysis of their online presence, which can be accessed here:
