Artruism
Artruism
Artruism
How can we create a website that aligns with Artruism's design standards while highlighting UC Davis chapter's uniqueness?
How can we create a website that aligns with Artruism's design standards while highlighting UC Davis chapter's uniqueness?
How can we create a website that aligns with Artruism's design standards while highlighting UC Davis chapter's uniqueness?
Role
UX/UI Designer
User Research
Visual Design
Tools
Figma
Client
UCD Artruism
Time
5 weeks, 2021
PROJECT OVERVIEW
Artruism at UC Davis raise awareness, achieve mental wellness, and establish interpersonal connections through art.
Over the span of 4 weeks, our team followed a human-centered design process to design a website that highlights the diverse artistic opportunities within the UC Davis chapter of Artruism.
Artruism at UC Davis raise awareness, achieve mental wellness, and establish interpersonal connections through art.
Over the span of 4 weeks, our team followed a human-centered design process to design a website that highlights the diverse artistic opportunities within the UC Davis chapter of Artruism.
PROBLEM
Artruism remains underrecognized due to students' limited awareness of its diverse artistic opportunities and initiatives. To address this, the creation of a dedicated website for the UC Davis chapter of Artruism becomes essential.
Artruism remains underrecognized due to students' limited awareness of its diverse artistic opportunities and initiatives. To address this, the creation of a dedicated website for the UC Davis chapter of Artruism becomes essential.
How might we design a website that follows the design standards of the original Artruism website while also highlighting the unique elements of the UC Davis chapter?
How might we design a website that follows the design standards of the original Artruism website while also highlighting the unique elements of the UC Davis chapter?
01
User Research
User Research
Following interviews with Artruism's club presidents to understand their website requirements, our team brainstormed and decided on the five main pages of the website: landing page, about us, art gallery, events, contact us.
Following interviews with Artruism's club presidents to understand their website requirements, our team brainstormed and decided on the five main pages of the website: landing page, about us, art gallery, events, contact us.
Given that Artruism is an art club, our primary attention was directed towards the art gallery page, anticipating that individuals interested in the club would likely navigate to this section.
Given that Artruism is an art club, our primary attention was directed towards the art gallery page, anticipating that individuals interested in the club would likely navigate to this section.
02
Iterations
Iterations
As we progressed from the low-fidelity sketches to the high-fidelity designs, we encountered significant design choices that contribute to the overall evolution of the design, ensuring a more polished and effective outcome.
Landing page
We considered two concepts for our landing page and favored the one on the right. The preference was due to its minimal use of call-to-action buttons, aiming to provide a less distracting experience for viewers.
As we progressed from the low-fidelity sketches to the high-fidelity designs, we encountered significant design choices that contribute to the overall evolution of the design, ensuring a more polished and effective outcome.
Landing page
We considered two concepts for our landing page and favored the one on the right. The preference was due to its minimal use of call-to-action buttons, aiming to provide a less distracting experience for viewers.
Art Gallery
We considered two concepts for our art gallery page and chose the left design due to its organizational structure, featuring consistent shapes for each picture to mitigate cognitive overload.
Art Gallery
We considered two concepts for our art gallery page and chose the left design due to its organizational structure, featuring consistent shapes for each picture to mitigate cognitive overload.
Calendar
We also considered two concepts for the calendars page and favored the left one for its tidy layout and the functionality to showcase event details on the side when users click on an event.
Calendar
We also considered two concepts for the calendars page and favored the left one for its tidy layout and the functionality to showcase event details on the side when users click on an event.
03
Design System
Design System
Upon thorough examination of the original Artruism website, we established the Design Standards, incorporating the original website's pink colors while introducing subtle hints of purple to convey the distinctiveness of the UC Davis chapter.
Upon thorough examination of the original Artruism website, we established the Design Standards, incorporating the original website's pink colors while introducing subtle hints of purple to convey the distinctiveness of the UC Davis chapter.
04
Final Designs
Final Designs
Landing Page
Landing Page
Landing Page
Introduces Artruism and the goals of their club.
Introduces Artruism and it's goals as a club.
About Us
About Us
About Us
Shows their board members.
Shows their board members.
Art Gallery
Art Gallery
Art Gallery
Showcases commissioned art done by Artruism artists.
Showcases commissioned art done by Artruism artists.
Calendar
Calendar
Calendar
Allows users to view upcoming events, sign up for them, and become a part of Artruism.
Allows users to view upcoming events, sign up for them, and become a part of Artruism.
Contact Us
Contact Us
Contact Us
Form to reach out with any questions or inquiries.
Form to reach out with any questions or inquiries.
05
Conclusion
Conclusion
CHALLENGES:
In the development of the Artruism website, our primary challenge revolved around maintaining the stylistic coherence between the UC Davis chapter's website and the original club design.
REFLECTION:
Taking on my first website design project and diving into Figma for the first time has been quite the adventure. Along the way, I picked up plenty of Figma shortcuts and learned how to make designs more user-friendly. Huge shoutout to my awesome team—Sally, Jackie, and Victoria—for their constant support throughout this project!
Let's Build Something Impactful.
awu.
© 2024 Annabelle Wu
Let's Build Something Impactful.
awu.
© 2024 Annabelle Wu
Let's Build Something Impactful.
awu.
© 2024 Annabelle Wu