PRODUCT
I designed a responsive customer facing website to help users customize frames for purchase. There is a mobile and desktop version along with custom logo and basic design system.
COMPANY
Seriously Cheap Frames is an online business that delivers high quality custom frames to meet budget conscious needs without compromising on style or durability. They make hanging your artwork and photos a fun and easy process.
MY ROLE
I worked as an independent designer collaborating with the client to research, design, test, and launch the product. During this process I employed a mobile-first design strategy with scalability in mind.
THE USER
Daniel represents a typical user of this platform which includes adults who want an easy-to-use and straightforward online platform to order custom frames for a variety of occasions.
PROCESS
Gathering Information
I began by interviewing the client to identify the type of products they were intending to sell and what customizations were possible for their product.
Next I gathered information on 10 potential users through a product discovery survey that included questions on what type of information they would want to know when ordering a custom product and what things they prioritize in a framing solution.
Users expressed that pricing and color selection were the two most important aspects they would consider when ordering a frame.
The majority of participants mentioned they wanted classic and simple frames that could easily fit with any type of decor.
When asked what prevented them from framing items, many responded that most solutions were too complicated and costly.
I compared information from the business and user preferences to identify which features and content would be most beneficial to prioritize for both parties.
PRIORITIES
1
Showcase all available color options and update pricing based on selection.
2
Use simple modern and classic frame imagery to fit with user aesthetic preferences.
3
Create an easy to use and enjoyable customization process that reduces user frustration.
Design
I started with creating a user flow to ensure all necessary information and steps were included.
I moved on to wireframes to organize information within each screen.
Prototype
Then I created a working prototype in Figma. This included creating a custom logo, choosing fonts, colors, and an overall design direction. The client and I decided on a friendly and approachable design that would encourage users to take a chance on a new business.
User Testing
Tests were conducted on 5 potential users to look for problems within the platform. I asked each user to perform certain tasks including entering dimensions, selecting colors, finishes, and profiles, making changes to their selection, and updating their cart. During this process I found the following problems:
PROBLEMS
It was confusing what the artwork dimensions input and dropdown were indicating and how they were different from one another.
The add to cart button was obscured by the other buttons and made it confusing what the next step in the process should be.
The default selection for mat and frame options made it unclear if an option was selected or not.
SOLUTIONS
I changed the input and dropdown combination to a continuous scroll bar to make it clear there were limited dimension options and two selections were required.
I muted the appearance of less important buttons so the add-to-cart button would be more visible.
I added various placeholder images with a transparency visual instead of having a default selection to make it clear if a selection was made.
Desktop Adaptation
After testing the changes and making sure the problems were addressed, I adapted the mobile designs for its desktop variation and passed the design off to the client for development.
TAKEAWAYS
With this mobile-first design challenge, I learned more about how to simplify components and layouts to ensure necessary information could be including without being overcrowding the interface.
Since I worked with a custom e-commerce product, I also learned how to better convey limitations to users within the product by including things like process indicators, error messaging, and selection limitations.
Overall it was satisfying to be able to help a small business accomplish their goals of providing a simple, easy to use and appealing service to their customers.