top of page
das mockup_edited.png

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

1

2

3

4

5

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:

Denver Art Society - Affinity Diagram

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".

Screen Shot 2021-08-13 at 15.12.08.png

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:

persona

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.

Denver Art Society - User Scenario

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.

Denver Art Society 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.

style guide

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. 

Screen Shot 2021-08-16 at 15.57.01.png
volunteer home pg
Screen Shot 2021-08-16 at 15.58.18.png
donate
class sign up calendar
class sign up form
volunteer form.png

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

Amazon

Redesign

likewise redesign

Likewise

Redesign

EPA redesign

EPA

Redesign

bottom of page