Project Overview
Project Overview
Project Overview
The goal of the project was to design a one-stop-shop Mobile responsive website for an audio company. Aside from product display and e-commerce the platform also has a gamified aspect and it allows the users to engage with other users to earn rewards.
The goal of the project was to design a one-stop-shop Mobile responsive website for an audio company. Aside from product display and e-commerce the platform also has a gamified aspect and it allows the users to engage with other users to earn rewards.
The goal of the project was to design a one-stop-shop Mobile responsive website for an audio company. Aside from product display and e-commerce the platform also has a gamified aspect and it allows the users to engage with other users to earn rewards.
My Contribution
My Contribution
My Contribution
I was the design intern on the project. I was involved in everything from defining the brand and personas, creating flows and wireframes, all the way to creating final UI designs as well as designing the mobile responsive website.
I was the design intern on the project. I was involved in everything from defining the brand and personas, creating flows and wireframes, all the way to creating final UI designs as well as designing the mobile responsive website.
I was the design intern on the project. I was involved in everything from defining the brand and personas, creating flows and wireframes, all the way to creating final UI designs as well as designing the mobile responsive website.
The Basics
The Basics
The Basics
I started with strategy and defined the brand and it’s target audience. Since we were talking about a new company we started by defining the brand attributes and created a brand statement. Regarding the users I was happy to find out that the team has already been talking to their target audience and had a lot of insight so it was only a matter of consolidating the findings to form a user persona. Both of these documents guided our decisions during the rest of the project.
I started with strategy and defined the brand and it’s target audience. Since we were talking about a new company we started by defining the brand attributes and created a brand statement. Regarding the users I was happy to find out that the team has already been talking to their target audience and had a lot of insight so it was only a matter of consolidating the findings to form a user persona. Both of these documents guided our decisions during the rest of the project.
I started with strategy and defined the brand and it’s target audience. Since we were talking about a new company we started by defining the brand attributes and created a brand statement. Regarding the users I was happy to find out that the team has already been talking to their target audience and had a lot of insight so it was only a matter of consolidating the findings to form a user persona. Both of these documents guided our decisions during the rest of the project.
Website Architecture
Website Architecture
Website Architecture
After that I proceeded with creating a flowchart showing how the platform would be organized. The client had some features in mind so I made sure to discuss them and include them in the plan.
After that I proceeded with creating a flowchart showing how the platform would be organized. The client had some features in mind so I made sure to discuss them and include them in the plan.
After that I proceeded with creating a flowchart showing how the platform would be organized. The client had some features in mind so I made sure to discuss them and include them in the plan.
Style Guide
Style Guide
Style Guide
Next I moved to exploring the overall look of the website. I did this by creating a style guide following the brand guidelines. I also designed 3 landing page mock-ups using the same styles but different layouts. Taking this route instead of creating mood boards helped communicate different directions we can take more vividly as the client could clearly see the impact each direction would have.
Next I moved to exploring the overall look of the website. I did this by creating a style guide following the brand guidelines. I also designed 3 landing page mock-ups using the same styles but different layouts. Taking this route instead of creating mood boards helped communicate different directions we can take more vividly as the client could clearly see the impact each direction would have.
Next I moved to exploring the overall look of the website. I did this by creating a style guide following the brand guidelines. I also designed 3 landing page mock-ups using the same styles but different layouts. Taking this route instead of creating mood boards helped communicate different directions we can take more vividly as the client could clearly see the impact each direction would have.
Wireframing
Wireframing
Wireframing
After I defined the flow and what screens needed to be designed, I proceeded with creating the wireframes to explore the experience in more detail on a screen-by-screen level. The main focus was the product showcase flow which sits at the heart of the app.
After I defined the flow and what screens needed to be designed, I proceeded with creating the wireframes to explore the experience in more detail on a screen-by-screen level. The main focus was the product showcase flow which sits at the heart of the app.
After I defined the flow and what screens needed to be designed, I proceeded with creating the wireframes to explore the experience in more detail on a screen-by-screen level. The main focus was the product showcase flow which sits at the heart of the app.
Components
Components
Components
After finalising the style guide based on brand guidelines, I started designing the reusable components for each of the pages on the flow.
After finalising the style guide based on brand guidelines, I started designing the reusable components for each of the pages on the flow.
After finalising the style guide based on brand guidelines, I started designing the reusable components for each of the pages on the flow.
Buttons
Buttons
Buttons
Buttons
Cards
Cards
Cards
Header
Header
Header
Footer
Footer
Footer
Design
Design
With all the parts ready, I started designing the website, one screen at a time. The main challenge here was to make sure that the components are placed no the page in such a way that nothing breaks when the website is viewed on the mobile.
With all the parts ready, I started designing the website, one screen at a time. The main challenge here was to make sure that the components are placed no the page in such a way that nothing breaks when the website is viewed on the mobile.
Design
With all the parts ready, I started designing the website, one screen at a time. The main challenge here was to make sure that the components are placed no the page in such a way that nothing breaks when the website is viewed on the mobile.
Home
Home
Home
Product
Product
Product
Categories
Categories
Categories
Mobile
Mobile
Mobile
Conclusion
Conclusion
Conclusion
This was an interesting project to evaluate, as business priorities meant that the goals, format and end user changed between completion and go-live. Our original user was the customer, browsing and shopping on their own devices in order to learn more about and shop economical audio devices.
This project was also a great learning experience in how seemingly separate areas of the business rely on each other in order to meet their individual objectives, as well as business goals. When approaching a new project, I am reminded of the importance of both creating a narrative to clarify purpose, goals and expectations, and bringing in stakeholders from across the business to contribute to product ideation and highlight any potential risks. It was also a great exercise in collaboration between design, product and tech, taking a pragmatic approach to the change of direction and still being able to deliver a usable product with time and resource constraints.
This was an interesting project to evaluate, as business priorities meant that the goals, format and end user changed between completion and go-live. Our original user was the customer, browsing and shopping on their own devices in order to learn more about and shop economical audio devices.
This project was also a great learning experience in how seemingly separate areas of the business rely on each other in order to meet their individual objectives, as well as business goals. When approaching a new project, I am reminded of the importance of both creating a narrative to clarify purpose, goals and expectations, and bringing in stakeholders from across the business to contribute to product ideation and highlight any potential risks. It was also a great exercise in collaboration between design, product and tech, taking a pragmatic approach to the change of direction and still being able to deliver a usable product with time and resource constraints.
This was an interesting project to evaluate, as business priorities meant that the goals, format and end user changed between completion and go-live. Our original user was the customer, browsing and shopping on their own devices in order to learn more about and shop economical audio devices.
This project was also a great learning experience in how seemingly separate areas of the business rely on each other in order to meet their individual objectives, as well as business goals. When approaching a new project, I am reminded of the importance of both creating a narrative to clarify purpose, goals and expectations, and bringing in stakeholders from across the business to contribute to product ideation and highlight any potential risks. It was also a great exercise in collaboration between design, product and tech, taking a pragmatic approach to the change of direction and still being able to deliver a usable product with time and resource constraints.
Let's talk!
Always open to talk about design, product & tech in general
Always open to talk about design, product & tech in general
