Our Design Process
An overview of how we made our first big project (re-designing the photo gallery) into a success.
Photo galleries are quite popular on The Globe and Mail website, so we had to make sure that people’s experiences with it were nothing but perfect. The old photo gallery was lacking a bit, so we decided to change it up and design something better. Being able to get the new photo gallery up and running on the mobile website was roughly a four step process (plus user testing), which is outlined below.
To come up with a very rough idea of how we wanted the photo gallery to look, we made some low fidelity (basic) wireframes. This helped us get an idea of how we wanted our images to be placed, where we wanted the descriptions, where the share icons were to go, etc. Here at the lab, we often draw out wireframes on a whiteboard or on a piece of paper. It’s a simple task, but is also the most important since it’s the very first one in the design process. The next step is making the wireframes look more realistic.
2. Visual Design:
We built off of our wireframes using Sketch, and figured out how we could make the photo gallery look its best. In the visual design process, we decided what kind of fonts we wanted to use and which colours were most appropriate and appealing. Essentially, we created a more detailed, better looking wireframe so that we could go to the next step — adding functionality to it.
3. InVision Prototype:
We used InVision to bring our high fidelity wireframe to life by making our components clickable. We made it possible to click on the gallery images, swipe through them and exit out of different windows. Once this is done, it becomes very clear what works and what doesn’t. Once we finished this prototype, we began to do some initial user testing on it.
4. React Prototype
We coded a second prototype ourselves using React.js so that we could see how it would function if a developer were to make it (rather than the InVision software). We figured out what sort of limitations existed, and made small tweaks in how the photo gallery looked and functioned. We then tested this second prototype and gathered the feedback that we got on it. As you’ll notice below, this prototype looks strikingly similar to the wireframe above — this usually doesn’t happen. There are often a lot of differences between initial wireframes and the final prototype, but I guess we just got lucky!
People often underestimate how long it takes to re-design something and get it up and running on the website. This whole process took about 2 months (which seems like a long time) and it went quite smoothly! What took the longest was making sure that this improvement would appeal to our readers. We had several usability testing sessions during our Feedback Fridays and we got a lot of great feedback from people. Because the photo gallery is a relatively simple thing, we didn’t get too many conflicting views on its appearance and functionality. Most people agreed on what they thought worked well and what didn’t, so this made it very easy for us to come up with a final design.
An example of something that came up often in our usability testing, was that people were unaware that they could click the image and it would then turn into a different gallery view, where they could swipe through the other images. We debated whether we should just scrap that additional function and keep it in a list view, but we eventually decided that it should stay. Sometimes it’s a good idea to let users figure things out on their own, and we thought that was appropriate in this situation.
Overall we’re very happy with what we’ve created and the feedback that we’ve gotten back on the new photo gallery is phenomenal. This was our first big implementation and we’re hoping that all of our projects in the future go as well as this one. As the UX lab gets older and more experienced, we’re figuring out ways to do things more effectively and we’re also getting to know our readers better. It looks like it’s only uphill from here.