Your address will show here +12 34 56 78
UI / UX DESIGN & RESEARCH
WATCH CITY AUDIO & VISUAL SYSTEMS
ROLE & CONTRIBUTION
UI / UX Designer and Project Lead
User Research, Mind Map, Mood Board, Low-Fidelity Wireframes, High-Fidelity Wireframes, Brand Board, Prototypes
PROBLEM
The current website isn't equipped to provide shopping cart transactions for desktop and mobile customers. Customers are unable to build a audio or video system without visiting the in person showroom and the current website doesn't have this.
BRIEF
The website will provide clients with a product page, photo's of the onsite showroom, the latest blog information, a library of audio products and services, and contact information.
BEST AT STATEMENT
My audio and visual products website is best a providing high end, installation, and services that is modern, clean layout, easy-to-find, technical, educational, easy-to-navigate, illustrative, informative, transactional, relevant, and convenient.
SOLUTION
Build a website that provides information about the services and expertise for high end audio and home theaters. The ability to build a custom system on the website will empower customers to visualize their needs before visiting the showroom. A product page will be added along with a shopping cart to allow potential customers to make transactions.
  • Text Hover
Figure 1: This infographic shows my creative process and illustrates the steps that I use while working on a digital project.
RESEARCH + DEFINE
COMPARATIVE ANALYSIS
  • Text Hover
Figure 2: At this stage of research, I'm looking for competitors in the same industry so that I can see the current trends to compare.
MIND MAP
  • Text Hover
Figure 3: Mind maps help brainstorm and then organize a collection of information connected to the business into a structured and meaningful way. This typically helps me with building navigation and how information should be organized on a specific web or mobile screen.
PERSONA
  • Text Hover
Figure 4: Personas help me to create understanding and empathy and gain perspective of the end users.
DESIGN
LOW-FIDELITY WIREFRAMES
  • Text Hover
Figure 5: The low-fidelity wireframes allow me to use my sketching stills to freely explore options for screens. I created three home screen versions which could potentially be shared with the client at this stage to see if the project is on the right track.
HIGH-FIDELITY WIREFRAMES
  • Text Hover
  • Text Hover
  • Text Hover
  • Text Hover
  • Text Hover
  • Text Hover
Figure 6: The above high-fidelity wireframes were created in Balsamiq. I take the low-fidelity wireframes which the client might want to see at this stage for navigation or functionality before we move into the branding stages. I could create a high-fidelity prototype at this stage as well for testing purposes.
MOOD BOARD
  • Text Hover
Figure 7: Two of my favorite places to look for inspiration are Behance and Dribbble. I can see what the current design trends including colors, typography, layout, animation, etc.
BRAND BOARD
This is actually one of my favorite parts of the process. I created the logo from scratch for this project because I wanted something unique and fresh to be the foundation of the company identity. I love the process of picking colors, fonts, and images to go along with my feeling that this should be a modern sleek looking brand.
  • Text Hover
Figure 8: The above brand board includes colors, fonts, stock or customer images, and branding which will be the foundation for how the website and mobile app will be created.
FINAL SCREENS
  • Text Hover
  • Text Hover
  • Text Hover
  • Text Hover
  • Text Hover
PROTOTYPE
FINAL THOUGHTS
Watch City Audio Video Systems is inspired by a real company and the final product was designed Adobe XD including the prototype. This project has about a month to complete, and I'm proud of the final research and design portions of the process.