Coray: Responsive e-commerce web design

Coray: Responsive e-commerce web design

How might we design a new responsive e-commerce website, with a modern logo and branding, that 1) enables Coray to compete with other online furniture stores, and 2) allows Coray customers to quickly and easily shop online for furniture?

How might we design a new responsive e-commerce website, with a modern logo and branding, that 1) enables Coray to compete with other online furniture stores, and 2) allows Coray customers to quickly and easily shop online for furniture?

From research to implementation, I designed a responsive e-commerce website for Coray, a Swiss furniture company. Coray is fictional and this project was completed as part of Designlab's UX Academy program.

From research to implementation, I designed a responsive e-commerce website for Coray, a Swiss furniture company. Coray is fictional and this project was completed as part of Designlab's UX Academy program.

Role: UX/UI Designer
Tools: Sketch, InVision, Illustrator, Whimsical
Timeline: 4 weeks (Jan 2019)

Role: UX/UI Designer
Tools: Sketch, InVision, Illustrator, Whimsical
Timeline: 4 weeks (Jan 2019)

Research & Synthesis / Information Architecture / Interaction Design / Branding & UI Design / Prototyping & Testing / Iteration

1. Research & Synthesis
2. Information Architecture
3. Interaction Design
4. Branding & UI Design
5. Prototyping & Testing
6. Iteration & Implementation

I started this project with secondary research, including a competitor analysis to get an overview of the current online furniture shopping marketplace, and provisional personas to illustrate my assumptions about the target audience at the time.

I started this project with secondary research, including a competitor analysis to get an overview of the current online furniture shopping marketplace, and provisional personas to illustrate my assumptions about the target audience at the time.

Next, I did primary research to gain insight into the people I’d be designing for. My goal was to better understand what customers expect, want, and need when shopping for furniture online. I conducted a survey and customer interviews.

Next, I did primary research to gain insight into the people I’d be designing for. My goal was to better understand what customers expect, want, and need when shopping for furniture online. I conducted a survey and customer interviews.

• 16 responses (18-35 years old)
• About 50% of respondents shop for furniture both in store and online; 25% shop exclusively online
• Price, style, material, and color matter more than brand
• Size, warranty, return policy, assembly, ratings & reviews, and sustainability are also important to customers
• Most common method of researching furniture was searching on Google, followed by using social media and talking to friends & family

• 16 responses (18-35 years old)
• About 50% of respondents shop for furniture both in store and online; 25% shop exclusively online
• Price, style, material, and color matter more than brand
• Size, warranty, return policy, assembly, ratings & reviews, and sustainability are also important to customers
• Most common method of researching furniture was searching on Google, followed by using social media and talking to friends & family

• 5 adults (2 males, 3 females, 21-28 years old)

• Furniture size & dimensions are hard to visualize

• Age influences priorities when shopping for furniture

• Major concerns around buying online include getting an item that does not look like the photos, and not being able to easily return an item

• Frustrations include wasting time shopping in store and not finding what they had in mind

• Shopping can feel overwhelming, and a large investment of time and energy

• Delivery to door, movability, and ability to return items matters a lot when buying online

• 5 adults (2 males, 3 females, 21-28 years old)
• Furniture size & dimensions are hard to visualize
• Age influences priorities when shopping for furniture
• Major concerns around buying online include getting an item that does not look like the photos, and not being able to easily return an item
• Frustrations include wasting time shopping in store and not finding what they had in mind
• Shopping can feel overwhelming, and a large investment of time and energy
• Delivery to door, movability, and ability to return items matters a lot when buying online

Following research, I synthesized my research findings in order to better understand users and their problems. I dug deep into my observations and findings, developing user personas, empathy maps, a storyboard and a customer journey map to summarize and communicate all my research findings in a human-centered way.

Following research, I synthesized my research findings in order to better understand users and their problems. I dug deep into my observations and findings, developing user personas, empathy maps, a storyboard and a customer journey map to summarize and communicate all my research findings in a human-centered way.

By this point, I had a clearer understanding of the key business and user/customer goals, and where they overlapped. It was important to identify and keep these goals in mind as I moved on to ideation and design.

