The “How Stuff Works” of Website Design: A Case Study with a Community Twist

With the billions of sites that exist in the infinite world wide web, it seems as if creating one would be easy. Any teen blogger can gain a following through pre-generated templates and WordPress platforms; in many ways, this is the beauty of the equalizing accessibility offered by the internet. However, innovating a sleek, high-quality, and user-friendly page– complex enough to include all the needed information and simple enough to remain attractive– requires a more demanding process. Here, UX/UI (User Experience / User Interface) Designer at WebCreek, David Hinojosa, details the intricate steps behind each of the web pages he creates. He bases his explanation in the example of WebCreek’s newest collaboration, which is at once environmental and social: a pro bono effort to redesign the website of Quito, Ecuador-based nonprofit, ReciVeci. Following is our latest web design case study.

ReciVeci is a citizen-run recycling project, working to improve recycling infrastructure and education. The recycling culture in Ecuador is less than thriving, and there is a potential lack of awareness and opportunity to responsibly deal with waste. But WebCreek teams are joining in the local volunteering efforts, working to change that reality with a new ReciVeci website. We believe that this digital prowess will bring the organization tangible results, with wider-spread visibility and increased conversations around recycling lifestyles. Volunteering only the best to aid in such efforts, WebCreek put David in charge of this exciting collaboration. And, as with all of his start-from-scratch projects, he began by consulting with the client team. 

Step 1: Getting on the same (web)page

Although all UX/UI design at WebCreek starts with a client/company meeting, for David, this round of “meeting with the client” turned out to be much less formal than the phrase suggests. ReciVeci is a small crew of real people, who meet in one of their homes and talk details over coffee and snacks. David was included in one such evening, where he spent the first moments simply getting to know his new team on a human-to-human level. For effective collaboration to ensue, such mutual understanding is essential. As they got down to business, David asked poignant questions that pinpointed the organization’s needs, goals, and vision for the new webpage. This included gathering information and honing objectives, as well as doing research that became necessary as the conversation unfolded and questions arose. 

Step 2: Setting your sites on mapping 

Once reaching a shared understanding of the information to be included, David and the ReciVeci team parted ways (but not for too long…). His real work was just getting started, having finished up the coffee and snack-filled social meetings. The next design step involves translating all brainstormed ideas into a comprehensive site map. This serves as the conceptual framework upon which the following steps are built.  

Step 3: Feeling out the frames 

Taking this conceptual site map, David then entered the mind of the average user. And he considered: what do I most need to know about ReciVeci, and how is that information best organized? It wasn’t yet time for the website’s design, but he needed to sketch how the content would be arranged and which pages would be used, in a scaffolding series called “wireframes.” These frames were then recycled back to the ReciVeci team.

Step 4: Involving bigger teams and bigger ideas 

ReciVeci is a multileveled organization with strong individuals that form diverse teams. Commitment and passion are organizational strengths, demonstrated at this point in the website design process. David presented the wireframes to a wider ReciVeci team, taking in new ideas that further molded the final content.  

Step 5: With a little help from my friends (and competitors) 

Knowledge is power; and for David, research is vital to design. ReciVeci’s website needed to contain the necessary information but also needed to look sleek and chic. He spent hours pouring over previous versions of the org’s website, as well as other pages that are similar in content. All this worked to gather ideas that would fusion an innovative look. 

Step 6: Digging into Design 

Armed with ideas and information, David’s next ReciVeci step was to design. UI (User Interface) was the focus (as it always is)– ensuring not only superior content but also inviting and intriguing navigation.  

Step 7: Wizarding prototype magic 

This is where it all comes together: punch-packing concepts, eye-catching visuals, and smooth-sailing interfaces. For ReciVeci, David combined images of crumpled paper and recycled goods, with company photos and informative logos. Such a comprehensive, stellar prototype proves the fruits of detailed labor. 

Step 8: Letting it fly free

Once receiving final client approval, a newly-born website leaves David’s sculpting care. ReciVeci’s prototype is now reaching this stage, with David finishing up the touches that will ready it for full-scale development. WebCreek’s expert coders will soon dig into the working design, building the complex infrastructure that will avoid site glitches and convey a flawless experience. 

In future articles, we’ll bring you more about ReciVeci, about WebCreek’s pro bono collaboration, and–of course–about ways to become involved in environmentally-conscious action. For now, we’re excited to reveal how David is leveraging his well-groomed design process towards a wider social benefit. WebCreek is proud of our company’s waters, always providing the best in UX/UI quality. But we’re also invested in our globally shared waters, excited about contributing to their conservation. WebCreek is strengthening our community, as just one of the many ways that we’re connecting the dots.