I worked with a team to design the website for a company called Entwine Rugs. The company is a large-scale rug manufacturer who creates and distributes rugs around the world. Designing the website was a multi-step process and our final design went through many iterations.
My Role: UX Designer
Duration: 10 weeks, Jan - Mar 2019
Tools: Figma
Key Skills: User Research, Competitive Research, Wireframing, Prototyping, Usability Testing
User Interviews
The first step to designing the site was to perform user research and interviews. We interviewed potential customers and users of the website to get a feel for what they were looking for in our company’s site. We wanted to know about their goals, frustrations, and experience with other sites.
After conducting over a dozen interviews, we organized them into personas to get a better idea of our user base. These personas would help us get a better idea of who the users that we are designing for are.
Competitive Analysis
After the interviews were finished, we then moved on to developing the creative brief and vision for the site. We talked with the owners of the company and discussed what their vision of the site would be. We then performed competitive analysis on other similar sites to find out what features we liked from those sites and what we disliked. This process helped inform our final design as we were able to take what works best from other similar rug sites. We also developed a mood board to focus our vision on what we wanted the site to be.
Competitive Analysis Chart
Mood Board
Low-FIdelity Prototype
The next step in the process was prototyping the actual website. We started with a low-fidelity prototype that showed the basic navigation and layout for the site.
Low-Fidelity Prototype
Prototyping
We then translated this prototype into a program called Figma which allowed us to develop a fully interactive and navigable prototype. Our first Figma prototype focused mostly on the layout and menus and didn’t focus on the content of the site yet.
Mid-Fidelity Prototype
Iterative Prototyping
We went through two more formal iterations of our prototype on Figma, slowly adding in more content and refining on the site throughout the whole process. We also tested our prototypes on users and took their feedback and experiences into account for our final design.
High-Fidelity Prototype
Final Design
Finally, we developed what our final prototype would be for this project. We had been developing both a mobile and desktop version of the site throughout the whole process but pursued a mobile first development style. Our final prototype was a fully navigable site that would be the last step before going into development. It included all the features that we wanted in the site and finalized the layout and navigation. Although the scope of this project did not require us to fully program the site, the next steps for us in this project would be to develop the site.
"Collections" and "Textures" Pages (High-Fidelity)
"Process" and "About Us" Pages (High-Fidelity)