UX Designer
Mock Up RP 2.jpg

Repairly

 

Repairly

 Final prototype of the new mobile site for Repairly

Final prototype of the new mobile site for Repairly

Brief

To redesign the mobile site for Repairly by improving the user journey, with the goal to increase mobile conversion. 

Client

Reparily is a mobile and tablet repair service; their USP is that they collect repair and return devices within three hours from specific London locations. Saving users time through their convenient courier service, means that users do not have to leave their location. 

My role

As part of a team of three UX Designers we redesigned their mobile site and improving the user flow using the double diamond process.

Analysis

We began with a competitive analysis, looking at franchise repair services like Apple and Carphone Warehouse. We also looked at iSmash and iMend who were seen as direct competitors.

 

site test

To get an understanding of Repairly's current mobile website we conducted a site test. Users said that they like the efficiency of their service, having their device repaired and returned to them in 3 hours, but they didn't understand their process from the beginning.

Through the testing, we discovered four key themes: 

  • accessibility 

  • CONSISTENCY & COMMUNICATION

  • FAMILIARITY

 Repairly's current mobile site. 

Repairly's current mobile site. 

 

User Interviews

I conducted 5 out of the 12 user interviews with people who had damaged a device and got it repaired in the past year. From this we gained an insight into their current behaviours when using mobile service sites (Deliveroo, Treatwell) and what works for them in the user journey. 

 User interview

User interview

The two keys themes we identified from the user interviews was that users wanted: Convenience and Confidence. 

Users wanted time efficiency, we discovered that it was important for users to have their device fixed well and quickly. 

“If I had to have my phone fixed, I'd think of Kingsland Road, it’s on my way to work, and I don’t have to change my routine.” Stella, Lawyer, Dalston
 

Users wanted social confidence; they value customer reviews on sites such as Trustpilot and Twitter.

“I looked at all the reviews and the forms of delivery before ordering.” Ed, Finance Director, City. 
 
 

affinity Mapping

I led on the synthesising of the user interview answers into an affinity map from the responses of the 12 user interviews conducted, this helped identify the problems that users encountered through purchasing services on their mobile device. 

 Affinity Mapping responses from 15 user interviews. (L-R: Anjali D'Souza, Samir Limbu, Efrem de Paiva)

Affinity Mapping responses from 15 user interviews. (L-R: Anjali D'Souza, Samir Limbu, Efrem de Paiva)

 

With the key findings from the affinity map we created two personas, one represented a customer who they currently serve (Lauren), the other represented a potential customer who Repairly do not currently serve (Alex). We decided to use Alex as our primary persona, he has qualities that we are attempting to overcome through the mobile site. 

 

Persona_Alex.png

 

design studio

Our team ran a design studio with the CEO, a Repairly Courier and a developer to explore ideas for the mobile site. We came up with many ideas for how we could design solutions for the scenarios based around the persona. These sketches influenced our paper and low fidelity prototypes. 

 Design Studio with the Repairly team.

Design Studio with the Repairly team.

 

SKetches + Paper Prototype

With the first paper prototype we included three key features: 

  • Trustpilot reviews on the homepage helps to build social confidence.          
  • In the Process Page, a video was included to provide communication about how the ordering and pick up takes place. From here the user can click the  'Here's who makes it happen' button. 
  • Our Team page, shows the people behind the process; the couriers, the engineers and the staff at Repairly HQ. 

Through testing, users said they did not require a video, as it was unlikely they would watch it on mobile. With the 'Our Team' page they did not feel that it was essential to them completing an order. As an alternative, it can be minimised and put in the hamburger menu. 

 Paper prototype: Homepage, Process page, Our Team page.

Paper prototype: Homepage, Process page, Our Team page.

 

Wireframe + USer testing

I was involved in taking the prototype up to mid-fidelity in Sketch. The postcode journey, underwent A/B testing to identify which error message users would prefer to see when they enter a postcode that is not currently served by Repairly. 

  • A: Under the postcode search bar the error message shows with a link to see the other locations they serve. 
  • B: The error message appears as a pop up over the screen and users can click to see which locations are served. 
  • C: An error message comes up in a new page. From here users can see the list of areas Repairly serves. From here users can put in a postcode based on the listed locations. 
  A/B testing for the Error Message on the Postcode Journey

 A/B testing for the Error Message on the Postcode Journey

Design C was the preferred option, users liked that they were able to see a list of locations Repairly serves and were inclined to input their work postcode. With Design A and B there was a greater chance of drop off. 

We carried out 42 user tests from low fidelity through to high fidelity during the 2.5 week sprint. From the feedback we made focused on the communication and copy writing was key, as it helped build confidence and improve education in the user journey ensuring the process was clear.

 User Testing the paper prototype. 

User Testing the paper prototype. 


accessibilility

In the high fidelity prototype accessibility was very important, it was one of our design principles for the project. We ensured the colour combinations of text on a coloured background and text on buttons passed accessibility through the Stark plugin in Sketch. Our  prototype passes the AA test for 'normal' and 'large' text. We used Repairly's existing colour palette and font through out. 

 Accessibility and Style Guide for the final prototype.

Accessibility and Style Guide for the final prototype.

 

We created the digital prototype in Sketch with five iterations from low to mid fidelity. We implemented the feedback from user testing before putting the high fidelity design into an interactive prototype using Invision.

 

 High Fidelity Screens. 

High Fidelity Screens. 

As the high fidelity screens were being completed, I focused on producing the presentation and pitch deck for the client.


Client Presentation + Final Prototype +

Presenting the final prototype to the Repairly team we explained our research, the feedback from users and I conducted the walk through of the interactive prototype. The feedback from the client was extremely positive; they were impressed with the comprehensive finding and testing we carried out, as well as the improved usability of the site and user journey. 

 Client presentation day. 

Client presentation day. 

We submitted a design specification to the Repairly team, they intend to implement our design to their mobile responsive site. 


CLICK TO VIEW THE PROTOTYPE

The scenario:

Alex dropped his phone and cracked the screen and the
front camera.He wants to find out about the repairing process before ordering

Repairly.jpg

Client Testimonial

Testimonial RP.jpg

Lessons learnt

I learnt how valuable mobile responsive sites are within online services and e-commerce. With more people completing purchases on their mobile, it is important to make the user experience helpful and engaging. I'm looking forward to seeing companies like Repairly grow. 

 Team (L-R: Efrem de Paiva, Anjali D'Souza, Samir Limbu)

Team (L-R: Efrem de Paiva, Anjali D'Souza, Samir Limbu)