Over the last 10 years, our design process has changed and evolved, mirroring the web that we design within. We’ve seen shifts from table based layouts to fluid HTML responsiveness, from glossy web 2.0 to flat and everything in between. A lot changes over time, but a lot of the basics still remain the same.
The main areas that designers focus on during a project at Mogul consist of:
- Ideation, wireframes, and user flows
- Concepts and templates
- Styling and testing
Ideation, wireframes, and user flows
Before this initial design step comes a ‘planning and requirements gathering’ session between the client and the account manager (AM). This information gathering lays the groundwork for the direction, intention, budget and complexity of a project.
If the client has a current website it is always wise to take a look at the Google Analytics data, as it can give clear direction audience, landing pages or what keywords people are searching for the most.
Depending on the project complexity we will either start with wireframes or user flows. If its a relatively simple project we wouldn’t do user flows as most of the user experience (UX) decisions are forthcoming.
User flows provide insight for design decisions during the wireframing stage. By creating user personas and pathways we can map out and model tough areas to create a flow that feels intuitive for the user. This aspect also helps us formalise what kind of components might need to be developed in future steps as well.
We’ve recently changed from doing the wireframe layouts in Illustrator to Figma. Figma is a browser based app used for designing interfaces and I’ve fallen in love with it. It is intuitive and powerful, you can create clickable prototypes, leave comments and have multiple people working on a file at a time, all through the browser. It’s next level.
Typically we would design about five wireframes to cover the needs of the site.
- Homepage
- Default page
- Category page
- Product/service page
- About/team
- Contact
We tend to break up the areas of the page into layers that can be reused, reordered and repeated, making things malleable for content creation. During this phase of wireframes, we sometimes chat with the developer about aspects of the design that might be tricky or time consuming, balancing budget, function and ease of use to find the right solutions.
Once the wireframes are done, we review them in-house and then upload them to InVision for client feedback (Figma now supports commenting and history so we might move to Figma commenting sometime in the near future).
We make any needed changes and additions to the wireframes during a couple rounds then move onto the next stage once these are all signed off.
Concepts and templates
Depending on the complexity and what type of project we’re working with, we will either move to templates or high fidelity visual concepts. Apps tend to take the visuals route because there are more moving parts. Creating concepts in Figma and creating clickable prototypes gives the first valid rendition of what the app will work, behave and feel like.
If the project is a website, the designer and AM brief the developer on the wireframes and functionality of the website and try to point out anything that might need to be considered. The developer then fleshes out the base of the website, giving the designer a place to work from. The designer, who has a background in HTML and CSS, can then jump in and start styling it up. Adding brand elements, fonts, typography and image styles gives the site its own unique style.
We start with the homepage to show the overall visual style. The page goes through an internal review then onto the client. There are two rounds of changes at this stage.
Once the homepage is signed off, this gives us a guide for the rest of the website templates. The templates go through the same internal and client review and any changes needed are implemented.
After this stage, we hand the job back to the developer who then implements any other bits the website needs.
Once the site is ready for content loading, we load a certain number of pages before providing training for the client so they have the freedom and control to put the rest of their content in themselves. Some clients love a bit of DIY, and some would like us to load all the content.
Styling and testing
Now that we have designed and developed the website and the client has populated the site with content, it’s all starting to come together. We still need to style up all the little things like search results, 404 (not found) pages, comments, shopping carts and checkouts, account pages, so this is the final tidy up, testing and front end bug fixing phase. We test the pages across a range of browsers and devices, fixing any bugs that we find along the way.
Once we’re happy with the state of the website, we check to make sure it’s adhering to the original vision, any bugs are fixed and all of our checklists are completed. The website is then made ready for launch.
Our process is constantly evolving and changing. Recently we have been looking into the Figma API to bring the design and development worlds together in the early stages of the website development.
It is always fulfilling to see a project come to fruition, having put a lot of effort into it.