By this point, I had a clearer understanding of the key business and user/customer goals, and where they overlapped. It was important to identify and keep these goals in mind as I moved on to ideation and design.

With a clearer picture of the problems that needed solving, I generated ideas and potential solutions that would meet both user and business needs. I started by creating a task flow of an ideal path a user would take to purchase furniture on the Coray website. Since reality is more complex than that, I created user flows to illustrate the alternative paths, key user actions, and decision points.

With a clearer picture of the problems that needed solving, I generated ideas and potential solutions that would meet both user and business needs. I started by creating a task flow of an ideal path a user would take to purchase furniture on the Coray website. Since reality is more complex than that, I created user flows to illustrate the alternative paths, key user actions, and decision points.

Now I had a solid grasp on the main flows, but I needed to design pages that would enable these flows. The pages would need to present the company’s products in a way that makes sense to customers. So, I asked 10 people to complete a remote open card sort to test my assumptions around how people categorize common furniture items. This helped me define the website’s information architecture, which I illustrated with a high-level sitemap.

Now I had a solid grasp on the main flows, but I needed to design pages that would enable these flows. The pages would need to present the company’s products in a way that makes sense to customers. So, I asked 10 people to complete a remote open card sort to test my assumptions around how people categorize common furniture items. This helped me define the website’s information architecture, which I illustrated with a high-level sitemap.

After defining the key pages and their content, I did some initial sketches exploring layouts for the Coray homepage. Competitor websites were a useful reference at this stage, since it’s important to consider user expectations within a certain market or landscape.

After defining the key pages and their content, I did some initial sketches exploring layouts for the Coray homepage. Competitor websites were a useful reference at this stage, since it’s important to consider user expectations within a certain market or landscape.

Guided by my sketches, I jumped back on the computer to make some responsive wireframes for the key pages of the website. Grids and layout columns were very helpful when scaling content and components down from desktop to tablet and mobile.

Guided by my sketches, I jumped back on the computer to make some responsive wireframes for the key pages of the website. Grids and layout columns were very helpful when scaling content and components down from desktop to tablet and mobile.

After wireframing, I designed the Coray brand identity based on the company’s core values and foundations in Swiss design. I created a mood board on Pinterest that reflected a number of brand adjectives I identified.

After wireframing, I designed the Coray brand identity based on the company’s core values and foundations in Swiss design. I created a mood board on Pinterest that reflected a number of brand adjectives I identified.

The Coray logo design process began with sketching, exploring a few Swiss-inspired concepts, like the Swiss Cross, modular elements, squares and rectangles, as well as intersecting lines. I then made vector logos of a select few, and paired these with various wordmarks to see which combinations best fit the brand identity I was going for. Next, I made a brand style tile to show the final logo design, typography, and color palette I’d be moving forward with.

The Coray logo design process began with sketching, exploring a few Swiss-inspired concepts, like the Swiss Cross, modular elements, squares and rectangles, as well as intersecting lines. I then made vector logos of a select few, and paired these with various wordmarks to see which combinations best fit the brand identity I was going for. Next, I made a brand style tile to show the final logo design, typography, and color palette I’d be moving forward with.

With the visual styles defined, I applied these UI design choices to the wireframes, creating high-fidelity responsive UI designs. In addition, I made a UI kit with all UI components and styles currently in use, for more streamlined design and development of future Coray web pages!

With the visual styles defined, I applied these UI design choices to the wireframes, creating high-fidelity responsive UI designs. In addition, I made a UI kit with all UI components and styles currently in use, for more streamlined design and development of future Coray web pages!

With the desktop UI designs, I wrote a usability test plan and made a mid-fidelity interactive InVision prototype for in-person and remote usability testing. It was important to test whether my decisions around information architecture, content strategy, interaction and visual design were easy to use by Coray's target audience. In other words, it was time to observe how users interacted with my designs and gather some feedback, then use that information to iterate!

With the desktop UI designs, I wrote a usability test plan and made a mid-fidelity interactive InVision prototype for in-person and remote usability testing. It was important to test whether my decisions around information architecture, content strategy, interaction and visual design were easy to use by Coray's target audience. In other words, it was time to observe how users interacted with my designs and gather some feedback, then use that information to iterate!

