Role
UI/UX Desinger
Tools
Miro for FlowChart
Miro for Wireframe
Illusturator
PhotoShop
Adobe Xd
Duration
10/2020
Concept
Customers can browse my instrument store's website to get the information about this store. This website has different functions, like Blogs, teacher information, and the online store.
Ideate
After my instrument store closed, I realized that having an online store is actually important for every sales company. As a beginner of UI designer, I decided to build this website for practice. I listed all the work that I had done at the store and chose some critical parts that could benefit the online users to help them buy products easily. I find that the blog is a good way to interact and increase trust with customers.
Persona
User Journey Map
Guideline
FlowChart
WireFrame
Design
Design
Helping customers find what they want from the website is the main point, so the menu has clear categories for users to search. I set 'Product page’ on the home-page to give customers a strong impression.
The second part focused on is 'Instrument Courses' for those who want to learn ukulele or guitar. I put the lesson banner on each page, and push users to browse blog articles to know us better, it's a good way to win the trust from customers.
Color
Interaction
On each page, users can see more than a piece of informations by setting some blog posts’ preview images below the teacher information page, and potentially motivate them to get to know us actively.
Mockup
