This was my first real project in a big group, which consisted of 8 people and was done over the course of two semesters at the University of Applied Sciences and Arts Northwestern Switzerland FHNW. Our client was an internal employee at the FHNW, which was very useful for us as we could schedule meetings right at the university. Another interesting aspect of this project was, there was another group doing the same project, because the client wanted two groups working on it and then combine the best parts of each project into one, which meant we had competition from the start.

Goal

The goal of this project was to simplify the clustered backend interface of Magento CMS, so that a person without much computer knowledge could easily organise his shop. In addition to that the emphasis was on handling of adding, editing and removing a product. Further the set up process for the shop should be simple to do and sort of serve a out of the box experience.

My Role

The way these projects worked was everyone in the group got a different role and after a semester the roles would switch. There are 7 roles to occupy and since we had 8 people in our group one role had to be covered by two. We agreed in our group that this role should be the usability manager as this project has a big focus on usability. So I chose to be one of the usability managers, because this was the field that interested me most and where I felt I could contribute much. And after the first semester I switched to test manager.

This wasn’t the only responsibility I had, we also had to all code on the software itself as that was a requirement of the university. This meant I had additional duties of coding certain parts of the software, which in turn meant I needed to learn a new programming language. In this case it was PHP that we all had to learn.

Process

Since there were two usability managers, we had the advantage of splitting the work between us two, but mostly we worked together on most of the artefacts. Also having direct feedback while working on something was great to have.

We started with creating a survey to get some data to create our persona, but half way through we remembered that there is also another team working on the same project. So we thought it might be better to create the survey together with their usability manager to reduce the risk of forgetting a question, but more importantly to not confuse the respondents with two similar surveys. With the survey created on SurveyMonkey, we sent it out to potential interested parties and waited a few weeks before we were ready to collect the data. In between we already started working on the persona with just assumptions of what we thought the end user of our product would look like.

When we had enough data to work with, we cleaned the data for erroneous replies and started creating our persona, which would be our primary persona. This persona was then presented to the entire team during a weekly team meeting, so that everyone was on the same page and knew who we were developing a software for.

After we had our persona we were ready to create some wireframes, this is where my colleague and I shared the work load. He went on to create the wireframes for the frontend and I started creating the backend wireframes. To create these we used the wireframing tool Balsamiq and as neither of us had used that tool before, we were a little worried that it will take some time to learn a new tool when we already had a lot of other things to do. However once we started the tool, it was all very easy to use and all the features were intuitive, which allowed us to create more wireframes than initially planned.

Once we both were finished with the wireframes, we sat together and gave each other feedback on how we designed the screens. We discussed what our ideas where and why we designed certain things that way. Then we made sure that both frontend and backend wireframes looked similar so that one could see that it all belongs to one software.

Then to show these wireframes to the team, we created a flowchart, but only for the backend as that was more important to our product than the frontend at that time. Also we agreed in the team that we would only offer one basic theme for the fronted and adjust that to our needs, because the user could just switch to any theme Magento is offering.

We then presented this in a team meeting and everyone liked our ideas, some even gave really good feedback, which we worked into the final version. Now everyone knew what they’re developing and could paint a picture.

After we had our wireframes, it was time to create some prototypes. We looked around what tools we should use for that and then a professor mentioned that we should just do in Balsamiq and there was no need for creating the wireframes again as they were good in quality. So we used Balsamiq to create a click dummy prototype, which was actually very easy to do as you could just say what should happen when someone clicks somewhere.

This prototype was then tested with some team members parents who were considering setting up their own shop and who also were responders of the survey. The general feedback was good and we’ve noticed they could easily navigate through all pages. After the test we showed them the live version, they liked it, however almost all of them said that there should be more colors, since we had everything just plain black text on a white background.

This is something we haven’t even considered until to that point, so we were glad that we showed them how it would look like in the final version. So we decided to offer some themes and to create these themes, we created mood boards. We chose 3 topics: farmer, selfmade and handmade, who would be the potential users of our software. However, when we extracted the color palette from color.adobe.com we noticed that all of them looked the same and that the palette wasn’t actually any good.

As this was around time the first semester was ending, we had to drop the themes and focus on more important deadlines, such as finish some features, which were vital for the software. After the first semester ended the roles switched and I chose to become the test manager, which meant I was responsible for testing the code and had nothing to do with the usability anymore. However when it was time to do an usability test, which was done with eye tracking technology, I wanted to be a part of it. So I helped setting up the tasks and was actually interesting to witness a real usability test for the first time.

Lessons Learned

As this was my first project in a big group and also with a real client, I was nervous at first, however everything turned out well. What made me really happy was that the client chose our final project over the competition. We also got a lot of compliments for our good communication with him.

I learned a lot with this project, but most importantly team work and applying usability methods to an actual project. I was fortunate enough to get a great team, who would help each other out and just be very productive. Also I made some friends with whom I still talk to this day.

The tools I used for this project were very easy to use and now I can use all those tools more freely. Also coding in a group was something I’ve never done before and using Github for that was really great, which also showed me how powerful and useful Github is. Most of the code was written in pair programming and at first I didn’t like that someone was always watching me code, but the more we did it, I noticed how helpful it can be to avoid silly mistakes way earlier than later and get frustrated trying to find the error.

After learning about usability in other courses and actually applying the things I’ve learned to a real world project was really exciting and fun to do. This also confirmed that this is something I want to do professionally after my studies.

Here are some wireframe to development screens, but note that this isn’t the final version as some screens changed slightly during the second semester.