Process: Testing & Iterating

Shalyn Oswald UX Designer
Shalyn Oswald UX Designer
Process >> Research >> The People >> Design >> Testing and Iterating

The final-but-not-final step is the application of research, personas, and my design to create prototypes to test out and really find out if what I've created works, and how well.  Does it work as intended, is it understood, what needs more work, what doesn't make sense?  As many iterations as it takes to get the desired result; sometimes you just need to be creative with it.

Shalyn Oswald UX Designer
Prototyping
Shalyn Oswald UX Designer
Axure
Shalyn Oswald UX Designer
POP
Shalyn Oswald UX Designer
InVision
Giphy
The upload page.
The upload page.

As we wanted to incorporate a quick upload feature as well as the ability to customize your gif if you wanted to, we had to really think about what they'd be able to do quickly vs. what they'd have to go to the editor to do.

Upload iterations.
Upload iterations.

As we tested we realized that we needed work on the copy and colors that worked as calls-to-action. We want people to use the creator and not just the quick upload.

The final editor.
The final editor.

In the end, the final editor takes up one page with no need to scroll, incorporates many micro-features and micro-interactions, and tested very well.

The upload page.
The upload page.

As we wanted to incorporate a quick upload feature as well as the ability to customize your gif if you wanted to, we had to really think about what they'd be able to do quickly vs. what they'd have to go to the editor to do.

1/6

The biggest challenge with this case-study was trying to get a decent amount of features in the editor without making it seem overwhelming to the average lower-tech user.  

 

Once we figure that out, the next biggest challenge was designing the UI so that it didn't seem cluttered.  

 

The copy we used was also an issue, as we wanted people to know that they could quickly upload, but that they could also edit their gif.  The wording had to be tested many times before we got it just right.

Sidewalk Runway
User-Testing Paper Prototype.
User-Testing Paper Prototype.

We wanted to know if people understood what the site was about based on the front page, so we built it out and tested it. It needed many iterations for people to not believe it was an e-commerce website.

Homepage Iterations
Homepage Iterations

By focusing on the feature that allows you to input your body measurements and to search by that to find pictures of people similar to yourself, and by adding the copy above, people finally understood what the site was about.

Customer Image Iterations
Customer Image Iterations

By adding all of the information and showing the ability to comment, we can see that there is a community of people who upload and use the website, making others feel more comfortable to join.

User-Testing Paper Prototype.
User-Testing Paper Prototype.

We wanted to know if people understood what the site was about based on the front page, so we built it out and tested it. It needed many iterations for people to not believe it was an e-commerce website.

1/4

The biggest challenge in this case-study was finding a way to show that this site was not for e-commerce but actually a site for customers to post pictures of themselves in certain items of clothing so that others could see what they might look like in that item if they are similarly shaped (in terms of body measurements).  

 

Once we had that down, the next challenge was making sure that the UI was intuitive and the main interaction of inputting your measurements was fun and delightful.

Charity Miles
Original App Profile Page.
Original App Profile Page.

This is the profile page in the original app. Through testing, we found that many members didn't see the amount of information that they truly wanted on their own pages, and a lot of space was being taken up by the blurred picture behind the main one.

Paper Prototype of Profile Page
Paper Prototype of Profile Page

We tested this out and, although it tested fairly well, due to time-constraints and the possible difficulty in implementation by the small team, we had to make some changes.

Even MORE Iterations!
Even MORE Iterations!

It's all about the small details, and we wanted to make sure to give the client a finished idea that aligned with their vision and the members' needs, as well as making it more interactive and delightful.

Original App Profile Page.
Original App Profile Page.

This is the profile page in the original app. Through testing, we found that many members didn't see the amount of information that they truly wanted on their own pages, and a lot of space was being taken up by the blurred picture behind the main one.

1/7

There were a lot of pages and interactions to work on for this job, so we felt the best and quickest way to test our designs was to go through paper prototyping and then straight into high-fidelity mock-ups.  Time was a huge challenge!

 

The biggest challenge in terms of design was deciding how much of the original look to keep and how much to change.  Firstly, there is already a large member-base for this application, so we don't want an initial huge change, but a decent change that could be adjusted more over time.  As well, the developer team only consists of two people, so we had to take the business contraints into consideration.

 

In all, the final prototype tested very well and the client was very happy with the result.

Like what you've seen?