OVERVIEW
Kyocera (KDDA) Website Redesign
In October 2018, I led a redesign of our West Coast division's website. Kyocera Document Solutions' headquarters unveiled new branding guidelines, and our website hadn't been updated since the early 2000s.
It was the perfect opportunity to take the new branding guidelines and adapt them to the web.
MY ROLE
UX Designer
TEAM
Allan Sahagun, Head of Design and Product
Damion Gordon, Senior Visual Designer
Matt Trinh, Developer
TIMELINE
November 2018 - January 2019
TOOLS
Sketch, GoodNotes, Adobe Creative Suite
PROBLEM & GOALS
Our old website was focused on our old business goals - selling multi-functional printers (MFPs). We needed the website to be in line with our vision of selling software solutions.
We needed to accomplish the following:
- Make the website reflect our current objectives as a software company developing document management technology located in the Silicon Valley.
- Create a fresh, modern look using the company’s new branding guidelines
- Responsiveness for different screen sizes
AUDIENCE
I didn’t create personas, but I designed from the perspective of who I imagined would be looking at our website including:
- Prospective candidates interested in working in the west-coast offices
- Professionals from the document management industry looking to learn more about us
- Potential customers
- Other Kyocera Group employees (Kyocera is a huge conglomerate with thousands of employees)
TLDR
Impact
Redesigning the website helped my organization by:
- Promoting our new company vision of selling software solutions
- Generating positive feedback from our parent organization
- Attracting new employees with our careers page (we saw a hiring bump in 2019 and 2020!)
*AS OF 2024 THE WEBSITE MAY APPEAR DIFFERENT IN SOME PLACES
DESIGN
Sketches
After naming our goals and target audience, I began my design process by sketching.
When working on a project that’s being built from the ground up, I try to sketch as much as possible before I jump into the design software.
Using my iPad, I sketched out these early layout explorations for the homepage and contact page.
Using an iPad is convenient because I can easily export the sketches directly into a design software when it's time to make wires or mockups.
Wireframing
After sketching, the next step was creating wireframes. Responsiveness was a top priority, so I kept mobile layouts in mind when sketching and wireframing.
I played around with a few different page header ideas on the desktop wireframes. I wanted to stick to a simple layout with minimal text.
I got a little stuck on different header ideas, and my helpful colleague Damion helped me get unstuck by giving me pointers and layout ideas.
Using our new brand guidelines
Translating the new brand guidelines from print to the web was one of my favorite parts of this project. It was really fun to have a color palette, stock images, and fun gestures to choose from and reimagine in the context of web design.
LAUNCH TIME
High Fidelity & Handoff
After creating these wireframes and studying the brand guidelines, I created high-fidelity mockups. I started off with a few designs on my own and handed them off to my manager, Allan, and senior visual designer, Damion for feedback. I loved the iterative back and forth because it made the problem feel collaborative and fun.
I’m very proud of how we were able to translate the print guidelines to the web. We used the layout principle to inspire the hero section of each page on the website. Kyocera blue was used in buttons and links to denote interactivity. We also used gestures in brand photography to enhance the messaging of each page.
To bring the website to life, I handed off my mockups to my front-end developer colleague Matt! He did an excellent job creating reusable React components that could be used throughout the front end.
RETROSPECTIVE
What I learned
I learned how to take our brand guidelines designed for print and translate them into web-based UI.
I worked closely with a developer on handoff, and our synergy was collaborative and fun. If I could go back, I would use a CSS exporting product like Zeplin to easily share assets like images, custom fonts, specific margin spacings, and colors.
I would also look deeper into free content management systems to enable non-technical folks to create blog posts without developer resources.