Learn how we created this site - Part 1

Posted on June 03, 2017

By Thomas Yung

Before we get started, you should read up on the reasons on why we built this site. Besides the obvious notion that all legitimate organizations require a website presence, there are other problems that we thought a website could help us with.

Back in the summer of 2016, we made a decision to build our website using a user centered design approach. We planned several design and coding workshops over the span of several months.

Project timeline

Workshop #1 - Kick off, project charter, roles/responsibilities, branding

Workshop #2 - Review logo design, persona exercise

Workshop #3 - brainstorm content / information architecture. 

Workshop #4 - Wireframes, decide on what to prototype and test

Iterative Development - Develop -> Test -> Feedback -> Complete? Y/N -> Repeat if needed

Workshop #1 - Branding and mission statement

Before starting on branding, it was important to establish our mission statement and an official name for the group.

We did a brainstorm of what each of us thought the group provided as value for members.

9vQgTZ2lYV8Lm_wte_-CIh7_ULAy502-MNRsgIY1kjeoqF9XkxTMSqRth3-z71wYjP4xSKfETK2YMzjW5iVTjxpFs2gXUeu6IKRKodaFab3j2OD7svaZaPdcH9Ix9yPRrqbsFjdA

5lI5yXEVqAY1Ia91bwPBITqWIR7Pev7PN1KSGuCWPQ1u9puxIwYC2J3V4fUY6VNMS3RBFW0YXHoRmwAKpEhtVHxQwT8Lz5Yrlzn-7JkDf4MYgQdiBw0EhGcZYFDWm8tecCumvuUo

Then, we posted on the board, and looked for common themes.

5gWzfwAiBEFY2yAcJrKX_Ha9c0U6nBBA5_eMNYHcsueLqdSGw6kWI4CMbvUFqFqH9RWfWIz8WsVTqAM5i-UXdoBldOQ_ZPUShdkaediHjgFApQEzOYydSCcu9D4ljf2hfcsktQhs

We came up with “UX Design Matters” as our group’s name. 

Logo Design

As part of our homework, we brainstormed some logos for the next design workshop. Myself, Dana Palmer, Jan Hagenbrock came up with several designs. In workshop #2, we discussed them as a group and voted on the three best ones. 

t998dyP6kOU48HHbhuMmaMAsgUmKGLU6ZUIBFRRdVKeuwpnbQmgCweAxDHn3lgVXBTD0FQTF2zmsenpZJv3HgapKuCWBD508AJXZmHABvu42IbSWRHelm4OdIjskGSdZKYnPsLkN

Then, we decided to put them up for public voting using a TypeForm survey. The survey was kept up for a month. The results were close, with A winning. Since Dana had the winning submission, she went ahead and posted the logo source files out on GitHub.

Workshop #2 - Personas

Personas are a UX deliverable (based on real user research) that helps all stakeholders keep the end-user in mind. This will help us with future design decisions. The exercise of coming up with them as a group will also help inform the features to provide in the website.

During the second workshop, the group spent a good portion of the hour on brainstorming assumptions and observations about people that would be most interested in our UX Design Matters group.

We then broke down all the items into three categories:

  1. Demographics / Background

  2. Behaviors / Actions

  3. Needs / Pain points

Check out the whiteboard full of stickies. (Beautiful)...

BaRwJmrE0geEPVf1pKfGlfMBKbCUp9QyFyohXjah4aLERRPtIflIpUjDW_kyxNcV1FNvlqY8uwaZT8BZIZhANdSRX4b2PZ1iH-x02bz_-RNWC08w926NEzGE1hEhgXyNqJpPrVDo

9K7ZtfOVkq26DgyjTI6evrE6h_cfB1kOrmGLZhOOw98vxmgMFIhWkG58n6eHmPVlQjIm2DvIn4phoTdGXaaTIz64WUOtZDW9mnaM3geKou2LjOJVSeZXOyg03ztE8E0Ly5Y7vt9d

ktaBQ0V5rPGMm8FVX6GF1cJ0-kHMN31roNOmj4C1qP7nw5sML4ClA9QP4GLP0nmUdkB1iVVjLPxi87U0G4Seyc4_gcDsyOtdobJBx2GcHd1e6hywVYt40mj9QNzLCqauoYfjj_nN

Based on user research gathered from interviews and conversations prior to all the workshops, we came up with these 6 proto-personas.

37i9yKWw06gdVXbTN1FQpCyQTRVfekzIJVsEC_Tng4YshZOJrgS8yBdLC5Trb25v9a_OECbkq-euHGn4yh2S0ImyFjexAcmvd4Y96z2ap-FaF9oxrJWeu_fPKQy2CJwsPm8lQB-B