Have you ever wondered how a site was designed and how the ideas were conceptualized into the final result? If your answer is yes, you are in the right place! In this post, I will show you our journey to create our latest website, CFEngine Build. From start to finish, how did we do the design and make the design decisions? So without further delay, let’s jump straight in!
Branding and logo
To have a logo that matches our objective for the website, we first need to reflect on our goal for the website. Our goal is clear: create a place for users to find and share reusable modules for CFEngine. With that in mind, we decided on the name CFEngine Build. The name represents the intention of our goal, which is to allow users to build and assemble the modules that meet their needs. What’s more, we wanted to add a block shape icon next to the name to enhance the image of building blocks and notably differentiate it from the original CFEngine icon.
This animation shows some of the ideas and experimentation we went through when determining how the block should look:
User research
Through customer meetings and user surveys, we knew that this kind of website was highly requested among our users. To better understand their needs and challenges, we conducted a series of user interviews. We asked about their use cases and how they use online resources for solving problems. Questions like:
- What are the most common online resources you use for your work?
- What is the hardest part of using those resources?
- What are the goals you try to achieve when you use them?
After the interviews, I summarized the data and concluded the common user patterns based on participants’ answers. For example, users heavily rely on keywords to find answers, they also prefer reliable/trustworthy sources and will not run any random code on their machines, and generally want to improve their current way of doing things.
These common patterns help me to develop a design question as follows:
How might we provide an informative, useful and robust site for our visitors?
The question then further guided me to create the initial design strategies. To be more specific, I developed the following three user stories that include the features and functionalities that hope to answer the question.
- As a user, I want to use the search bar or apply multiple tags to find the most relevant modules (based on keyword and tag matching) which meet my needs.
- As a user, I want to bookmark some of the modules so I can easily find them (on the home page or using the drop-down menu) and check updates when I return to the website.
- As a user, I want to be able to comment and to like other people’s comments so I can share my ideas and brainstorm with others.
From concept to wireframe
With the user stories in mind, I created a series of user flows in a wireframe format. It conceptualizes the ideas into the design and provides a general understanding of when and where to put certain features. The goal is to enable users to effectively find what they are looking for, by focusing on their needs and ease-of-use in the design process.
Following are two examples of how we design the features based on users’ needs. Take featured modules as an example. It provides users quick access to the featured modules and allows them to see what types of modules are available at a glance.
Final design
We added CFEngine brand colors and the font into the design. The page has ample white space because we want the page to be simple and uncluttered and deliver the information and features that our users would enjoy and appreciate.
What’s next?
We have launched the first iteration of CFEngine Build and are planning to continuously add more features which would benefit our users. If you have any feedback or thoughts, please kindly let us know in the community discussion in the below link:
https://github.com/cfengine/core/discussions/4846
