Capella Systems had their website designed and built by a contract designer over five years before I joined the company. As a result, the aesthetic and information was not only outdated, but updating the website's UI and creating new content was very difficult and time consuming since there was no hand off guide.
Capella wanted to give their website a more fresh and clean look that suited their enterprise level software, but also make the website as a whole more useful: provide users with key info that influenced whether or not contacting Capella was worth their time. And of course, get them to click that CTA.
- Give the Capella brand a make over to fulfill the request to look more clean, fresh, and modern
- Emphasize software workflow rather than products to help users determine what best suits their needs
- Help customers find the answers to their questions easily by updating the content
- Increase the predictability of the website by making the language in the content and buttons more clear
I'm very much someone who likes to plan, create lists and spreadsheets, and have a clear roadmap of what's ahead - both in my personal life and professional life.
This overview helped me plan out what tasks I felt were necessary, given my time constraint (4 months, part time since my other roles in my position) and resource constraint (one designer - me), what each tasks needed to accomplish ie what purpose they served, and keep other helpful notes to myself.
Additionally, it gave me a central place to refer to what goals we had with the website and how I planned on accomplishing those goals.
Because we didn't have the liberty of a lot of time to research, I sat down with Capella's CEO, Ikuyo Yamada, and we discussed what changes and goals we wanted to see for the new website. Together, we explored different ways we might accomplish those goals.
For example, we really wanted to provide our potential and returning customers with more information that would help them see how Capella's software could fit their needs without the website being tiresome to read. In this industry, video transcoders and live encoders can be deployed in many different ways: on premise, in the cloud, using a VM, offline, etc., so sometimes it can be tricky for users to see if a new product could really fit into their workflow in a truly effective way. To provide users with the information they wanted to see before determining if contacting us was truly worth their time, we decided we needed to highlight our strengths and various workflow options in various ways, including the information in the hero section of the home page, with creation of cards about workflow on the home page, the expansion of the workflow page itself, and making the organization of the site more clear and easy to navigate.
Some items that we wanted to include in the website were things that we knew couldn't be done within the time frame of the website creation and would require the help of other parties, such as making new white papers and video demos of specific software features. Thus, the features and items we wanted to include were sorted into different levels of priority.
When reviewing the original website and determining different areas of improvement, I felt that the navigation was, for the most part, solid. The website itself was not the product interface itself and was quite straightforward. We planned on adding a few more pages, such as a "Why Capella" page, but generally, I just needed to determine how users could get from one page to the next and where the new pages would be nestled under.
For me, when it comes to LoFi, quantity over quality is the name of the game. My goal at this step was simply to get some ideas of different UI layouts and start to envision how this clean, modern website might really look. I selected six main pages that required different formats, listed the different features that were to be included on each page on the back of the papers, and got sketching.
Luckily, we had some additional help on the marketing/writing front, but this also meant the process of rewriting the content on the website became a collaboration between a team of four. I took on managing the process by creating a spreadsheet that essentially told us everything that needed to have writing for the new website. We also had weekly meetings to keep priorities and what we needed from everyone clear. This process began in tandem with the end of lofi process and throughout the midfi process because we wanted as much time on this as we could get, so the sooner we knew what needed language, the better.
I broke this down from a deductive point of view. Each tab of the spreadsheet represented a page on the website. The one depicted above is for the page of one of our products, Cambria FTC/Packager. On that page was an overall hero section and below that different tabs, such as for the product overview, features, supported formats, and specs. Then, I broke down what text was needed for each tab. On the "Overview" tab, we wanted an About section and an FAQ sections to help give users a clear idea of what this product entailed.
Utilizing the Status dropdown column was vital for understanding our progress as a team, especially with such a huge volume of content to be handled, and helped us keep track of what was needed from each member of the team in addition to the notes column to the side. I also took advantage of color coding our texts to help us understand at a glance what was going on without having to actually read multiple columns.
I started with making my type rules for desktop and mobile before jumping into MidFi wireframes, so that the information hierarchy of the text was apparent even if the final version of headers and other text wasn't.
Between LoFi, MidFi, and HiFi, I spent the most time here on MidFi. Although I didn't have to worry about specific coloring, graphics, or content, it was important for me to start making my design system and rules here when it was lower stakes, so that when I was ready to go to HiFi and actually building the site, I was set up for success.
At this time, I also started to make components on Figma, so that I could easily apply the finalized color scheme when I was ready to take the design to hifi.
At this point, I finalized the type rules for each type of text style I wanted for both desktop and mobile. I also established the color palette that would be used for the HiFi wireframes. The neutrals at the bottom was the primary and would take up the majority of the space, the blues were secondary and would be utilized in cards, banners, etc., and the oranges were my tertiary colors for little accents and my buttons.
At this point, we were starting to wrap up on all the content that needed to be rewritten/written, and I was able to plug a lot of that text into the wireframes. Because of all the careful planning and taking a good amount of time during the midfi step, we were able to avoid making any major changes to format, but still some items did get some adjustments after looking at overall balance, coloring, length of final draft text, and graphics. Thankfully, I dedicated time to creating components and cleaning up auto layout before in order to make these little tweaks that much quicker.
With the HiFi wireframes created and just over a month left, I made the call to skip creating an extensive prototype in Figma and jump right to building this out in Webflow. It was an easy decision to make because I didn't have to worry about needing to communicate my design, navigation, animations I envisioned, etc. to an engineer. I knew how pages were meant to connect, I knew how different UI was supposed to interact on screen, and I knew that if I spent too much time on a prototype that wouldn't truly be contributing to the process, I wouldn't have enough time to build the site. As the designer and builder, this was a corner I was able to cut in order to hit the deadline and allow enough time for testing before our official launch.
Now it was time to actually build what we had spent so much time preparing for.
I chose to use Webflow because of my experience with it and although it doesn't require you to code, you have the ability to utilize code if you have special use cases that can take advantage of it. It's scalable, powerful, and you can set up different roles for other editors, like marketing people, to easily create new posts if you have a page like a newsfeed.
Once again, as depicted, a list (other lists not pictured) saved the day. Balancing my other non-design duties and working out the best plan of attack for getting the site complete by mapping out what I would complete week by week kept me organized, reassured that it would get done, and focused.
From there, once the MVP was finally built and we launched it to a staging domain, the marketing contract workers took another sift and we edited any language we wanted to change and the rest of the office all looked through and sent lists of little errors or bugs they noticed. Once again, I did another wave of edits and finally, it was ready for it's official launch done a few business days early before our desired deadline.
