DAS Responsive UI Redesign

Background

For my bootcamp, our cohort was given the assignment to choose a nonprofit organization to redesign its RWD and UI. Our team worked together in the research and design with one of us being a project manager to practice an agile scrum project. We chose the Denver Art Society as we felt their mission was empowering to other artists and could benefit if more people knew about them.

3 Person Team

- Project manager

- UI Designers

Role

- Project Manager

- UI Designer

Tools

- XD

- InVision

- Trello

- Miro

The Process

Research

Define

Ideate

Test

Develop

Research

We began by conducting a heuristic evaluation of the current desktop and mobile site as well as a competitor analysis and 3 interviews, including a stakeholder interview, in which we discovered what is important to the DAS, artists and visitors.

From our interviews:

After talking to the manager of the Denver Art Society, who also had designed the current site, we learned that she was not wanting to remove the blackboard but instead keep it and add a link to list out the information more clearly for legibility. She also asked for us to highlight the donations and the classes but we felt like adding a section to sign up for volunteering was also important as an artist needs to volunteer in order to rent out a studio. She also shared she did not want the website to feel "high-class" or only for "fine-arts".

Two pages in the current DAS website.

Define

Problem

We have observed that the website is not currently user-friendly as it shows signs of unresponsiveness, poor formatting, and the overall design can be improved.

How might we... improve the Denver Art Society website so that new and current visitors are successfully getting involved within the local arts community in Denver?

Meet Cynthia:

User persona, Cynthia, was created based on the answers of our interviews and assumptions on an aspiring artist.

User Scenario

Continuing to use the collected research, our group created a user scenario to visually lay out how the user might interact with this feature, and thus create a more intuitive user experience while providing some background information as well as goals and opportunities for this redesign.

Above: User scenario

Card Sorting

We then completed card sorting to ensure a more user-friendly navigation for any incoming visitor or artist. At this point we narrowed down the top navigation items. Then we synthesized the results and came up with a final sitemap.

Above: updated sitemap

Ideate

Style Guide

I began the design process by defining a style to abide by. I enjoyed the blue and green hues originally determined by the EPA but wanted to deepen them to provide a serious tone and keep the focus on the information rather than the colors.

Lo-Fi Prototype

We began by sketching the general layout of the pages we wanted to focus on redesigning in InVision as it allows for collaborative work. We specifically wanted to remove the centering of all items throughout the page and include a volunteer sign up form as it is currently missing from the website.

Test

Usability Testing

Testing for usability is vital for the improvement of this design so we tested the lofi in order to continue our design process. We chose to do guerrilla-style usability tests with 2 participants with which we were able to refine what users found useful and what could be improved upon. The results of the usability testing were recorded to analyze later on.

Key Feedback

Positive

Signing up for classes was intuitive and fast
Didn't take the users many clicks to complete a task

Negative

Add a phone option in the volunteer form and the user can choose their preferred communication method

Develop

Final Product

This is the final product after the iterations with the user in mind; this keeps in consideration the users of the website as well as maintaining a clean, organized and human feel.

Takeaways

Challenges

Having a client was challenging as it wasn't just the consumer's and our team's ideas of how to change the website. We originally wanted to discard the blackboard but after hearing the client's intentions behind uploading the blackboard at least once a week and the involvement of current members, we realized we had to keep it and work our design around it.

It was challenging to minimize the blackboard design for a mobile site, but we asked what we could keep in the home page and the rest of the information was to be shown once a user clicked on the design. As we have seen, designing a responsive web page is very important for those who wish to navigate pages via their smartphone.

For the Future

Get feedback from current DAS members and create a new persona to focus on their pain points

Polish up the “About Us” section of the site to maximize brand clarity

Iterate the chalkboard design to maximize site aesthetics while still being familiar to members

Iterate mobile and desktop versions to be more consistent and continue to solve unfound pain points within both

View Other Case Studies

Amazon

Redesign

Likewise

Redesign

EPA

Redesign