Tri Delta UCSD

A redesign and rebranding of the sorority's website.

Design Challenge:
Redesign and create a new website that encompasses Tri Delta's brand of down-to-earth and genuine girls.
Project Length:
January - March 2018
Team:
Cross-functional team of 4
Role:
UX Designer and UX Researcher
Skills:
UX Research, UX Design, Wireframing, Prototyping, Information Architecture
Tools:
HTML, CSS, Figma, Sketch, Photoshop
Scope:
Sororities heavily rely on online platforms as a way to showcase their chapter and members and to recruit potential new members (PNMs). The chapter’s website is the second most used online platform PNMs use, only topped by Instagram. Instagram can only express the sorority’s brand through imagery, but a chapter’s website allows for so much more. The website provides information about the specific sorority and content about what separates the chapter from other sororities.
Problem:
UCSD Tri Delta’s Vice President of Public Relations is unhappy with the chapter’s current website. The website uses the same template as the national website which leaves no room for personal branding for the UCSD chapter. The pictures are outdated and low quality, and the website is filled with text-heavy content taken from the national website. The only differentiation between the national website and UCSD’s is the pictures. As a result, users like PNMs are unable to identify UCSD Tri Delta’s brand.
Design Process
1 | Understand
Through client and user interviews, we gained insights to identify the needs and create user personas.
2 | Ideate
Through competitive analysis, we established a mood board and creative brief to guide and solidfy our design decisions and criteria.
3 | Prototype
We wireframed and prototyped the website and made necessary changes after a round of user testing.
INTERVIEWS
Client Interview:
First, we interviewed our client Taylor Goto, UCSD Tri Delta's Vice President of Public Relations, to get a better understanding of UCSD Tri Delta and what she invisioned for the website. Through this interview, we hoped to establish the chapter's brand and to figure out key features of the website. The key words we took from the interview are friendship, genuine, and down-to-earth, and our goal was to express these words throughout the website.

After the client interview, my team and I analyzed and interpreted our notes to come up with design ideas for the website. Here are some of our ideas:

User Interviews:
After our interview with Taylor, I conducted user interviews and used non-leading questions to allow for unbiased responses and insights. I interviewed 9 potential users in total which comprised of three sorority members, three students looking to join a sorority, and three parents of sorority members. The interviews I conducted gave my team and I useful insights on the needs of these three separate types of potential users. Using the information from the interviews, we were able to create three unique personas that embody what we believe are the three distinct types of users of the website: the Member, the Prospective, and the Parent.



COMPETITIVE ANALYSIS
After the user research and our analysis of it, my team and I conducted a competitive analysis of competing sorority websites from UCSD and other schools. We specifically chose websites that were had good content and were responsive and visually appealing to give us insight on existing interaction design patterns.

With the analyses finished, my team and I categorized the design features into categories: brand, functionality, content, site architecture, and design and wrote our takeaways from each category as well as design ideas. I found the competitive analysis to be very helpful because it showed what key features the website should have because they were present across all the websites we analyzed. It was interesting to note that some of the websites had similar features even though they weren't best design choices. This made me realize that many of these sorority websites borrow features from other sorority websites because it is common, instead of thinking about the actual functionality of the features. Taking this into account, I suggested that we choose design features that were functional while being on trend.

CREATIVE BRIEF & WIREFRAME
After conducting all the research and gathering all the data, we were finally able to craft our creative brief to present to our client. The creative brief outlined the scope, audience, objectives, personality and tone, key target audience insight, and anticipated problems. It served as a guidleline for both my team and our client to refer to as the project progressed. We would revisit the creative brief every week to make sure that our design decisions aligned with what was outlined, but we allowed ourselves to go against some of the guidlelines if we found evidence from user testing. It was an interative process that ensured that my team and I were creating the best product possible.

WIREFRAMES & MOCKUPS
Paper Prototype
Fig 1. Paper prototype of the mobile version of the website
With the creative brief finished, I created a paper wireframe of the mobile version of the website. This was the basis and skeleton for our mockups. Using the paper wireframe as a reference, I created the mobile version of the mockups on Figma. We decided to design the website mobile first, so the desktop mockup was created after by the rest of my team once the mobile version was finished. I would also like to note that the design of the Events page of the paper prototype does not match the final design. This is because I found the calendar format more difficult to inform users of upcoming events while listing the events out made the information clearer.

PROTOTYPES & HARD DECISIONS
Old Design
Fig 2. Finished prototype with the new minimalistic design
With ideation and analysis finished, my team and I went to work on coding the website. The biggest challenege we faced was that no one on our team was a developer, and all of us had moderate experience working with HTML and CSS. We initially decided to use a template we found online, but quickly scratched that idea and hard coded the website instead.
Old Design
Fig 3. Old design of the website used too much color and too many fonts

We had a different desgin for the website up until four days before the website was due for our class. The old design of the website relied too heavily on the use of a peachy color and the fixed navigation bar took up too much real estate of the screen. In addition, too many different fonts were used which took away from the consistency of the website. After some quick user testing, I scraped the old design and rebranded and redesigned the website to how it is now. From the user testing, I gathered that users found the peach color was too vibrant and distracting. In addition, the footer was too large and took up too much screen space. Taking this all into consideration, I chose a more minimalistic and clean approach to the redesign, using pink buttons and pink headings to accent the whitespace. I removed the login system from the footer because it served no function. The login system is only used by chapter members, but from the user testing, I found that chapter members either didn't know there was a login on the website or they exclusively used the app on their phone. By making these changes, the website looks less cluttered and distracting.


TAKEAWAYS & DISCLAIMERS
As a member of UCSD Tri Delta, I had a different approach to this project compared to my teammates. My hardest decisions were making sure that my design choices weren’t influenced by my personal preferences. I had to juggle with putting aside my preferences, the client’s wants and needs, and the best design decisions. I had to learn to separate myself from the designer and the sorority member because as member, I have personal investment in how the website turned out. Every decision I made I had to make sure that it wasn't from a personal want, but because it was the best design decision that was backed from user research and testing.

As of right now (5/2/18), the actual UCSD Tri Delta website is not updated with the new code. I am working closely with the President and VPPR of the chapter to add in additional content as well as tweak some of the visual designs. We hope to have the new website up and running by mid-June.