Otto.de is a German eCommerce company that is a part of the Otto group. The website needs a transformation according to the brand voice and is competitive in giving a better user experience to the new and existing customers. This presentation is a personal project to design a modernized concept of otto.de that meets the standards of good user experience and is competitive in the existing eCommerce market. The purpose of doing this project was to practice and showcase my UX/UI design skills.
User Research
Competitive Benchmarking
Wireframing
Prototying
XD
Miro
Comparing Otto.de website to other ecommerce giants in Germany, there are quite a few features that could be included or redesigned to give the users a better experience. In this project I did research on the company, its brand voice and user reviews to find out which features need to be updated. Based on the research result I created UI of the landing page and product page. These redesigns have to tested as future project.
Otto.de is a part of the Otto group. It is one of the biggest online retailers in Germany and Europe. They say that as compared to our competitors we are more inspirational, fashionable and service-oriented. Customers and partners are the main pillars of business for otto.de. The brand also invests large resources for sustainability and in updating technology.
The performance of a digital product against the competitors could be measured using several metrics. This process is called UX competitive benchmarking. The results indicate the strengths and weaknesses of the digital product as compared to others. The results from this research will be used to develop a strategy for the redesign and update of the digital product/website.
Several tasks were conducted on websites to find out the level of complexity of performing each task. The results are shown in the table below.
The test data show that some features that have to be included are; ease of finding relevant information on the Landing page, delivery information, search bar filter, search history, product comparison.
The navigation bar is divided into two parts; the top part contains the navigation bar and other icons. The search bar does not contain the option to search results based on a particular category. The second bar of the navigation contains buttons to go to specific products. this area looks crowded and makes it difficult for the user to navigate.
I used a Mega Menu that shows the general options in the navigation. Other specific options appear when the user scrolls over the options. I also added icons with each option to make them more accessible.
The landing page of the website contains suggestions for the user from his previous searches which is a great user experience. The right side of the page has a grey panel that shows an advertisement. This is a major distraction for the user. As the page is divided the user's attention also divides which results in confusion. Important information about brand service is present down in the page with a lot of text due to this reason it gets ignored.
I decided to completely eliminate the right panel because it was taking up screen space. The page contained only 4 categories to catch the user's interest without confusing him. Slideshows are included to incorporate more information in less space without making the page too long. As special services offered by the brand are very important for otto.de as well as its customers. These have been presented in the hero section.
Cluttered footer with information bombarded randomly in a long footer. Too many visuals from brands make it difficult to find information that the user is looking for.
The newsletter section is reduced by only showing an input field; more options come up when the user clicks on it. A visual hierarchy is created by rearranging site links, brand logos and provide to make it easier for the user to find relevant information
Product related information has a lot of text which is difficult to scan. When the user is looking for some specific details he has to go through a lot of information that causes frustration. As discovered in research, rating and reviews are important for users which are not available on the hero section.
Product images are the center stage in this section. The amount of text data is reduced by using section headings as clickable buttons. In this way, the user does not have to scan through to find the information they are looking for.
This project shows UX research on one of the biggest e-commerce giants. In this industry, the race of being the top one has to be won only by giving users a great online shopping experience. I used the competitive benchmarking technique to bring this factor into play. I analysed what experience the user is getting from the other websites and which features need to be improved.
The study only included user voices from the customer feedback on the website. This does not represent a broader customer base of the company. I did the Usability testing of the final design with users who like online shopping. But these users were not necessarily otto.de or any other mentioned competitors' users. Due to time and resource limitations, I did not include otto.de website users in the usability testing of Hi-Fidelity Designs.
I learned from this project that bigger ecommerce giants that have millions of user follow similar design pattern which is also good for users. The same coming to a different website expects the website to behave in a similar way due to the conceptual model built in their minds. It is therefore essential to use existing conceptual models even when designing new things.
Otto.de is a part of the Otto group. It is one of the biggest online retailers in Germany and Europe. They say that as compared to our competitors we are more inspirational, fashionable and service-oriented. Customers and partners are the main pillars of business for otto.de. The brand also invests large resources for sustainability and in updating technology.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
The performance of a digital product against the competitors could be measured using several metrics. This process is called UX competitive benchmarking. The results indicate the strengths and weaknesses of the digital product as compared to others. The results from this research will be used to develop a strategy for the redesign and update of the digital product/website.
Several tasks were conducted on websites to find out the level of complexity of performing each task. The results are shown in the table below.
The test data show that some features that have to be included are; ease of finding relevant information on the Landing page, delivery information, search bar filter, search history, product comparison.
The navigation bar is divided into two parts; the top part contains the navigation bar and other icons. The search bar does not contain the option to search results based on a particular category. The second bar of the navigation contains buttons to go to specific products. this area looks crowded and makes it difficult for the user to navigate.
I used a Mega Menu that shows the general options in the navigation. Other specific options appear when the user scrolls over the options. I also added icons with each option to make them more accessible.
The landing page of the website contains suggestions for the user from his previous searches which is a great user experience. The right side of the page has a grey panel that shows an advertisement. This is a major distraction for the user. As the page is divided the user's attention also divides which results in confusion. Important information about brand service is present down in the page with a lot of text due to this reason it gets ignored.
I decided to completely eliminate the right panel because it was taking up screen space. The page contained only 4 categories to catch the user's interest without confusing him. Slideshows are included to incorporate more information in less space without making the page too long. As special services offered by the brand are very important for otto.de as well as its customers. These have been presented in the hero section.
Cluttered footer with information bombarded randomly in a long footer. Too many visuals from brands make it difficult to find information that the user is looking for.
The newsletter section is reduced by only showing an input field; more options come up when the user clicks on it. A visual hierarchy is created by rearranging site links, brand logos and provide to make it easier for the user to find relevant information
Product related information has a lot of text which is difficult to scan. When the user is looking for some specific details he has to go through a lot of information that causes frustration. As discovered in research, rating and reviews are important for users which are not available on the hero section.
Product images are the center stage in this section. The amount of text data is reduced by using section headings as clickable buttons. In this way, the user does not have to scan through to find the information they are looking for.
This is a branding project for an art festival named "Modart". Different branding items were designed in illustrator as part of this conceptual project.
.png)
Website of a local bicycle producing company that shows background of the company and details of their unique bikes manufacturing.
Website of a fast food restaurant. A unique interface where user can customise ingredients using an interactive layout.
This is a conceptual redesign of the otto.de website which is an ecommerce giant in Germany.
This website was designed to give a 3D virtual tour of house to the user. User can scroll through the interactive layout.
Website of a local website company that shows background of the company and details of their unique bikes manufacturing.
This is a conceptual redesign of the otto.de website which is an ecommerce giant in Germany.
Interested in my work and want to collaborate or work together, feel free to send me an email.
amnazahid.design@gmail.com.
Interested in my work and want to collaborate or work together, feel free to send me an email.
amnazahid.design@gmail.com.