top of page
Baking

Redesigning the Lisa Girl homepage 

Engage and retain users on their first time visit to a new online clothes store

Client: Lisa Girl (concept project)

A start-up online retailer is redesigning its homepage. The brand is small (Lisa Girl), but the home page is its face to the world and the starting point to most user visits. It is important to create a design that makes cut through in the current market.

  • Product: mobile retailer website.

  • Focusing on just the homepage.

 

My role

  • Product Designer (sole focus homepage)

  • Wireframing, Figma, High-fidelity prototyping, Personas, User Journeys, Competitor analysis

  • December 2021

Goal: Understand and easily navigate the Lisa Girl home page as a first-time user, viewing the site on a mobile device 

Problem:

  • No clear tagline or site purpose 

  • Includes ‘Home’ CTA, even though the user is already on the home page 

  • Missing online retail home page conventions: icon links to a personal account, favorites and basket

Goal: Purchase a specific item previously seen on Instagram 

Problem: 

  • The search CTA does not follow the search convention, it is not in a conventional location and as a result is not immediately identifiable and visible to the user. 

  • No clear CTA to enter the shop,  nor is it clear what the sites top high priority tasks are

  • Missing external links, to pages such as Instagram 

Goal: Explore the range

Problem: 

  • Very limited site content is revealed on the home page 

  • Too few links are offered to the user 

  • 'Home' button seems to be in a natural place where 'women’ should be. Information that is similar should be grouped together. When they are inline and visually similar, users expect them to perform the same function

Identifying the problems

Analysis

​Competitor Benchmarking:

  • Mobile sites included: Mango, Asos and Zara

  • How do the best-in-class mobile sites solve present their home screen, what conventions should I follow and what should I improve

​

  • To help me design and shape the Lisa Girl home page, I created the persona, Saskia Smith.

  • Saskia is a fictional, yet realistic depiction of a typical target user for Lisa Girl.

  • In future projects and if I had more time I would have worked with more than one persona.

Persona

​

Tool: Figma

The initial stages of the design process.

My flow diagram, focuses on 3 flows, based on three use cases for the home page.

 

Assumptions

  • The user will remember the exact name from the Instagram post she has previously seen 

  • The product that the user is looking for is not the product shown in the home page imagery 

  • The user has Instagram app downloaded

 

Business Goals

  • Increase conversion rate 

  • Reduce the number of clicks from homepage to buying an item 

  • Increase order revenue 

  • Improve customer retention 

  • Reduce drop off rates

User Journey

Wireframe

​

  1. On selection, off-canvas menu slides in to view

  2. On selection icon is highlighted and user is brought to the related pages

  3. On selection highlighted field the keyboard appears in selected state

    Instruction text disappears in selected state and a new section opens up with pre-filled content that a user might be interested in.

    User can type a search term (inc. exact product name), and drop-down appears with exact matches or predicted associations

    User is taken to results page after selecting ‘done’ or ‘search’ on mobile keyboard, or the search icon on the screen.

  4. On selection CTA button bolds and user is brought to the associated landing page

  5. On selection of image, user is brought to the associated landing page

  6. On selection of ‘@Lisagirl’ user is brought to Lisa Girl Instagram profile

  7. On selection of image user brought to Lisa Girl Instagram

My solution explained

​

Clear search function at the top of the screen,  using the conventional magnifying glass icon to indicate a surrogate action of search. 

  • Why?  The user has come to the page with a specific product in mind [‘silver mesh heels’], rather than relying on primary and secondary tap navigation, the prominent search function will ensure a simple search experience and hopefully, translate into a conversion. 

  • Magnifying glass and placeholder texts serve as a visual cue to submit the search 

  • The top of screen is the expected area and ensures the search functionality is visible and readily available for the user.

  • Keeping the search in the header, allows the user to conduct a search on web pages besides the homepage 

 

Make sure the site proposition is clear: add a clear tagline and site purpose; ‘true style never dies’ and ‘shop women’ / ‘shop men’ / ‘shop home’  across the center of the Lisa Girl home page overlaying an image including some of the products on sale. 

  • Why? The user immediately understands the purpose of site and feels engaged with the content 

  • Placed centrally to the home page, as this is where you get new traffic regularly, therefore will have a more significant impact on first time users 

  • The image reinforces the message and may make the user want to explore more of the

​

Make sure key functionalities are easy to access, include CTA’s / links for the high priority tasks – ‘shop women’, ‘shop men’. ‘shop home’, ‘search’ and ‘burger menu’ all immediately accessible and obvious to the user

  • Why? CTA’ are important signposts to help the user navigate their way through to purchase and help explain the site 

  • ‘shop women’, ‘shop men’. ‘shop home’,  teach the user what to look out for on the rest of the website 

  • Having three primary CTA’s central to homepage, reduces choice, less choice leads to more action 

  • Encouraging user’s to follow these CTA’s will take them to the next step of the purchasing journey 

  • On selecting the burger menu, a more in depth view of the product categories available to the user will be shown

 

Offer a seasonal promotions / promotions and more imagery/links to tell the story 

  • Why? The user may be encouraged to explore more of the range and as such encourage to make further purchases 

  • Seasonal promotions, remind the user that they could shop more of the ‘festive’ range 

  • More images of the products / range can further encourage the user to purchase, complement Lisa Girl’s value proposition and provide clarity and context to the user 

  • Link to the @lisagril Instagram page, offers the user the opportunity to easily remind themselves of the product they have already seen.

bottom of page