Jamersan’s CEO TJ Gamble hosted a live stream with special guest Joseph Russell, Head of Design at JH, on how to design a mobile first eCommerce experience. JH is an agency that designs and builds eCommerce websites, specializing in the Magento platform. Here is a highlight of the live stream and you can also watch the entire video here.
JH is the three time consecutive Magento Imagine best mobile design award winner. Joseph notes that winning once is a great achievement and that winning three years in a row really reflects the company culture. He says that they have had to keep pushing the boundaries and are lucky to have worked with great clients who challenge them. In their submissions, they work to share a compelling story of the challenges and how they overcame them, including how they have delivered huge improvements for clients, such as through improved conversion rates, orders, revenue or engagement metrics.
The sites that have won the awards are Sunspel, Perch & Parrow and Neom Organics. Sunspel is a luxury clothing company and JH improved on the responsive mobile design, while still highlighting the products and the brand story. Perch & Parrow is a designer furniture startup that sells designer pieces direct to the consumer. Because of the made to order options, the challenge was to have all the options work on mobile, which involved testing on real devices and improving site speed. Neom Organics is a wellness brand and JH’s goal was to highlight customer testimonials, while showcasing a user journey. They paired the user experience with shorter load times, bundling javascript and faster checkout.
TJ wonders if JH’s next submission will be a PWA and Joseph agrees that he believes there will be an interest in seeing those. He believes that Magento is doing a great job in building out their PWA tools.
In response to a question on tips for designing mobile optimized experiences while being true to brand, Joseph advises, “start off with your branding, start off with your core attributes and build out a design system where you can try to infuse the different elements of the interface with those brand touches.” He notes that clever uses of imagery are visual calling cards for brands and that being on smaller mobile screens doesn’t mean that imagery should be overlooked. He also reminds about the importance of tone of voice and content being a big part of the brand experience, noting, “I think a lot of sites would really benefit from investing a lot of time into their content… There are so many opportunities there to make small improvements to those touchpoints and parts of the user experience.”
With regard to page speed being used for mobile search rankings on Google, Joseph thinks that it is too early to look at rankings now. However, he also notes that Google’s attention to page speed will help in client conversations. This is a good way to remind your clients that, “The faster we can make sites, the more the user is going to enjoy them.”
If you have clients focusing more on updates to desktop design rather than the mobile first design, Joseph shares two tips on dealing with this. First, he recommends educating your clients on the importance of mobile first design, including showing analytics for traffic and emphasizing the user journey. Second, he notes that face to face meetings are helpful in order to present designs on phones and tablets so that clients can appreciate the design firsthand.
Joseph shares a good way to present mobile page speed metrics: show your before and after benchmark results. When considering whether to add features, you should always keep performance in the back of your mind. He notes the importance of loading features in the right order and the right way.
Joseph defines mobile first design as simply meaning design with the smallest screen in mind first, rather than designing first for the desktop. This means working out the essential content and actions for the user, while also thinking about bandwidth. You should be thinking strategically in laying on features, working from the smaller screen upwards.
There can be confusion on the difference between mobile first and responsive designs. Joseph says that they are two separate things but complement one another. While mobile first promotes a design philosophy of starting small and then moving up, responsive design consists of techniques and technologies that allow us to actually do the adaptations. Joseph sees mobile first as a way to progressively enhance the design as capabilities grow. Additionally, mobile users expect the ability to do everything on their smaller screens. “A lot of users, especially predominantly mobile users, are expecting to get an experience and achieve their goals on their phone,” Joseph adds. “It makes sense to do mobile well and for it not to be an afterthought.”
Regarding difficulty with designers struggling to be creative from a mobile first way, Joseph advises that designers should start by finding their creativity within the general site branding process. They can then take the broader branding and adapt it down to the smaller screens.
Joseph notes that style guides can be helpful since clients get consistent results and developers can be more confident with their work. Additionally, this can help with future site maintenance that may be done by the client. TJ adds that documentation helps to educate the clients on why the guidelines are important.
Joseph doesn’t see definite drawbacks to mobile first design. He references back to his earlier point that designers may feel limited creative freedom, but noted that there are ways to deal with this. He also notes it can be challenging to get clients to prioritize the mobile first design. Lastly, he adds that there is the risk of you not allowing enough time to later spend on building the desktop site.
For his process of starting with a mobile first design, rather than a desktop first design, Joseph says that he is more aware of content strategy and how content will be organized. He thinks you need to bring objectivity into the discussions on prioritization and should always be thinking of speed as well.
Joseph thinks that themes can be a good starting point for mobile first design, but personally he prefers to design specifically for the needs of his clients with custom work. He recommends that you can start with a theme but then customize it for your clients. TJ notes that something like the Luma theme can be a good starting point for a client with a lower budget.
Listen to the entire conversation here and subscribe to the eCommerceAholic Youtube channel. On the go? Listen to our podcast for the latest episodes. Let us know your thoughts in the comments or tweet us @eCommerceAholic #eCommerceAholic.
