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
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.
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!
Locate bedroom furniture
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.
Primary & secondary research
Prototyping & testing
Conduct behavioral research
Design and prototype the entire checkout flow
More usability testing and iteration
Design more pages of the website, like event and longform pages
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
Kai mobile appiOS app for mental wellness
Airbnb FlightsAdding a feature to the iOS app
Your Music publicationResponsive mobile-first web design
Email me at
Email me at
© 2019 Yumi Morii
© 2019 Yumi Morii