GRADWIC
A one-page website focused on brand and social-media integration for a non-profit organization
Overview
Timeframe: 8 weeks
Tools: Invision, Figma, HTML, CSS
Role: UX/UI Designer, Front-end developer
Client Needs & Design Directions
We conducted interviews with our client to better understand current breakdowns and their needs. More importantly we wanted to determine a design direction that would reflect those needs in ways we saw best fit.
-
Most of their outreach is done through Facebook; website should serve as source of credibility for potential sponsors and resources hub for current members.
-
Most salient section should showcase what they do and their core values.
-
Storytelling with mostly images instead of text to showcase past events.
-
Redesigned logo and new color palette.
-
Easily accessible contact and links to social media pages.
-
Some way of putting a calendar to good use, perhaps future events.
Target Audience & User Research
We interviewed people, from diverse backgrounds, who might be potential users to better understand their needs. With analysis of the interview transcripts, we developed 3 personas and possible scenarios/use cases for each.
In order to determine the key features & functionalities we wanted the new website to have, we drafted scenarios for each persona, and use cases for each scenario. Tallying up those use cases (items of interests, navigation tendencies) allowed us to narrow down and/or combine the key features & functionalities.
Competitive Analysis
To ensure that our site is better than or at least on par with competitors, we conducted competitive analysis. We searched for relevant websites and distinguished the good from the bad in branding, functionality, content, architecture and navigation. Doing so not only help us move toward a satisfactory product but also explain to our client where their current solution falls short and how our solution can address the breakdowns.
Presenting our competitive analysis to our client also allowed us to better justify design decisions to our clients and keep their expectations within reasons.
The main functionalities we paid special attention to were calendars and social media integration. We found that sites that use Google calendar often made it look out of place. More importantly, when there are no items on the calendar, it left a negative impression that the organization is inactive; plus it took up so much space to display nothing.
When it comes to social media, most sites had simple icons leading to their social media sites. Some all of the site, others at the bottom. We wanted to make sure our client's site visitors can navigate to their social pages from anywhere on the site. So other than a salient navigation menu, we also decided to make the events calendar lead to their Facebook events page.
Sketches
To turn our research into design elements, we drafted different versions of the site on paper to better visualize them before we create the wireframes. Sharpie and paper is a quick way to visualize the different directions prototypes can take without fixating on an idea too early. Below are the sketches for the mobile version
wireframes
Wireframes & Prototype
After analyzing the functional specifications of the different elements and the interactions they have to afford, we went on to creating low-fi wireframes. We then iterated on them until we had a satisfactory wireframe with which we created the clickable prototype on Invision.
While wireframing, we did not pay attention to colors, fonts or images while focusing mainly on information architecture and functionalities.
For reasons mentioned above, we decided to feed our client's Facebook upcoming events into the site and display them as needed. This saves space when there are no events, and it avoids clutter when there are multiple events.
The resources section which our client requested is a simple accordion menu with hyperlinks to save space especially on mobile. It displays the needed information needed with as little space as possible.
Product & Conclusion
We took our Invision prototype and Iterated on it with minor tweaks after user testing.
Up until this point, we paid less attention to colors, fonts, and UI, but more on site navigation and information architecture (where the site was having the most breakdowns). Now we are incorporating those elements into our prototypes to bring the design to life. With extensive research on the breakdowns, our target audience and architectures of similar sites, we were able to redesign the GradWIC website to better serve its purpose.
Visit the site at gradwic.ucsd.edu (note that we do not maintain the site and the current administrators may have made changes)
