The Ins and Outs of the Design Process: Oxy Dance Pro Redesign
Oxy's wonderful Computer Science and Cognitive Science Professor, Justin Li, presented his students with the task of redesigning the website of an organization (on- or off-campus) as a mobile app. I am one of those students, and, let me tell you, this was one of the most engaged I have ever been in a project. Let me tell you how I did it.
As soon as we got the assignment, I immediately thought about the poorly designed website that the Occidental College Dance Productions Club uses as its main platform. The main points of tension for me was their application of drop-down menus, what they decided to put in them, and what content was on the page. Sometimes it made sense, and other times, not so much. One of the aspects I had already pushed them to change was to put the "Dance Drop Form" under their existing "Contact Us" tab rather than the "Get Involved" tab. "Get Involved" doesn't necessarily indicate "Drop Dance" or "I wanna get less involved."
Right?
Well, yeah. It's not very intuitive for obvious reasons. That ended up being our focus for the app redesign, to make the experience more intuitive for the users of the app, members and non-members alike. More specifically, this is the person we pictured for the redesign:
After deciding on a demographic, we got to brainstorming. What do we put in the app that would help the user achieve this goal? Because there was never any time for us to meet formally, we created a Google Doc that we could add to at our leisure.
Some of the elements I pitched are as follows:
Right?
Well, yeah. It's not very intuitive for obvious reasons. That ended up being our focus for the app redesign, to make the experience more intuitive for the users of the app, members and non-members alike. More specifically, this is the person we pictured for the redesign:
A student who is involved with Dance Productions and is one or two dances. A few weeks into rehearsal, they get news that there is a family event in March, the month of our final show, and must check the calendar for the exact dates. Sadly, after checking the dates, the student discovers that the family event overlaps with the dates of the show and that they must drop their dance(s). Being the good dancer that they are, they know that they must 1) contact the Dance Pro Executive Board about dropping, (2) contact the respective Choreographers of those dances to let them know they are no longer coming and (3) fill out the Dancer Drop Form found on the website.We realize now, at the end of the process, that this is a super specific target demographic, but we were driven by the assignment requirement of redesigning at least 4 pages from the site. Sooo, we kinda crafted a story around the pages we wanted to redesign,
After deciding on a demographic, we got to brainstorming. What do we put in the app that would help the user achieve this goal? Because there was never any time for us to meet formally, we created a Google Doc that we could add to at our leisure.
Some of the elements I pitched are as follows:
- A search function to easily find information
- A central calendar with important dates
- A scrollable list of important/relevant events (ie. shows, fundraisers, etc)
- A full calendar (month view) showing all of the information for that month with the ability to click through the months and see what's going on
- A Burger Menu with the sections from the website as a list of options
- An internal browser to fill out the various forms in-app or a way to fill them out in-app
- A message board/chat so that the users can communicate with choreographers and executive board members
- A contact page with the emails and phone numbers of the choreographers and E-Board members. Upon clicking the image of the person you wanted to contact, their contact information (phone number and email)
In the first iteration of the design, I included pretty much all of the above while trying to mirror the original website. Here are some screenshots of the wireframe:
I liked their original home page because it provided some nice "About Us" information when you first entered the site. Most of the site I redesigned to help guide the user to their desired location. I used lists of clickable buttons that would bring them to the page that contained all of the necessary information. I liked this because there isn't a lot of information that the user has to sift through before reaching their desired link. Also, it organizes the information in an intuitive way. All of the information for new dancers, choreographers, and media services are behind their respective buttons.
For the Calendar, I decided to go with placing the dates of the main show at the top of the page with a scrollable list of upcoming events below it. The idea here is that Dance Pro is an organization that thrives off of the attendance of both its members and its community. That date should be at the top so that when people come to the calendar, they are always reminded about when it is. Then the next upcoming event would be right below it, so if their plan was to see what was happening soon, it wouldn't bee obstructed. This continued my effort to try and reduce the amount of information that was presented to the user and make it really easy to find the information that they are looking for.
Lastly, the E-Board and Choreographer contact page. I created tiles for each of the members that originally opened a pop up window in app that showed the SMS and Email links for that person. I ditched this idea for privacy reasons and had the tiles open the native email app and fill in the "To:" section. This does a few things. 1) it removes the need for the person to remember the email so that they can type it in themselves, 2) the grid with pictures gives the user the option to look for the person based on their name, face, or position reducing the memory load on the user, and 3) I don't really know if there's a third I just like having three options. Anyhow...
At this point, I was pretty happy with the design ideas I had, but that was soon to change.
After creating the first iteration wireframe with InVision, I had one of my friends in Dance Pro perform a user test for me. After laying out the expectations, I gave them the persona I wanted them to assume and gave them step by step instructions watching as they performed each step.
It went pretty well. They were able to find all of the information relevant to the task and did so without any hiccups. The only real feedback I got was that the app home page should be a list of all of the pages that the user could visit instead of starting with the About Us tab which might not be relevant to the task at hand. Why of course! My whole motivation for this redesign is making it easier on the user to find their information, so why add an extra step? I think I was really trying to make the app feel like an extension of the website, so I overlooked the idea that the first page could just be a list of menu items.
Now for the high fidelity design (my favorite part).
Not much changed from the first design to this one, minus the home screen. I didn't do more than one iteration, because I felt that I should only change it once per user test.
Speaking of, the second user test went a little differently than expected. I gave the same outline of expectations and gave them the same information as the first user test, however, when I asked them to drop their dance, they went to Contact Us, instead of Membership Info as expected. Otherwise, the test went well.
The unexpected move at the second step might be an effect of the user being an E-Board member and knowing the exact order and details about dropping a dance. To address this minor deviation from the expectations, maybe the tab could be renamed something different, or the Add and Drop forms can be put under Contact Us, like I suggested for the website. I'm not quite sure how else I might be able to fix it, but maybe inspiration will come from other apps, some time away from the project, or both!
Lastly, at the end of all this, I realized that the app design was more comprehensive than we thought. I kinda got carried away and designed the entire app and ended up focusing on giving the users all of the experiences that they might find on the website. Oops... I might have done a little more work with the design than I needed to, but hey, at least it looks good...right?
I liked their original home page because it provided some nice "About Us" information when you first entered the site. Most of the site I redesigned to help guide the user to their desired location. I used lists of clickable buttons that would bring them to the page that contained all of the necessary information. I liked this because there isn't a lot of information that the user has to sift through before reaching their desired link. Also, it organizes the information in an intuitive way. All of the information for new dancers, choreographers, and media services are behind their respective buttons.
For the Calendar, I decided to go with placing the dates of the main show at the top of the page with a scrollable list of upcoming events below it. The idea here is that Dance Pro is an organization that thrives off of the attendance of both its members and its community. That date should be at the top so that when people come to the calendar, they are always reminded about when it is. Then the next upcoming event would be right below it, so if their plan was to see what was happening soon, it wouldn't bee obstructed. This continued my effort to try and reduce the amount of information that was presented to the user and make it really easy to find the information that they are looking for.
Lastly, the E-Board and Choreographer contact page. I created tiles for each of the members that originally opened a pop up window in app that showed the SMS and Email links for that person. I ditched this idea for privacy reasons and had the tiles open the native email app and fill in the "To:" section. This does a few things. 1) it removes the need for the person to remember the email so that they can type it in themselves, 2) the grid with pictures gives the user the option to look for the person based on their name, face, or position reducing the memory load on the user, and 3) I don't really know if there's a third I just like having three options. Anyhow...
At this point, I was pretty happy with the design ideas I had, but that was soon to change.
After creating the first iteration wireframe with InVision, I had one of my friends in Dance Pro perform a user test for me. After laying out the expectations, I gave them the persona I wanted them to assume and gave them step by step instructions watching as they performed each step.
The steps:
- Find out when the main show is
- Drop your dance
- Contact your choreographer
- Contact E Board
It went pretty well. They were able to find all of the information relevant to the task and did so without any hiccups. The only real feedback I got was that the app home page should be a list of all of the pages that the user could visit instead of starting with the About Us tab which might not be relevant to the task at hand. Why of course! My whole motivation for this redesign is making it easier on the user to find their information, so why add an extra step? I think I was really trying to make the app feel like an extension of the website, so I overlooked the idea that the first page could just be a list of menu items.
Now for the high fidelity design (my favorite part).
Not much changed from the first design to this one, minus the home screen. I didn't do more than one iteration, because I felt that I should only change it once per user test.
Speaking of, the second user test went a little differently than expected. I gave the same outline of expectations and gave them the same information as the first user test, however, when I asked them to drop their dance, they went to Contact Us, instead of Membership Info as expected. Otherwise, the test went well.
The unexpected move at the second step might be an effect of the user being an E-Board member and knowing the exact order and details about dropping a dance. To address this minor deviation from the expectations, maybe the tab could be renamed something different, or the Add and Drop forms can be put under Contact Us, like I suggested for the website. I'm not quite sure how else I might be able to fix it, but maybe inspiration will come from other apps, some time away from the project, or both!
Lastly, at the end of all this, I realized that the app design was more comprehensive than we thought. I kinda got carried away and designed the entire app and ended up focusing on giving the users all of the experiences that they might find on the website. Oops... I might have done a little more work with the design than I needed to, but hey, at least it looks good...right?
Comments
Post a Comment