Dev Devout

Overview

Dev Devout is a website devoted to helping designers, developers, and creatives. It is a custom code passion project that has been developed over time. It consists of various types of web apps, automated code/design examples, and traditional articles.

Duration

Jan 2022 - On going

Role

UX researcher, UX designer, UX writer, Project manager, Developer, and Server Administrator

Goal

Design a cohesive website that incorporates custom web apps, tools, and article functionalities. Also, ensure that the overall design theme is maintained across all of the unique implementations.

Step 1: Empathize

The first step in the design process was to empathize and better understand the user requirements of Dev Devout. I started by conducting extensive search engine optimization (SEO) research and carefully analyzed the discovered quantitative data metrics to gain a deep understanding of what webapps/articles potential users are interested in utilizing.

Based on search traffic volume, ranking difficulty level, feasibility of implementation, etc, the results of my research reviled that users were interested in webapp/articles such as the ability to easily find CSS gradients, informational content and code examples articles, CSS unit conversion tools, and more. I then conducted a competitive analysis audit, from the results of which I discovered:

Ample SEO keywords and developed a strategy of which content in the form of webapps/tools, code examples, and informational articles could be created from to drive considerable traffic to the site. Key gradient webapp features that needed to be included in our webapp. For example, the ability to easily edit and copy the CSS code of each gradient was needed. I also discovered features that competitors didn’t include such as an extensive gradient categorization filter and the ability to download an image of each gradient.

Step 2: Define

The second step in the design process was to synthesize the data and insights from the empathize phase to determine the key set of features to be implemented. I also determined the structure as well as the priority level of each feature based on the data metrics.

Lastly, taking all the information gather so far in to account, I created the sitemap below to define the preliminary pages and the relationships between them for the overall website.

Sitemap

Step 3: Conceptualize

The third step in the design process was to start conceptualizing the initial structure and design of the website based on the sitemap, feature set, and requirements determined in the define phase.

I conducted this step by first sketching structural design ideas on paper. Once I determined the base design structure, I then created the digital wireframes seen below.

Wireframes

Gradient Wireframes

Article/Static Pages Wireframes

Step 4: Prototype

The fourth step in the design process was to start prototyping based on the wireframes produced in the conceptualization phase.

Lo-Fi Prototype

I first created a low-fidelity prototype making sure to incorporate the key structural design elements and requirements determined in the previous steps. Once the lo-fi prototype was completed, I then conducted usability studies to determine that all requirements where met and see where it could be further improved to enhance user experience.

Gradients Lo-Fi Prototype

Article/Static Pages Lo-Fi Prototype

Hi-Fi Prototype

Once the low-fidelity prototype was thoroughly tested and completed, I then moved on to created the high fidelity prototype. During this step I incorporated many of the visual design ideas that came to fruition resulting in the designs seen below. Lastly, I documented the design files and handed it off to my developers.

Gradients Hi-Fi Prototype

Article/Static Pages Hi-Fi Prototype

Dark Mode Pages

Step 5: Test and Iterate

After the completion of the high fidelity prototype, the last yet on going step in the design process was to test and iterate on the design to gradually fine tune it in to the final digital product experience.

During this step, extensive usability tests were conducted and the feedback were synthesized and taken into account during the iteration process to further refine the final design and ensure that the overall user experience was exemplary.

Results

After the site was coded and push to the github repository, I configured the code and server for production, implemented its onsite SEO, and published it live on the internet.

Fast forward a few months and the site is now getting thousands of visitors every month and is gradually growing as you can see from the Google Analytics screenshot below.

View Live Website

Final Thoughts

Overall, the process of designing Dev Devout has gone fairly smooth. In fact, over the past few months, I have further designed more apps/tools, functionalities, and improvements that my developer has implemented.

An AI section has also been incorporated with on-going designs to implemented more helpful AI apps/tools. I will continue expand, test, and iterate on the designs of this site as it continues to grow.