TL;DR.
Website design can look overbearing. Whether you are looking to do your own website design or hire Maven X through a Maven Web package we simplify a complex process into 8 steps for simple website design: Identify your goal, define your scope, design your creation, implement your code, test your prototype, analyze your feedback, launch your site, and monitor your site. We look at how Maven Edu was designed using these steps and close out each step with what you can expect from Maven Web as a Maven X client.
Introduction.
Whether you are designing your own website or opting to hire someone else, you should be intimately involved in the process. You website is a crucial part of your business in the age of technology that we are in. Web design involves a combination of art, technology, and psychology. Sometimes the whole process can be a little intimidating, but we want to simplify it for you a little bit by condensing it to 8 simple steps.
The main reason why you should be involved in the web design process is because it’s your website! While the designer can make a website no issue, it might not be exactly what you are looking for. By knowing what you want and having a plan you can more accurately convey your vision to the designer. By then staying involved in the process, you can ensure that there are no major deviations from the vision to the actual design.
As a business that designs websites for small-medium sized businesses, entrepreneurs, and people alike, Maven X can confirm that these steps help us design websites for you. Your vision cannot be created by us. By having this information defined and ready we can more accurately create your website and even get it created faster.
In this blog post, we will be speaking from our perspective, as the designer, to you, as a client. Following each step we will provide real examples from our own Maven Edu website and the design process we followed to develop it. We will also provide the Maven Web process steps as if you are our client (and we hope you will be!) to demonstrate how these simple steps are hardcoded into our process. So let’s see the 8 steps!
The 8 Steps for Simple Website Design.
1. Identify Your Goal.
Before a web design project can begin, both the designer and client need to meet. This is where the designer can get to know the problems, goals, and desired outcomes for the website. While the exact questions vary based on the project, some of the foundational questions that need answered are the following:
- Who is the target audience?
- Are these your potential customers, current customers, etc.?
- What do they expect to find on the website or do on the website?
- Should they be able to contact you? Find blog articles to inform? Is there a customer portal?
- What is the primary purpose of the website?
- Is the primary purpose to inform, to sell, or amuse?
- What is the message of the website?
- Is the message to convey your brand’s core message, a part of a branding strategy, or something unique?
- What are competitors doing?
- What are the competitors doing right? What are they doing wrong? How do you want to be different?
🎯
Each design company will have different questions and different processes. These foundational questions are necessary for you to define what you want and what you need. But just as important as what you need it helps you identify what you don’t need or don’t want. These are equally as important for web designers.
Maven Edu Observation
The goal of Maven Edu is to be Where Young Professionals learn. Looking at the questions above, the target audience is both potential and current customers. Potential customers can look at courses and become engaged with potential topics of interest to them (what they can expect). We also wanted our site to be our Learning Management System (LMS) where our current students can access their courses. The primary purpose of the site is to both sell and inform. We want to inform potential students on the game changing topics we are teaching but then also close sales of that course to the students. From start to finish we focused heavily on design, simplicity, and intentionality. That is the message of Maven X and Maven Edu. There are a lot of competitors in the space and they are doing great but we think that our courses and the content are going to make us stand out from the competition.
Maven Web Process
The first step Maven X will perform is an introduction meeting. This gives us a way to talk with you, get comfortable with us, and to hear more about your business, the goals, and other important background information. This introduction meeting is an important step in the Maven Web process. Following the meeting, we send you a questionnaire that is asking more discovery questions to help you further explore your expectations and define what you want to receive from the website. This helps us to have those questions documented and then to create a plan from there.
2. Define Your Scope.
Scoping is almost always one of the most difficult parts of any project. There are a ton of ideas that can come to mind but might not be feasible or match up with the defined goals in step 1. Your scope should be intentional, specific, and aid in the goals only. Scope creep happens when you start on the right path but deviate somewhere and stray away from the purpose and the goal.
The scoping will also help to define your desired timeline to launch. This process will show how long each process should take. More times than not, this part of the process will be defined by the designer. Be sure to set realistic goals for both yourself, your business, and the designer.
🔍
This step is best to be visualized on a chart, spreadsheet, or some sort of project management software. Setting milestones and other todos that you want to hit is important. Make sure that every step or milestone is needed, clearly defined, and that they ultimately link back to one of the defined goals to help avoid scope creep.
Maven Edu Observation
For a website like Maven Edu, we had an extensive scope that we needed to cover. While the goals were fairly simple the execution would be much more involved. We defined several items for Maven Edu that was a must have and important priority in our scoping. The a concise and informative homepage, the LMS (functionality/speed/reliability/experience), the course preview, the checkout process, and simple account management. Behind each step is information security first and design right behind. We defined these items are crucial to the website, our mission, and our student experience.
Maven Web Process
As we can see, defining the scope is crucial. After purchasing a Maven Web package, you will gain access to the Maven X Client Portal. This is where Maven X work lives. Every project has it’s own webpage and task lists. Maven X will scope the project, provide a proposed timeline, and create a list of major milestones in the project. At any time you are able to check on the status of the project, provide information back to Maven X, and will receive email notifications when a milestone or task is marked completed or in progress. As with any engagement, communication is key. The Client Portal is the clearest form of communication to help us talk to you.
3. Design Your Creation.
Now the fun part begins! The designer will brainstorm, begin to create sketches, request mood boards, request website examples, present potential themes, layouts, design trends, and so much more.
During this process you begin to define the function, look, and feel of the site as well as the flow. A sitemap provides the client and designer the foundation for how the website will be structured. It outlines the relationship between pages, defines the architecture, and can define some of the must have elements on the pages. This is the blueprint of the website.
Next should be the wireframe. A wireframe is often derived and created from the mood boards and example sites. This is the taste that you have as the client and what you want the end product to look like. A wireframe is the visual draft for how the site will look and be structured from a visual standpoint.
Another important part of this step is the content creation. Each page in the sitemap will have information, text, images, videos, etc. It’s not the designers job to create this content as they don’t know what you know as the expert in your business. Content should be engaging and drive action on the site. You want people to find your site, be interested/engaged in the content, and ultimately move them to the desired end goal.
🎨
This step in the process will be heavily placed on the designer, however you as the client will have a lot of input into the process. Before any code is written, any server is setup, and any design is implemented we want to ensure that the design is solid.
Maven Edu Observation
Design is a huge thing with Maven X and Maven Edu. If you couldn’t tell, we are extremely visual and design centered. The same went for Maven Edu. We want to be a visually engaging brand to keep learning engaging and interesting. We deployed some best practices for site flow psychology as utilized some great design examples to test the flow of our site to be as simple as possible. Often times, the best design and the hardest can be the simplest. We wanted the site to be as simple and easy to use as possible. A lot of websites can be extremely complicated and complex for seemingly no reason. This desire played heavily into the design.
The site and Maven Edu brand has it’s own look and feel but we also needed the site to be a platform for all future courses and their own design, images, and more. So the course pages needed to be flexible with design to allow the courses themselves to shine. While incredibly detailed, these are things that need to be considered and discussed during the process.
Maven Web Process
Maven X will draft up and create some visual designs for both the wireframe and sitemaps to ensure that we have everything documented that you need. These documented will be uploaded to the Client Portal for review and documentation. Additional meetings might occur and there will be a moderate amount of back and forth between Maven X and you, which is ok! Discussions, changes, and updates help us to be more accurate during the implementation process.
4. Implement Your Code.
Now the coding and design process truly begins. The sitemap, wireframe, and content all come together into the website. There will be some back and forth between the designer/developer and the client to make tweaks and changes as things begin to come together. Additional UI elements may need to be created, content may need to be changed, and so much more. This step is very active.
🧑💻
Unless you are designing and implementing your own website, there isn’t much effort needed from you as the client in this step. Mainly you are reviewing and approving or denying the design implementation.
Maven Edu Observation
The Maven Edu site has a lot of custom coding elements to it. This step in the process was the most time consuming but also the biggest shaping element to the process. We learned a lot about what we wanted and what we didn’t, what looked good and what didn’t, and how we wanted the site to function and how we didn’t. During this step we were also determining our infrastructure. Streaming lots of video is a very bandwidth and computing demanding process. We needed the site to be able to deliver the course content to our students with the best quality and efficiency as possible. Ultimately we had to look at a lot of moving parts and figure out how to put them together.
Maven Web Process
Maven X will be designing and creating your website on the desired platform utilizing all of the information from the previous steps. We will be in constant communication with you to ensure that the site design is on track to your desired visual expectations and outcomes. All information will be communicated and placed in the Client Portal.
For the most part this step is hands off for you as the client besides just looking and giving suggestions and tweaks. So sit back and relax!
5. Test Your Prototype.
Once the website is complete, or almost complete it’s time to test. You as the client will ultimately test the site first to ensure the design is accurate. This step is where the bulk of the process and work is directed back to you. Ultimately you want to define who will be using your website and find individuals to test the site as themselves. This is called user research.
Essentially you must find different users to test the new site. There are a lot of benefits to this step and you will uncover a lot of different issues, problems, and design suggestions during this step. These users will be testing your website on a lot of different browsers, devices (desktop/mobile/tablet), they will be interacting with it differently, and they will be trying to find information in different ways. You should be very specific and intentional in what you want the users to search for and find. Some of the questions you should be asking are the following:
- What do the users like or dislike about the design, the look, the feel, the flow?
- What buttons or links are they going to first? What about last?
- How are certain tasks handled? For example how are users looking for FAQs? Are they looking for a single page or within the product specific pages?
- Were users confused on how to operate, navigate, or find any information?
🧪
This step is handled primarily by you or maybe a third party company but usually isn’t completed by the designer company. Ultimately you want to get the best results as possible to get the most out of your website and ultimately your investment. The more complex the website then more testing that should take place.
Maven Edu Observation
During the initial deployment of Maven Edu we had users from all over test the platform. We needed to ensure that our students would have the best experience possible. What we did was select and ask a few people to watch a course. This testing process happened at the same time that we were ready to launch our first course. We provided these users free access to the course as a great incentive and had them test the site and review the course at the same time. We created a detailed document to tell them exactly what we were looking for. You can see this document on Maven Edu’s blog post The Ultimate Guide to Successfully Create an Online Course in 11 Steps under Step 10. Keep in mind, this end user research was primarily geared towards course review and not the platform itself.
During this review we had users find lots of coding issues that needed to be fixed, confirmed the look and functionality on lots of different devices and browsers, and identified ways that we could make the site better and more efficient for use.
Maven Web Process
During this step in the process, Maven X turns the site over to you for review. We always encourage our clients to perform this research, even if it’s just internally or with friends and family. The information gathered is very helpful to have before launch! As information comes in, quick tweaks are made by Maven X to the site to continue the testing.
6. Analyze Your Feedback.
Once all feedback has been gathered and completed, now’s the time to plan any big updates/changes with the designer. This is the best time to check for bugs in the code that might be the result of unintended experiences for the user. This step involves a back and forth with the designer to implement the changes properly.
Remember, this isn’t going to be your “final version.” Designs must always update and evolve to remain relevant, but try to get it as close as possible to your desired “final version.” You may also go back and forth a couple times with the designer and your user researchers to ensure that the original issue has been fixed.
💬
Take this time in the step to organize and update your original plans accordingly. While some feedback might not be important, it’s important to consider any feedback, comments, suggestions, and more. These user researchers are meant to represent your customers! If your customers can’t figure out your website, they might not make a purchase from you. Take this step serious to ensure that your customers will have the best experience!
Maven Edu Observation
Following our end user research effort we had a lot of different suggestions and complaints. Suggestions are things that the users think would be better if we did something else while complaints are things that didn’t work or that were difficult to understand. We of course prioritized the complaints first to fix them first. In order to keep our user researchers engaged we documented everything and provided a response and a confirmation that the fix has taken place so they could verify. From our experience, having great user researchers is critical. There were several unique issues we discovered during this step that we might not have uncovered during our own internal testing.
Maven Web Process
Maven X will continue to work with you to implement the requested changes to keep you aligned to your end goals. As we finalize the site before launching we will begin to confirm and finalize different parts of the design and process to ensure that we can bring the project to a successful close.
7. Launch Your Site.
The big day is now here! While you could just release the website into the wild and see where it goes, there need to be some proper planning. Following your plan in the scoping step, pre-launch day you need to consider the following; Are we ready to launch? What is the backup plan in case there are critical issues? How will be communicate this to the world?
During this last and final step you will continue to check for issues and gain initial impressions on the site. Any large and glaring issues or feedback should be communicated back to your designer. If possible, your design company should be made aware of the launch date to continue to monitor backend things like server load and more.
🚀
Most of the time the launch will be coordinated with your marketing team to ensure that there is hype already being built and that there are several communication channels involved to ensure that everyone is aware that your new site has just launched!
Maven Edu Observation
This was one of the most rewarding parts for our team! It was a huge relief to release Maven Edu to the world and we couldn’t have been more proud of the work it took to get there! We launched and continued to monitor for a few days following the launch. We utilized all of our social media, word of mouth contacts, and even paid advertising to get the word out.
Maven Web Process
Maven X will continue to work with you as you coordinate your launch date. We monitor the backend processes and servers to make sure things will be working smoothly. As part of our values, we get to celebrate with you on your launch day!
8. Monitor Your Site.
Following your launch you may need to address new bugs and issues that might arise as the site grows and you begin to actively work on it more. There may be some unexpected behavior following launch that wasn’t anticipated before launch. Your user need will also change over time based on how your business is growing and changing.
During this step create a roadmap of potential future changes to the site that may need to happen based off of future business potentials, future product launches, or product expansions.
📍
This step will never truly stop as it is one that is forever ongoing. You want to make sure that your clients and customers have a great experience on your website, we talked about this a lot during these steps. Coordinate with your design company to make sure that any backend processes continue to work as intended. There are a lot of different services they can perform for you if you ask (see the Maven Web Process below).
Maven Edu Observation
We are currently still in this process! As the site grows and we continue to serve more and more students we will need to evolve the site. We are always looking for feedback to improve the site and make it better. This is such an important mindset to have to ensure that you have your customer best interest in mind. As we grow you can watch our website change with us!
Maven Web Process
As a part of the Maven Web package and with some add-ons, Maven X will continue to monitor your site as a part of the monthly monitoring process. We perform updates to the site as required, we setup downtime monitoring to ensure your site is live at all times, and continue to monitor server resources. One of the huge benefits of the Maven Web package is to offload that process from you as our client. We want you to run your business and let us focus on the maintenance.
Maven Web.
Maven Web is one package, everything you need. The Maven X Web Package is designed to be simple, yet transparent, and give you everything you need to get your website online. All the work is done by us so you can continue to focus on your business.
Check out Maven Web to learn about game changing statistics, what you receive in the package, check out client sites, and much more. Use the below links to view Maven Web and inquire about getting the package! We cannot wait to help you create your website and bring these 8 steps to life with you!
Final Thoughts.
We know this is a LOT of information, but the web design process is a simple process. The work that goes into a great website can be a lot. The process is meant to guide you, ensure you don’t miss anything, and to provide the best experience from conception to launch. If web design isn’t something that you want to take on yourself we suggest hiring a professional design company like Maven X to help you achieve what you want faster and more accurately.
We hope that this guide provided a lot of helpful information to guide you into your next web design process!
Join Our Mailing List
Your inbox is important to us. Maven X will only send you a once a month recap of all things going on with Maven X including: newest blog posts, promotions, news, and other helpful resources!
Latest Instagram Posts
