UX Project - Research, Ideation, Design & Iterations

Introduction

As part of my course "DEI626: User Experience Fundamentals and User Research", my team and I were presented with the complex problem that many professionals face, that of getting content for their websites. Our job was to figure out a way to provide an easy and simple way for them to get content and communicate with outside content providers. This was a real-life project with a big client and so because of the NDA signed, there are some pieces of information that cannot be revealed, such as the field and detailed solution, but I am explaining the process followed and what I learned.


Research

As with every project, my team and I started the first phase of our project with research. It was essential for us to understand the field and the people working in this particular field. We carried out interviews with some of them and also did some surveys, secondary research and competitive research to really get a grasp of their average work days and their pain points and frustrations. Based on this research, we were able to come up with three distinct personas to help us shape up the solution and design for our target audience.

The three personas developed. Some information is hidden as part of the NDA.

Ideation

After we had a clear picture of what our target audience is like and what their pain points are, we started brainstorming about possible solutions that could help solve those problems and satisfy the client's requirements at the same time. Constant communication with the client was key throughout this process to make sure that all sides were satisfied, but without making the user experience worse.

We used whiteboards and stickies in order to figure out the elements and features that needed to be included in our solution. Once the solution and the flow was determined, we went on to design a detailed experience map. This map included the journey that the user would take in each phase of their usage of the product. We were able to figure out the pain points, the frustration points and determine what they are doing, thinking and feeling at each point. That way, we could identify the points that would make the user frustrated or unhappy and design the best solution that would make it easier for them to use the product.

Design & Iterations

The next phase of the project, was to actually start designing the layouts and visual appearance of our solution. We started off by sketching rough wireframes on paper. Each team member took different parts of the solution to design and when all the initial wireframes were done, we all met together and presented our work to the team, getting feedback and comments along the way. After converging with my team and made changes to our initial designs, it was time to translate those designs in digital form.

For the digital wireframes, we used Balsamiq:

One of the wireframes that I designed on Balsamiq. Very rough and simple, just to communicate the idea and content of the page.

The sketch on paper that preceded the digital wireframe.

Testing #1

With the digital wireframes ready, we were able to start testing our initial solution. We did a first usability test with some of our classmates and professors. The outcomes of this usability test were mainly two. We confirmed some of our initial assumptions when designing the first sketches and also discovered some pretty useful points that were brought up by our test users while interacting with the wireframes. So now it was time to incorporate the feedback we got and move on to the more elaborative visual designs.

Visual Design

The visual design phase of the project was mainly done in Photoshop. Basing our work on the previous testing that we had done and the task flow and content hierarchy that was decided early on, one of my team members started designing the interface on Photoshop, while the rest of us were guiding him through whiteboard flows and content iterations, helping with the details of the visual representation when needed.

Testing #2

After a lot of work designing the more elaborative designs, we imported all the pages of our solution to InVision and carried out a second usability testing, where we brought in some of our classmates and observed them while using our prototype. After this testing session, we were left with some really good observations and feedback that we then incorporated into our final prototype, which we went on to present to our client at the end of the term.

Key Takeaways

1. Communication both internally with the team and externally with the client and stakeholders is the most crucial part of a project. When that channel is constantly open from all sides, then work becomes much more easier and everyone is on the same page, eliminating any misconceptions or misunderstandings.

2. Testing is essential, not only in the end after the whole concept is laid out, but constantly, every time there are new additions and iterations. Right from the beginning, from the first sketches and wireframes, the input from potential users is much needed in order to take the right direction from the start.

Note: My team's solution ended up being chosen by our client, among the solutions of the whole class's teams.

Using Format