To make TransQuip’s webstore operate better in a mobile format e.g. with limitations such as reduced screen size, slower internet speed and less precise selection ability as well as better layout of pages.
Requirement
1)Change the homepage around e.g.
a. Banner –
i. CTA’s on homepage banners – E9
ii. Make banner content ‘web-safe’ – E9
iii. Make text on homepage banner separate to the pictures, because Google can’t read text which is embedded in pictures
b. Make grey box area for changeable news and company items smaller
c. Change the ‘Featured product for the month’ and ‘Product Categories’ sections so they are more interactive and link together more – eg have the category with a picture that can rotate through different products in a carousel. Eg like EBay example – https://www.ebay.com/ (Welcome your ideas on the best way to do this).
d. Re-configure home page for mobile, not just ‘squashed’ (and below i to vi)
i. “Strapline” taking up too much real estate in mobile edition, make smaller & make the logo the long version – put in on the left side – like Ebay
ii. Make the login options smaller so it just has the icons – like Ebay
iii. Burger menu beside or above search bar next to cart symbol – like Ebay
iv. Once the words are separate from the banner redesign it so it comes up readable – not just a condensed version
v. Change company and changeable news (grey strip) to the bottom of the page or take it off completely when in mobile view
vi. For ‘Featured product for the month’ and ‘Product Categories’ sections make them a carousel instead of list, and a swipe function to view different product/categories (depending on how we change this section – as per step 2-c)
vii. Phone number to be in grey header strip or perhaps an icon when in mobile view (like step 2-h)
viii. Once we have an ‘About’ page (as per 4) then we can remove all the info in the footer of the home page for mobile view. If we don’t have an ‘About’ page then the footer info needs condensing a lot
e. Add a name field to the newsletter subscription
f. Homepage needs more text content to describe what we do
g. Move large phone number up further into the top-right corner or add “Call Us” before it, so it looks like a phone number
h. Make the aforementioned large phone number clickable, so we can track it
i. Add an email address to the header and make it clickable, so we can track it
3) Change the “Contact Us” page
a. Move the form to above the map
b. Make fields “Company Name”, “Region” and “Message” not mandatory
c. Include all sales reps’ locations and contact info, so customers can see we cover all of NZ
4) Add an “About” page, explaining company mission
5) Reduce size of footer, especially in consideration to the viewing ability on smaller mobile screens
a. Consider using icons
b. Have 1 key phone number
c. Use headlines with links to further information or have an expand function
Our Solution
- For home page change around :
A. We can add banners that have no text in it. So that text will not be with the images and it can be readable. We can also add CTA’s on banners .
B. We can make the grey box area for changeable news and company items smaller as avoiding some spaces in it.But it will take the area of content inside it.
C. We can have a multi image slider with heading ‘Featured product for the month’ and the featured product images 3 or 4 images in a slider at a time.Same as that can be done for category.
D.
i. We can change the register, login, favourites, shopping cart to icons or we can unable this from the strapline since it can be added near to the logo like icons.
ii.We can make the login options smaller by adding icons of login,shopping cart in the same way as they were in the ebay site.
iii.We can add a burger menu above the search bar like ebay.
iv.Yes,Once the words are separate from the banner redesign it will comes up readable
v.We can take company and changeable news (grey strip) completely off in mobile view. We can make the area smaller by avoiding some spaces in it.But it will have the area of content inside it.
vi. We can add phone numbers in grey strips.
vii.We can remove or add content on the footer as much we want.
E. We can add more text content to the home page. - Regarding the contact us page we can move the form to the top of the page and we can also change the mandatory signs
- We can add about us as a landing page.So we can add content here.And navigation to this landing page will be added from the home page.
We can have icons at the footer instead of phone,mail,fax.We can add headings and on clicking that headings it will expand showing data.