Review the Client Site and Executive Business Review
Take a moment to review the Executive Business Review (EBR) if it’s available. You’ll read more about the EBR in Post-Launch Phase. Also walk through the customer’s existing mobile experience (if available) and desktop experience.
This is a great opportunity to familiarize yourself with how the customer site is built. Pop open Chrome Dev Tools and take a look around: is the markup clean and semantic, or clunky and outdated? Is the content static, or populated asynchronously? These questions are important you as a designer. Progressive Mobile technology works by repurposing markup and content from the desktop site. The code you see here will be the code your team will be using to build this web app or app.
Project Type Considerations
As you prepare for the design kickoff, it’s important to understand the high-level project requirements and the specifications you will have to design against. What questions do you need to ask the customer so that you can begin to solve the right problems? You can use the following information and questions to ask how something will relate to either a Progressive Mobile web build or Progressive Mobile app build:
Progressive Mobile Web Apps
- Review the Mobify Progressive Mobile UI Kits and Pattern Library to help you understand the various components you might need to use in your project. Will there be drastic differences in what the customer needs versus what the Pattern Library currently supports?
- Which features of the project will be the most complex? What questions can you ask the customer to help you get the answers you need in order to make the right design decisions?
- You will use various common design patterns across your project; for example, a fixed header that transforms to a more condensed version as you scroll down the page. Does the customer understand these patterns? What questions and discussion could be had during the kickoff to explain this approach?
Progressive Mobile Apps
- Review iOS Human Interface Guidelines (HIG) and Google Material Design Guidelines and determine how much variance your design will have per platform. Knowing where your app will differ from OS-to-OS will help you make design decisions that scale well.
- Read the Statement of Work (SOW) and determine how much customization the app will have from the mobile web view.
- Has the navigation pattern been established already? If it has, how will a tabbed navigation or drawer navigation affect the design? How will the shopper move into subcategories if a tabbed navigation pattern has been chosen? Do you now need a more detailed category list navigation on your homepage?
- Will layout changes be required? Sometimes a reorganization of elements can enhance the UX, and do not require a huge amount of effort. (e.g. moving the product image on the product detail page to the top of the page.)
- Which icons will be in the header bar for each tab? For instance, if you have the search icon present in the “Stores” tab, does this imply that the shopper can only search for store locations? If they’re able to search for products, does it still make sense to have that icon in the header?
Designing for Smart Content
- Will the customer be using Mobify’s Smart Content features? Where will this be used? What kind of promotions do they have in mind? What is their promotion workflow currently?
Designing for Messaging
- Will the customer be sending broad based promotional messaging campaigns or will the shopper have the ability to sign-up for product specific messaging? What effect will this have on the user experience? For instance, will it be necessary or appropriate to design a “soft ask” for permission to send notifications? (App only.)
Designing for Location Features
- Will this project include location features? Do they have their own store locator or will they be using Mobify’s Location and Store Drivers? Does the site currently support real time inventory or pickup in store features? What effect will this have in your interface? What will the ideal place and time be to ask for permission to access location? Will it be necessary to design a “soft ask” for this? (App only.)
Compiling Questions to Ask your Client
As you review the desktop and mobile site, keep a list of things you’d want to discuss during the kickoff meeting. Why is the menu built this way? How prominent do they want their promotions? How important is each banner on their homepage?
Build out your Design Kickoff Script to reflect the questions you want to ask. Send some of your more complex questions to the client ahead of time so that they can thoughtfully consider the answers.
Looking at their code will produce even more questions: Are they using any special web fonts? Are they using images in place of text? If so, do those images have alt attributes you can use instead? Do their homepage banners have text baked in, or can you repurpose their assets for mobile?
Managing Brand Assets & Guidelines
While looking through their site, you probably got a good feel for your client’s brand aesthetic; you’ve seen the colours and fonts they use, the style of imagery, how things are laid out. But that might not be everything you need to get started. Do you have:
- Fonts: Customers are may use variety of typeface in their design due to the simplicity of adding custom fonts through services like Google Web Fonts and Adobe Typekit, and through self-hosted solutions like
@font-face. This can make for a better looking site, but adds a little bit of complexity.
- Are they hosting them locally, or using a third-party service?
- Do you have the font files on hand, or do they need to send you a copy?
- Icons: Icons can be a great way to accompany and clarify an action.
- Does the customer have a custom set that they prefer to use?
- If not, which kind of icon style are they looking for?
- Brand Guidelines: Most established brands will have guidelines for you to follow while creating designs for them. These will give clear direction on how to use all the other pieces in conjunction.
- Does the brand package contain a high-res logo?
- Do the brand guidelines contain information about use of colour?
- Do the brand guidelines contain information about buttons or states?
Understanding the Competition
Once you’ve familiarized yourself with the customer, take some time to check out their competition. Are they doing anything interesting that you’d like to bring through into this customer’s design? Is there anything they’re doing you can improve on to give your customer the cutting edge?