AVIEW: Website
Producing visual designs for an engaging consumer experience
ROLE
Ui/ux Designer
WORK
site mapping, design system, interaction design, a/b testing
TEAM
design team, 3 full stack engineers
TOOLS
Figma/figjam, miro
Quick work intro
With AVIEW International, I was the the UI/UX designer where I learned to navigate through multiple stakeholders by working across multiple teams, I built out and maintained the design system, and designed the website pages with a group of wonderful people.AVIEW International is a startup company that provides translation, subbing, and dubbing services to clients to gain and increase their international viewership across the globe.I was tasked to create their website's interaction design to attract more clients, and stand out from their competitors. Also initiated and maintained the design system to keep everything consistent and efficient. In my time here, we launched 5 pages of the website (Home, About, Creator, Translator, Corporate, & BillC96).
Design Process
Before I start sketching and creating the designs, I booked a quick call with the design and engineering team to gain insight of our design and business requirements. Some things that I wanted to gain insights on was: branding, style guide, any constraints, and what requirements/content do the users look for in these pages.
From those meetings, I learned that our theme will be neon with 3D illustrations, animations, and gradients. I was also given a site map with the business requirements. Afterwards, I continue to browse through our files and realized that we did not have a design system. I decided inform the design lead and gradually build the design system with the existing components and styling guide.
In the ideation process, since I wanted to keep in mind the user experience of the users as they browse through the pages while designing. I decided to research how other designers lay the information out across the pages and the component designs that works the best for different uses. With that, I first created a mood board with design ideas and references from the web. With the layout of the pages in mind, I started the sketching process. Below are the final sketches after multiple iterations and feedback.
Consistency with a design system
As I gradually build the hi-fi screens, our design system grew and eventually we had a design system that everyone uses to increase efficiency and consistency.
Testing & Iteration
I designed two different hi-fi screens for each page and conducted internal A/B and usability testing. I also booked a meeting with the engineering team to determine if the designs are doable and if there are any development constraints in the design. This helped us understand if it was confusing or not, if it was missing any crucial information, and to also determine which screen relays the information better and promote a better user experience. From the feedback, we decided to choose the right screen in this example and made a few changes and notes for the developers.
Result
We successfully launched 5 pages of the website (home, about, creator, translator, corporate, & billc96) early mid 2022. After the launch, we gained a lot of traction from new users and received positive feedback from our current users. Our team of translators, video editors, and dubbers also grew from the launch of the website.
Working as a UI/UX design intern with AVIEW's product and design team has been wonderful and helped me grow as a designer. Through this project, I gained the experience of working on a real-life project and learned how to handle situations where I was faced with constrains.
View here: Website
This is the end of the case study –
Thank you for reading!