JCPenney has a product line called RoyalVelvet, and they would like to showcase to prospective customers in a dedicated responsive website experience.
Advertising lead traffic, mostly women in the age range of 25 and up who are considering redoing their bedroom, bathrooms, or living rooms.
JCPenney provided information about their customers of this brand, and also who they would like to add to this demographic.
The team expanded and contracted depending on need. During the initial client pitch stage, the team consisted of a Project Manager who oversaw this project along with others running concurrently. He put together the work of the team into a presentation deck and managed all the team members. Three full-time Art Directors, one UX designer (Me) and one Business Analyst who wrote requirements documentation and requirements gathers from the client.
After the concepts were created and a design was chosen, the art directors continued on to their other projects. One art director would be kept on the project to complete additional visual elements.
Time: I had a limited number of hours per week to accomplish my tasks and there were weekly client meetings to show progress to get client signoff. Also, there were other projects I needed to focus on as deadlines came closer.
Budget: We had to do the most with what we had. While this was a responsive website, only 2 breakpoints were officially designed for. Meaning, the design needed to work if space between the minimum of 320px to the maximum of 1280px. While only 2 interface designs were created, the maximum width design needed to work well at it's narrowest. The minimum width design needed to work well at its widest. Additionally, touch devices needed to be considered such as tablets.
Development budget: The website was being built by MXM's offshore team. This was included into the budget for the project and part of the launch deadline. So we could not start presenting technically complicated features and functionality. This had to be kept reasonably easy for our team to build.
I was asked to add my own concept mockups along with the other designers. Being primarily a UX designer, my perspective is always on business objectives, user goals, and formulating a design to facilitate this connection. Empathizing with the client and understanding their perspective, I chose a design that showcased the many sides of the products and an easy to sort way. A visitor has their own tastes in mind when looking through products. So I designed a easy to use, simply organized product listing page. I wanted the design to jump right into showing those items.
When in the client meetings, and listening to them describing their product line and it's unique selling point, I thought of a design that would best present that. While RoyalVelvet may not be the flashiest of designs, or my particular taste, I have to keep my head and my personal preferences in check. To certain people, this styling is what they love. They love the embriodery, the patterns, these colors. Window treatments, bedding, and towels, etc,... These help them express themselves and create an environment that is deeply satisfying. It is my responsibility to help them with this through this website.
With so many different styles, I need a way to categorize them without getting too segmented. Looking over their current products, I saw a way I could create a few broad categories. I wanted to make sure that my design didn't spiral into a overly complex tool, but I wanted it to be powerful enough for someone to find specific items.
There were about 48 total products for this site, so it was important that a narrowed result did not show too few items.
I came up with the idea of instead of filtering, the interface would sort the products based on the user's choices. The products would be displayed with nice product photos that were being produced in the client's location out west.
Showing the client
Each designer presented their designs and took a different perspective on how best present the product. I liked their approaches from a designer's point of view, very attrative designs and well crafted.
However, from experience with clients that deal with products, commerce and sales, I feel I understand their motivations. They want to show the products and generate sales. That's the purpose of this website. They're putting all this effort and money into this project for that reason. I need to deliver on that, that's my job here.
With that in mind, I designed a site that shows the products, allows the visitors to sort and browse through all the products to find if any are to their liking, see more details about them, and move on to the main site to purchase.
I did my research into other site design layouts that would work for this intention. I'm not trying to re-invent the wheel. With these time constraints, I needed to find a layout that would do the job and customize it to fit their needs.
From all the designs, my concept was chosen and we began to move forward with the project. I handed over my clean and organized PSD files to the art directors to continue on with visual side. I moved back to my role of UX Designer to create the wireframes and flesh out the functionality of the design.
A simple site prototype was built showing how the site would function, and we used available resources to test the site internally. People within the company, who had no knowledge of the project were asked to complete a set of simple tasks and I made notes of their feedback.
I wish I could say the client had some contrary opinions on the design to make this case study more interesting, but the reception was very positive. They loved the design and had some questions as to how exactly this would function.
The challenge with starting with mockups is that making different states for a design requires a lot of time, same with edits, adjustments, and things that need not be talked about at this stage will enter the conversation.
I prefer to start with very broad strokes. Agree on fundamentals, and build from there. However, I understand that the client may want to see how the finished product will look like. It's a tricky side of working in real-world situations.
Starting the UX
I consider visual design related to UX design. They are both involve layouts, information organization, communication through copy, photos, graphics, user interfaces. Design principles apply. I had thought about this all when doing the concepts, so the transition was seemless.
Although some of the design has been done, it is not where to start the UX process. This needs to go back the fundamentals of any website or app, a sitemap.
With a sitemap, everyone on the team can understand what exactly we're building. How many pages are needed, how many unique screens will there be? What features will be on these pages? How does this tie back to the user requirements document?
I sketched out ideas of how the product cards will work, what is on them, and how can they help sort through all the products in a way a user can understand.
I like to plan for whatever situation may arise during a project. I want to catch problems before they're deeply rooted. I considered that someone has to build this thing. I do want this to go over budget or past the deadlines, I want it to succeed once launched on time.
With that motivation, I researched early on technical ways to accomplish the proposed functionality. I looked up scripts that can handle this kind of interface and found something that even I could impliment. Meaning the developers would have a much easier time, and could possibly customize it further for our needs.
Since our team was building this product, the functionality needed to be communicated to the developers. I did not want to be answering a ton of questions or get caught up in endless development meetings where anything can happen. Sometimes someone wants to revisit a functionality and confusion can surface.
Unless there is a feature that will drastically improve the effectiveness of the site, or there is a roadblock to being able to accomplish our task, this train needs to move forward as deadlines start looming on the horizon.
With that intention, I began to run through the functionality of the product card listing page, with the sorting filter, and all the possible results. I had to find every possible state that they might be in. Going through all the combinations for the tags for the products, and what the heirarchy is of the tagging system. How many tags will fit into a product card comfortably with the current design. Etc...
I've been on many projects in the past that have spiraled out of control, and see it as my responsibility as a UX designer to be there to avoid that from happening. In those cases everyone loses, the end-user, the client, and the individuals working on the project, the designers of the products, etc...
This was my second project at MXM. They did not have a defined process as to how to approach the UX side of projects. I wanted to make sure that less time was spent setting up the document, wireframes, flows, annotations.
I created and implimented standardization in the wireframes. Wireframes here, and annotations there. User requirements here. This helped on my next projects, and I continue to use the templates and methods I came up with here.
There were a few interaction problems I noticed once it was built that still bother me to this day. I'd love to improve on them.
If you've read this far, and go to the live site, please, by all means let me know. I'm sure that when told I'll know exactly what will come up. Given the opportunity, I'd love to fix that issue. But overall, I'm very happy with the results. I'd love to see the analytics of how the site has performed months later, but you have to let these projects go and get beat up at the car derby that is the real world.
Applications used on this project
These wires would need to be done quickly and often times needed to be interactive. The wires would need to be exported easily to PDF for offline viewing. Annotations would need to be done on the same wires to be handed off to development.
I used Photoshop for design mockups. Axure RP 7 was used for the wires and interactive prototype.