Bulkshirt

Custom shirts printed in bulk

In this project i desgined a dynamic website for a custom printed shirt company, the companys focus is larger orders rather than one off orders and so the interface reflects this.

The first step in my project was to intervew some users, i found some people that fit my demographic using facebook groups that agreed to a interveiw over zoom.

From this i created a persona that i would then help me understand there needs and goals of using the product

My next step was to create journey maps to understand the full process the user goes though when using the site.

I then started the ideation phase to see how the problems can be solved for the user, as before is started with crazy 8s and creating paper wireframes, i did this for each of the main pages that are important to the problem in both desktop and mobile sizes so that i could get a feel for how it will change with screen size

As part of my process, I created a site map to give me an idea of some of the pages that would be needed, but this was not a concrete site map at this stage as some pages may need to be broken down into multiple to make them more user friendly

Once i am happy with the paper wireframes i move on to Digital wireframes and prototypes i changed a few small details as i did so as i often find things feel diffrent once they move to a digital format, once again i created wireframes for both desktop and mobile sizes and also keep in mind the inbetween sizes such as tablets and larger phones.

Using the low fidelity prototype I did an unmoderated usability study with some of the users I had interviewed before about the website, from this study I found they did not want to pick "men" or "women" at the start and instead asked if it could be done at the order sheet stage as i had done with long and short sleeves, this was invaluable feedback, and so i got to work changing my wireframes to reflect this.

The biggest design problem of this project is getting the page I'm calling the "order sheet" to be easy to use, the goal is to be able to make it easy for businesses to be able to create lots of types of one shirt without having to shart over. they can however edit for each variant at this stage if they wish.

With this in mind, I chose to run a second usability study to find out how the users felt about its ease of use

After the study I found users were still having difficulty filling in or understanding how the page works, I changed the way the user changes between each of the 4 pages as users found this easier to understand, I have also added a help button should any users need any further guidance to how it works.

I moved on to high fidelity mockups for the site that I would then turn into a more acuate prototype, this will help me better evaluate the usability when all the visual elements are there to aid the user.

Using Adobe XD I created I turned the mockups into prototype users can try out in a usability study, try it out for yourself here

Final thoughts

This was super interesting to design for a webpage that needs to work just as well on a phone as on a desktop computer, I think it's easy to forget how much space you have to work with on a desktop when you are used to designing for mobile, but at the same time letting there be white space to aid with usability.

Page updated

Google Sites

Report abuse