Week 4 @ Clearleft

The final week of our design sprint was all about refining and polishing our ideas and testing them with users. My first task was to develop the profile page wireframe I’d created last week and reformat it for a smartphone screen. One of the first elements I started thinking about was how to split it up logically across multiple sections and how to navigate to these sections. I decided the account details and change password sections could be collated under My Account easily enough and the booked trips and past trips could be combined into a My Trips section. The third chunk was a little more tricky, collating the specific future trip plans (unbooked) with the general wishlist items and saved searches. I considered splitting these into separate sections but eventually decided to group them into one area called My Planner. I tried a couple of different options for the navigation too, which you can see below:

The first two navigation options I decided against as they seemed like they were navigation that related to the whole app, rather than just this profile section. The buttons version on the right seemed to work a little better and seem more localised to this section so I went with that and placed it at the top of the screen as the My Planner page content would have pushed it out of sight. I also added an avatar option here, which could be pulled in automatically from Facebook if a user logged in through their system.

In the My Planner section I tried to differentiate between the sections clearly by using the labels My Wishlist and My Future Plans but how these two areas relate to each other was still not clear so needed some further work. I discussed this point with the wider group and we decided that the additional functionality within the My Future Plans section was not necessary for this project, so we could simplify that to work in the same way as the wishlist and just save activities or packages. I think using images for the wishlist works well and provides an enticement to revisit those activities or holidays so I’m happy with that element. For my next iteration, I created the My Trips page and added grey border boxes around different sections to visually group the content more clearly. I also combined the future plans and wishlist sections into one area called My Wishlist:

I think the My Wishlist page works better now but is still not completely clear what the difference is between the sections. I think the past trips map on the My Trips page works pretty well but the layout of the booked trips is a little text-heavy. After seeing the development of some of the other design work I realised at this point that the grey border boxes didn’t suit the style of the other pages so I decided to remove them. Here’s my next iteration:

At this stage I realised there was an existing design pattern in the style guide that I could use for the navigation, so I dropped that into my screens. I also tried to space the elements out a little more and use larger images to be more in-keeping with the other screens that the team were developing and the Virgin Holidays style in general. Here’s my next iteration:

After further discussion with James Bates, we decided to have the images expand downwards on the screen rather than be viewed on a sideways swipe, so I adjusted the layout to incorporate that approach. I also made the X buttons larger as they were too small for a finger to tap in the last iteration, and I tightened up the booked trips section. I also added a share function and updated the action buttons to be more in line with the digital style guide. It’s been really interesting to use a real client’s style guide as a reference point for my design work as so far on this course I’ve created all my own brands and product ideas. This has been a really useful experience and will no doubt echo the experience of being a UX designer in the wild more closely. Here’s my final version of these screens:

I brought the saved searches a little more in line with other pages where saved searches would be shown by removing the grey background. I added numbers to the wishlists to try and make it a little clearer that they are different variations of the same thing. Overall I’m pretty happy with how these screens are looking now and the team had no further changes to suggest at this stage.

Next I looked at how to save things to the wishlist. I mocked up a few different versions of the button at different points on the screen and looked at how to display the popover boxes in line with the Virgin style.

I preferred the simple heart button, but the larger button at the bottom of the page could also be useful in some instances, so I refined the both versions and tweaked the text. I added a + sign before the name of the wishlist to provide an affordance that those links would add the item to that list. We decided at this point to enable the wishlist to be saved within the browser just using a cookie, so logging in wasn’t essential in order to view it. I added a little copy to the register/login text to explain that to users and included a ‘Saved!’ feedback message to show people they had succeeded in adding items to their wishlists.

Working on these items took up most of my time for the first couple of days and I was delighted to be contributing to the actual design work. Surrounded by such talented visual designers, I had to accept that my design work would not be at their level and make the most of their expertise and advice to help me get as close as I could to producing professional standard work. I enjoyed the morning stand-ups and afternoon stand-downs to critique each other’s work and provide suggestions to help to bring everything together into one user journey. It was interesting to hear the advice and recommendations from the other team members and to contribute ideas to assist with fine-tuning the body of design work. Several of my ideas have been taken up along the way so hopefully my presence was useful within the team.

As the week progressed, the prototype featuring all the screens that we’d designed together started to take shape. We still had two versions of the search to test along with a user journey through various screen types, including version B, which is the one that I had mocked up and had been given a further polish by James.

Four project team members headed up to Bluewater shopping centre on Thurs to do some in-store user testing: myself, Jon and Jerlyn (Clearleft designers) and Andy from Virgin Holidays. We found it tricky to recruit participants at first as people didn’t want to spend time with us, but introducing a £20 Amazon voucher incentive certainly helped. We ended up getting four interviews at the store, with Jerlyn and Andy getting two additional interviews from older relatives who were in the target market we had identified.

The final step in our journey was to start to pull together a presentation to communicate to the Virgin Holidays management team what we had done. This design sprint has flashed past and has been a fantastic learning experience. It’s been interesting to see all the differences between the academic version of events that we’ve been taught with the more practical and collaborative approach we’ve taken. I’ve really enjoyed getting such immersive hands-on experience on such an interesting project with a great team of people. Everyone has been so encouraging and seemed to take my suggestions seriously, which I’ve really appreciated. My next task will be to capture everything I’ve learned in my project document, which, given the amount of ground we’ve covered, will be no mean feat.

Leave a Reply

Your email address will not be published. Required fields are marked *