eCommerce
CoFo Design
CoFo Design is a new Canadian furniture company. They ‘cofound’ furniture designs with Canadian students and recent graduates, and present them to the international market.
Team
1 Creative Director
1 UX/UI Designer
1 UI Designer
2 Developers
Team
1 Creative Director
1UX Designer
1 UI/UX Designer
Role
Lead UX/UI & Interaction Designer
Challenge
Encourage designers to submit their work and consumers to invest in unique, one of a kind furniture pieces.
Challenge
There is little emotional benefit communicated through the current buy-flow, and little messaging about why one travel insurance is different from its competitors. Current travel insurance purchase sites are transaction oriented, and are functionally undifferentiated from one another.
Challenge
There is little emotional benefit communicated through the current buy-flow, and little messaging about why one travel insurance is different from its competitors. Current travel insurance purchase sites are transaction oriented, and are functionally undifferentiated from one another.
Solution
Build trust and generate awareness about the mission, the manufacturing, and the business model through a strong user experience. As there was a need to have a website in time for Interior Design Show in January, this project was broken up into two phases.
Phase 1
Introduce CoFo and its founders, and present the first designer CoFo collaborated with in order to bring the product to life. We created a fully custom website with a fully integrated ecommerce store, allowing the site to grow as the business demanded.
Phase 2 (Fall 2018)
Expand the website to include more detail about the manufacturing process and capabilities, introduce a blog for regular content updates and feature the first collection of cofounded furniture pieces.
Solution
Build trust and generate awareness about the mission, the manufacturing, and the business model through a strong user experience. As there was a need to have a website in time for Interior Design Show in January, this project was broken up into two phases.
Phase 1
Introduce CoFo and its founders, and present the first designer CoFo collaborated with in order to bring the product to life. We created a fully custom website with a fully integrated ecommerce store, allowing the site to grow as the business demanded.
Phase 2 (Fall 2018)
Expand the website to include more detail about the manufacturing process and capabilities, introduce a blog for regular content updates and feature the first collection of cofounded furniture pieces.
Solution
Design a new buy-flow interface that substantially differentiates it from other competitors by implementing a more humanistic purchasing experience, and a greater sense of personal customization and individualism.
Solution
Design a new buy-flow interface that substantially differentiates it from other competitors by implementing a more humanistic purchasing experience, and a greater sense of personal customization and individualism.
Wireflow
Since the site itself wasn’t going to be overly complex with numerous sections/subsections we decided to move straight into wireflows and map out the journey for both our primary audience (young professionals) and secondary audience (current students, and new grads). Through this exercise we were also able to lay down the foundation and establish, at a very high level, the content hierarchy for each section.
Wireflow
Since the site itself wasn’t going to be overly complex with numerous sections/subsections we decided to move straight into wireflows and map out the journey for both our primary audience (young professionals) and secondary audience (current students, and new grads). Through this exercise we were also able to lay down the foundation and establish, at a very high level, the content hierarchy for each section.
Wireflow
Since the site itself wasn’t going to be overly complex with numerous sections/subsections we decided to move straight into wireflows and map out the journey for both our primary audience (young professionals) and secondary audience (current students, and new grads). Through this exercise we were also able to lay down the foundation and establish, at a very high level, the content hierarchy for each section.
Wireflow
Since the site itself wasn’t going to be overly complex with numerous sections/subsections we decided to move straight into wireflows and map out the journey for both our primary audience (young professionals) and secondary audience (current students, and new grads). Through this exercise we were also able to lay down the foundation and establish, at a very high level, the content hierarchy for each section.
Wireflow
Since the site itself wasn’t going to be overly complex with numerous sections/subsections we decided to move straight into wireflows and map out the journey for both our primary audience (young professionals) and secondary audience (current students, and new grads). Through this exercise we were also able to lay down the foundation and establish, at a very high level, the content hierarchy for each section.
Wireframes
When tackling the hierarchy of the home page, we faced a challenge. We were trying to introduce the company, as well as the product within the hero. Initially our solution was to utilize the Gestalt principle of proximity, and place both calls-to-action — «Learn More About CoFo» and «View the Chair», in the same space.
Wireframes
When tackling the hierarchy of the home page, we faced a challenge. We were trying to introduce the company, as well as the product within the hero. Initially our solution was to utilize the Gestalt principle of proximity, and place both calls-to-action — «Learn More About CoFo» and «View the Chair», in the same space.
Wireframes
When tackling the hierarchy of the home page, we faced a challenge. We were trying to introduce the company, as well as the product within the hero. Initially our solution was to utilize the Gestalt principle of proximity, and place both calls-to-action — «Learn More About CoFo» and «View the Chair», in the same space.
Wireframes
When tackling the hierarchy of the home page, we faced a challenge. We were trying to introduce the company, as well as the product within the hero. Initially our solution was to utilize the Gestalt principle of proximity, and place both calls-to-action — «Learn More About CoFo» and «View the Chair», in the same space.
Wireframes
When tackling the hierarchy of the home page, we faced a challenge. We were trying to introduce the company, as well as the product within the hero. Initially our solution was to utilize the Gestalt principle of proximity, and place both calls-to-action — «Learn More About CoFo» and «View the Chair», in the same space.
However, this wasn’t an ideal solution as we wouldn’t be communicating a clear and concise message nor guiding the user along a clear path.
We then began to research companies built on a single product and the strategy that was implemented. We gave the Value Proposition its own space while simultaneously showcasing the product with a clear call-to-action; dropping the path to discover CoFo below.
Product Info
In order to highlight the craftsmanship and quality of a product I felt the need to break out of the usual slider approach, where different views of the product live. I wanted to showcase each image along with copy but didn’t want to lose the functionality of the product info container (price, product name, swatches and the call-to-action).
I thought about this for a while but didn’t really come up with a solid solution. I then turned to the developers and brought them over to the good ol’ whiteboard to walk them through the challenge I was looking to solve.
During our brainstorming session we quickly came up with a solution. It resulted in displaying beautiful and rich images with short and brief key descriptors of the craftsmanship and materials on the left rail, while the right would contain the fixed product info container.
This allows the user to consume the content while allowing them to toggle easily between swatches as well as providing a clear path towards the purchasing flow.
Product Info
In order to highlight the craftsmanship and quality of a product I felt the need to break out of the usual slider approach, where different views of the product live. I wanted to showcase each image along with copy but didn’t want to lose the functionality of the product info container (price, product name, swatches and the call-to-action).
I thought about this for a while but didn’t really come up with a solid solution. I then turned to the developers and brought them over to the good ol’ whiteboard to walk them through the challenge I was looking to solve.
During our brainstorming session we quickly came up with a solution. It resulted in displaying beautiful and rich images with short and brief key descriptors of the craftsmanship and materials on the left rail, while the right would contain the fixed product info container.
This allows the user to consume the content while allowing them to toggle easily between swatches as well as providing a clear path towards the purchasing flow.
Designer Profile
In order to legitimize the business and create trust in consumers and students/recent grads, we needed to add a section in the product page where we could introduce the designer.This section was placed after the product since this is primarily a shopping experience.
Here, we gave the area enough space to include the designer’s bio; creating a personal connection with the designer. Also, additional space was created in order for the designer to speak of the collaboration and share a bit about the process; generating interest in designers that wish to participate in future design challenges.
Submission Form
The initial form had some key problems we were looking to fix. We collaborated with the stakeholders to determine what was most pertinent at the submission and selection phases.
The main issues we encountered were:
- Too many fields - unnecessary amount of information being requested at the submission stage.
- Lack of use of dropdowns - when properly used they not only save time but also prevent erroneous answers.
- Numerous questions which required more thought out answers - these were potentially creating a block for students since they would require a significant amount of time to fill out. They were also unecessary at the submission phase, as we identified and was confirmed by the stakeholders, and were only relevant once a designer had been selected.
By obtaining the necessary information from the stakeholders we were able to create a more distilled and simple, multi-step submission form.
Visual Design
Since CoFo already had strong branding in place, it was time to bring our wireframes to life. Creating a custom design gave us the opportunity to explore something original and create a language that will grow along with the business.
I drew inspiration from the geometric shapes within the logo and began to reinterpret their placement within the each layout. These are interspersed throughout the site with enough white space so as not to saturate the eye with bold graphics.
The boldness and grandeur look and feel within the site is to represent the products. The furniture that will be sold by CoFo will be interesting, eye-catching and unique, and will be used as statement pieces to accent a room within a home. We wanted to represent that in each section so that they can stand on their own but still be a part of the whole, part of a collection.
The boldness and grandeur look and feel within the site is to represent the products. The furniture that will be sold by CoFo will be interesting, eye-catching and unique, and will be used as statement pieces to accent a room within a home. We wanted to represent that in each section so that they can stand on their own but still be a part of the whole, part of a collection.
Interaction Design
Creative designs were brought to life with interaction, using simple time-based transitions and animations. The enhanced experience gives the website a tactile feel that can influence user behaviour and increase user engagement.
Interaction Design
Creative designs were brought to life with interaction, using simple time-based transitions and animations. The enhanced experience gives the website a tactile feel that can influence user behaviour and increase user engagement.