Christina Woon
TCOM 420
6/6/16
Success Through Structure
Introduction
In this class, we were to participate in a service-learning group project. Working with
our community partner, Dr. Kathy Prezbindowski, we were to redesign a website for
the Coming Out Women support group of Tacoma. In order to do this, we used the
skills and tools we learned in class as well as advanced concepts, practices, and
techniques to develop and maintain interactive websites with an open source content
management system (CMS) Drupal. We examined the topics of interaction design,
information architecture, and content management related to the creation of websites.
We used this project to explore ways of studying users and their activities in contexts
to create a website that will serve their needs and to truly highlight and incorporate
their motto: Authenticity, Wholeness, and Empowerment. And in order to achieve this
goal, we followed critical design methodologies and employed design thinking for
design innovation. This paper will focus on how structure, through site maps and
wireframes, is one of the key components in creating a successful website.
Dangers of Being Structure-less
Many web development firms tend to jump into the visual design before planning out
how the site will actually work. In class, we were taught that the actual design portion
of the project should be done last. There are dangers when that methodology is not
followed. Content management research should be one of the top priorities before any
of the physical design processes should be done. If the visual layout is done first,
before any of the research and data management work is completed, the designer will
have to keep going back and redesigning the layout to either add more content or
change the structure of the website over and over again. From a time-sensitive stand
point, this type of going back and forth between content management and design is
inefficient and takes away time from productivity. Emotionally, it also creates creates
unnecessary stress to the designer.
Why Create Sitemaps and Wireframes Before the Visual Design?
Not having a plan for your website before getting into the design portion of the project
is, like not having a blueprint for a house before building. (Windmill Design, 2015)
Thinking about overall goals for the website and having a strategy of where to place
important calls to action will make your website work that much harder for you
instead of just looking pretty. In addition, it becomes more likely that the designer(s)
of the website does not have a thought-out plan for how visitors will be using the site,
what information theyre looking for, or the general accessibility the site. In the end,
creating sitemaps and wireframes ensures that youll have a smarter website that will
help you achieve more growth.
Design Process
In the past, websites were measured in pages and each page was maintained by
hand as a single HTML file. But todays websites are dynamic and always-changing, as
it allows site maintainers to create and edit content, set user permissions, and
connect with other services. (Nienkerk, 2012) So, websites today are more like web
systems. A sitemap and wireframes help designers, such as ourselves for this project,
to organize content for Coming Out Women.
Sitemap
A sitemap is a list of all the pages on a site and how they will be organized.
Organizing content helps make your site more user friendly. Creating a sitemap
2
helped us classify our site content. With our prior audience field research in mind, we
decided that we wanted our website to allow the maximum amount of accessibility
and ease of use for site-goers. Our site structure is meant to follow an order that will
guide our users from one tab to the next in the order of perceived importance without
confusion.
Wireframing
After a sitemap has been established, the creation of wireframes is the next natural
course of action. Wireframes are the foundation on which to begin web building and is
done before the creative design phase. By using our sitemap as a guide to build our
wireframe, we were able to build a visual representation of the Coming Out Women
website. There were many research and design dynamics that were incorporated to
create this blueprint of the website.
3
Success with Structure
Building a sitemap and using wireframes is a key part of the best practices approach
when considering designing a website. Developers can use a site map to validate
assumptions about scope and complexity and as an early view of feature
requirements. Visual designers can use a sitemap to get an idea of how much
variation may be required and whether the design will need to be modular and
extensible. (Ward, 2010) Finally, UX designers will reference the sitemap when they
4
design wireframes. Sitemaps are an important tool for organizing site content and
documenting the websites direction.
Using these tools are affiliated with the criteria of the 4Es (efficient, effective
engaging, empowering) we learned in class. Sitemaps and wireframes are the basis of
structure in the design phase. Efficiency is achieved when a designer incorporates
structure on their design processes. It saves the developer time and energy from
going back and restructuring the design. Good structuring of a design will lead to
effective project management and incorporations of the projects design goals.
Building sitemaps and wireframes engages the development and design team, as well
as the client, because it shows the client that you have spent the time to develop a
framework for the project. Lastly, successful structuring of a design both empowers
the developers and the users of the website. Careful building of a site incorporates the
needs of the users, without sacrificing the ease of use when navigating through the
website. Site-goers should feel empowered when using the website and developers
should be proud of their accomplishment.
5
Our Coming Out Women project owes our successes largely to creating a well
thought-out sitemap and extensive use of wireframes. We used this project to explore
ways of studying users and their activities in contexts to create a website that will
serve their needs and to truly highlight and incorporate their motto: Authenticity,
Wholeness, and Empowerment. By emphasizing on structure we were able to create a
strong and rewarding website for these women.
6
Bibliography
Nienkerk, T. (n.d.). Dont design websites. Design web systems!
Sitemaps and Wireframes Before Design. (2015, March 10). Retrieved from Windmill Design:
http://www.windmilldesign.com/importance-sitemap-wireframes-visual-design
Ward, T. (2010, Nov 10). UX 101: The Site Map. Retrieved from Viget.com:
https://www.viget.com/articles/ux-101-the-site-map
