Project Summary: Fine Line Art and Frame is an art supply store that offers art supplies and custom framing for art enthusiasts and collectors.
Project Goal: remove the pain of searching for specific products with an easy-to-navigate, seamless user interface.
Role: research, design, and test all UIs related to the project.
Objective: Users need to easily find desired products using clearly organized categories & checkout processes.
The problem
The site had a good selection of art supplies yet it :
lacked the proper navigation structure within its categories.
It didn’t offer different options for payment methods.
failed to effectively direct customers to its popular or best sellers’ products.
>> All leading to a not-so-great user experience on the site and less revenue for the business.
Research
Surveys: Initially, I started out by putting out an eCommerce-focused survey, this helped narrow down the right people to interview and gather some insight.
Interviews: I interviewed 4 users who shop online frequently in order to better understand their experiences with online shopping and also performed some contextual inquiries.
For this, I asked 3 people to perform a task on the current version of Fine Lines Art and Frames site. This information helped me understand the pain points users’ were facing with Fine Lines Art and Frames’ current site. It was also helpful in understanding how users navigate through e-commerce sites in general.
Affinity map: I gathered the data from the user interviews and the contextual interviews and better organized them into different categories and I statement. It helped me better understand the users’ problems as well as narrowed down the areas of focus.
Insights from affinity map/ research: The statements include :
Affinity map insights
-
![]()
I shop online frequently
-
![]()
I like seeing good product images on a website
-
![]()
I like to use different features while online shopping
-
![]()
I don’t like it when websites are not easy to read/view
HMW Statements
Then went on to brainstorm possible ideas and solutions by asking :
How might we make the site easier to navigate through the main menu of the site?
How might we layout the pages so they’re simple and easy to understand?
How might we make the site more visually appealing?
Information Architecture -
Site map
I mapped out the site’s structure, organization, and content in order to lay the groundwork. This is important in simplifying Fine Line Art and Frame’s eCommerce experience.
Low fidelity wireframes
I created low and high-fidelity wireframes in order to iterate through many design options. Working in Figma is one of my favorite parts of the design process as it allows me to bring out my creative side. To achieve the objective of simplifying the site, I incorporated some features that Fine Line Art & Frame did well, as well as added other features that its competitors’ seemed to have done better.
High fidelity wireframes
I drew inspiration from Michael’s crafts store as it was one of the leading competitors in the industry of art supplies. I redesigned the entire site and all its pages. Created a framework for the upcoming steps
Prototype
After putting the wireframes together, I created low & high-fidelity clickable prototypes making the site more interactive and usable for users. The prototyping connected the steps and brought it all together.
Once I was done prototyping, I then went on to conduct some usability tests. I did the tests with four people. The tests were useful as they allowed me to see where participants were having issues and the pages where they smoothly moved along.
Conclusion
During this 2 week sprint, I redesigned Fine Line Art and Frame’s eCommerce site by improving several of its pages and adding certain features.
Improved
- navigation: Simplified the navigation process by removing menu items with no items in them.
- search: easily accessible search button from any of the pages
- checkout flow: added different payment methods to the checkout flow and used simple writing
The experience is now much more simplified and intuitive. Throughout this process,
I learned a lot about the design process and what goes into a redesign. I also significantly developed my technical skills.