Project Context
Below is a summary of the project
Project
The project timeline was Oct 2019 – June 2020. We launched May 30th, 2020.
Client
The “client” in this case is really the Arts Department at University of California, Irvine. I was hired by the Marketing Director to work with the Claire Trevor School of the Arts (CTSA) on various projects. But, as soon as I became involved in this redesign project, it became the majority of my role in the department.
Product
The Claire Trevor School of the Arts Website.
Thousands of visitors every week across various devices. The website is used daily by students and arts department alike.
Team/Role
Our team was small, only 3 people, so each of us played a crucial and multifaceted role. One member was engineer/design, one was producer/manager, and I was UX/UI. The role I played is best summarized, perhaps, in list form. My role was to:
- Understand & advocate for users & stakeholders.
- Identify and create appropriate user research and testing methods.
- Create mock-ups and reports to direct, and ensure quality of, visual and user experience design.
- Help structure the development pipeline while unifying the creative vision by acting as liaison between client and developers.
Success Metrics
Our Metrics for success were clarified by communication between the client and the design team. We had limited resources, so we had to figure out what was efficient and effective. I can summarize our success metrics like this:
1. Modernize visual and user experience design across website
2. Measurably improve usefulness and usability
1. Modernize Visuals: Process Info
Early in the project, our development cycle was disconnected. Upon realizing this, I advocated to implement a Lean UX cycle. With our small team, this would allow us to iterate quickly through focusing our efforts and opening up the right kind of collaboration.
Here is an infographic on our cycle and the methods within each phase:
Through this cycle we were able to iterate quickly. We found our goals for this success metric, and built an “ALPHA” version for feedback. Here is the look:
Validation is key. For this success metric, I implemented feedback channels into the design process that validated our designs through qualitative data. Here are some direct quotes from our early feedback surveys:
“I think visually, the homepage is attractive and user friendly.”
“It’s a nice clean look that is similar to other pages across campus.”
“Feels contemporary, easy to access information, the video and larger images are really engaging…”
– Quotes from various survey participants
2. Measurably Improve UX
How did we measure UX, and how do we know it improved? Here is a summary of what we did and the results.
Measuring the original website was an important aspect of my approach. It helped us see opportunities for our new design direction and gave us validation after the fact through data comparison.
To measure the original website design we used these methods:
- Cognitive Walk-through: to identify missing or unclear tasks.
- Heuristic Evaluation: A cheap and quick way to effectively spot potential design issues. This is a go to method for many projects, typically coupled with Usability Testing.
- Usability Survey: We released a “PRE-BETA” survey to gather qualitative and quantitative data from users about the original design. We wanted to hear from users themselves what they felt needed fixing.
To measure the new website design we used these methods:
- Competitive Analysis: We looked at current market trends to help inform our design and align with mental models.
- Early Access Releases: We tested the design via an Alpha release and BETA release, which helped us gather feedback (and fix bugs) from a limited- convenient- user group.
- User Testing: I led the team through two user testing sessions. Half way through our development cycle, COVID-19 hit, and we had to do our final round of testing remotely. This was a first for me but it worked out better than I expected.
- We implemented the “System Usability Scale“ to measure usability
- Led users through “Task Scenarios” and then followed up with an “After-Scenario Questionnaire“
When testing the new website against data from the old, we found the new design had jumped more than 20 points on the System Usability Scale.
Through Usability Testing, we found unexpected high-priority design opportunities. Users wanted to use the website’s calendar, but found it hard to use.
The calendar redesign went from stretch goal to top priority. We launched with a redesigned calendar:
A Challenge and A Solution
Here I talk a bit about one of the interesting challenges I faced and how my team and I overcame it.
The Challenge:
Smooth Out the Development Process
When I came on, the development team for the project was a single web developer. This lone ranger was taking day-to-day design direction from the Marketing Director of CTSA, who was in essence the client. The Marketing Director was frustrated because, although she knew what she wanted, she didn’t know how (or have time) to say it (her words, not mine). Seeing this motivated me to improve the development process.
The Solution:
I implemented a Lean UX development cycle
I created a cycle of build, feedback, evaluate by establishing our roles. The developer would build a design, marketing would provide feedback on that design to me in client meetings, and I would combine feedback with research and evaluation methods to identify design opportunities. I would then pass my design report and mock-ups off to the developer, restarting the cycle. This worked wonders.
I organized the flow of design feedback
To ease the flow of feedback and allow our developer to prioritize, I asked the marketing team to hold off on any ad-hoc critiques, and for us to instead review designs in client meetings before I send off my report. By meeting with the client before sending feedback to the engineer, I was able to make sure everyone was on the same page and relieve tension from both parties.
I met with the Marketing Director 2+ times a week
I did this to ensure what I implemented above was working at every phase. Part of what was happening was a scenario of cross departmental communication. Because I have experience working on both sides, and am well versed in the development life-cycle, I was able to improve the flow of communication by assuming the role of a liaison.
The result was a smoother day-to-day design process, a huge relief from stress for the Marketing Director, and a significantly accelerated development cycle that allowed us to reach our goals by our deadline.
Outcome
Here is how the project finished- thanks for reading!
We launched at the end of May and the website can be viewed here. Our redesign is seen by all UCI Arts affiliates and is the primary website for the department.
We launched despite having to readjust in the late-game due to COVID-19. The small team we had was a group of absolute rock-stars and we all enjoyed the hell out of working together. It was even more fantastic for me just to be able to be involved in supporting a cause, and a community, so near and dear to me. Shoot, to attend a University filled with qualified and brilliant students who all study Human-Computer Interaction, and then be the only one chosen to be a part of this high stakes project just felt like an honor. I gave it my all and we kicked butt.
My Key Takeaways
Remote Usability Testing
Remote usability testing, the kind I would normally do in a one-on-one usability interview, was not something I had done before. It was exciting to go through the process of adapting this methodology on a whim like that and coming out the other end successful. There are certainly things that I would do differently, but I am happy I had the experience of testing these methods in an all remote environment.
The enjoyment I find in communicating on collaborative teams is a serious asset
I am continually told by my colleagues that I am an exceptional communicator. My love for collaboration and fair, honest, and open communication comes from childhood experiences. I was reminded in this project of how valuable this is when trying to kick-butt on creative teams.
My leadership growth and potential
I used to teach Martial Arts in my late teens- early twenties. I really loved leading. It’s something I am always looking to improve on and I am reminded in this project that my communication and collaboration skill set coupled with my experience and knowledge of the production pipeline make me a capable and passionate leader. I am looking forward to new leadership opportunities!
Arjuna Leri 