• Assess the usability of the header navigation
• Observe how efficiently users can conduct an item search
• Observe how efficiently users can add an item to their shopping cart from a product page
• Get feedback on layout and visual design

• Assess the usability of the header navigation
• Observe how efficiently users can conduct an item search
• Observe how efficiently users can add an item to their shopping cart from a product page
• Get feedback on layout and visual design

1. Locate bedroom furniture

2. Search for a specific item
3. Add an item to cart

1. Locate bedroom furniture
2. Search for a specific item
3. Add an item to cart

I had 3 participants test the prototype (2 in-person and 1 remote). All tasks had a 100% completion rate, and the error-free rates for tasks 1 through 3 were 100% (3 out of 3), 33% (1 out of 3), and 100% (3 out of 3), respectively. In other words, my testers did not approach item searching as I had anticipated, and thus ran into issues with prototype, which did not have full functionality. This resulted in some confusion.

I had 3 participants test the prototype (2 in-person and 1 remote). All tasks had a 100% completion rate, and the error-free rates for tasks 1 through 3 were 100% (3 out of 3), 33% (1 out of 3), and 100% (3 out of 3), respectively. In other words, my testers did not approach item searching as I had anticipated, and thus ran into issues with prototype, which did not have full functionality. This resulted in some confusion.

Conducting 1-on-1 test sessions was a valuable experience, because each session provided me with a wealth of comments and feedback about usability, layout, visual design, user expectations, and more. I gathered and organized several pages of qualitative findings in an affinity map to visually group and prioritize similar observations and feedback in a way that would help me zero in on the priority revisions to make to the UI designs and prototype.

Conducting 1-on-1 test sessions was a valuable experience, because each session provided me with a wealth of comments and feedback about usability, layout, visual design, user expectations, and more. I gathered and organized several pages of qualitative findings in an affinity map to visually group and prioritize similar observations and feedback in a way that would help me zero in on the priority revisions to make to the UI designs and prototype.

My next task was to iterate and implement revisions. I made changes to the desktop UI designs, resulting in new iterations.

My next task was to iterate and implement revisions. I made changes to the desktop UI designs, resulting in new iterations.

• Primary & secondary research

• Information architecture
• Wireframing & interaction design
• Branding & UI design

• Prototyping & testing

• Affinity mapping & iteration
  

• Primary & secondary research
• Information architecture
• Wireframing & interaction design
• Branding & UI design
• Prototyping & testing
• Affinity mapping & iteration
  

• Conduct behavioral research

• Design and prototype the entire checkout flow

• Test the updated hi-fi prototype
• Collaborate with developers and engineers to build the website

• Conduct behavioral research
• Design and prototype the entire checkout flow
• Test the updated hi-fi prototype
• Collaborate with developers and engineers to build the website

• More usability testing and iteration

• Design more pages of the website, like event and longform pages

• Work with developers and engineers to build and launch the website

• More usability testing and iteration
• Design more pages of the website, like event and longform pages
• Work with developers and engineers to build and launch the website

• As this was my first start-to-finish UX design project, I very quickly realized that the design process takes time! Great user experiences aren't built in a day, and project priorities are constantly evolving

• User research matters. Insight and information make it easier to make and justify design decisions later in the process

• There are pros & cons to usability testing with a hi-fi prototype. Higher fidelity means the designs appear closer to the final product (the real thing), but in some cases I received more feedback on visual design rather than usability

• Responsive grids and layouts are crucial to ensuring responsive designs scale proportionally and make wireframing so much easier

• As this was my first start-to-finish UX design project, I very quickly realized that the design process takes time! Great user experiences aren't built in a day, and project priorities are constantly evolving
• User research matters. Insight and information make it easier to make and justify design decisions later in the process
• There are pros & cons to usability testing with a hi-fi prototype. Higher fidelity means the designs appear closer to the final product (the real thing), but in some cases I received more feedback on visual design rather than usability
• Responsive grids and layouts are crucial to ensuring responsive designs scale proportionally and make wireframing so much easier