Arch Systems Website Expansion

Arch Website Expansion Project



Project Summary (TL;DR)

Problem: There was a need to update the marketing website to showcase Arch's new products and services and to provide richer information for a higher conversion rate.

Opportunity: I was in charge of end-to-end (designing to implemention) of these changes in the marketing website which included research, designing a style guide, custom icons, and web development.

Impact: The marketing site was expanded from a single page to >50 pages. Additionally, I optimized desktop/mobile loading speeds by 50%, increased SEO scores by 40%, and improved scaling of the with Jekyll, a static page generator. As a result, the new site contributed to 10X visitor count since I started working on the project.


Project info

As Arch adds more pilots in its pipeline, we needed to update available information such as the products and services offered on the website, guide visitors to find it fast, and demonstrate value to potential customers.

Visit website here.

*NDA cleared with Andrew Scheuermann, CEO of Arch Systems

Details

  • Tools: Sketch, Photoshop, Illustrator, Principle, InVision
  • Timeline: June - Dec 2017
  • Project Type: Internship
  • Role: Designer
  • Skills: User Experience, Front End, Rapid Prototyping

Goals, Role, and Team

Goals for this project would be:

  1. Update content in a coherent manner to communicate what Arch does and show our progress.
  2. Showcase Arch's solutions as well-established, ready, and working — while not overstating what we can/cannot do.
  3. Increase engagement to convert visitors to customers and partners through strategic design.

I worked closely with the business development team — Arch’s CEO and Cofounder, Andrew Scheuermann, and VP of Marketing, Tallis Blalack. My role as UX designer was to conduct research, design graphic assets, mocks, and prototypes, and develop the new pages.

Audience

On a high level, Arch provides end-to-end IoT solutions targeting operational technology (OT) companies — OEMs (Original Equiment Manufacturers) of industrial equipment and operators.

Our target audience are:

  • Prospects/customers who wants to find out more about what Arch does and how we can help them
  • Existing customers engaged in discussions: help them understand more about Arch’s solutions and establish credibility
  • The broader community, to inform how we are working towards our vision for a more connected and sustainable Earth.

Research

Due to limitations to conducting interviews with operations, I did inferential research and learned the processes within the relevant industries such as shipping and logistics to gain a better idea of how to demonstrate value. I also looked up on our competitors through their websites, analyzed and drew insights to see what worked and what did not, and brainstormed for ideas done on sketches.

image-1

image-1

Wireframes and Information Architecture

Next, I constructed the information architecture and accessibility of the pages. I started out with low-fidelity sketches and then moved to a medium-fidelity information architecture to visualize the user flow. We prioritized and rolled out the ‘Solutions’ pages first due to implementability and to demonstrate use cases. The 'IOTile/Product' pages were next in line.

image-1

Mock ups

Initially, I used Photoshop to design the website for the ’Solutions' pages (before design system was in place). I attempted to implement some sort of consistency and kept the work organized by color-coding the layers and adopting a simple naming convention. Going lean, I did a few high-fidelity mock ups and presented to the business team how these final pages would look like.

image-1

image-1

Halfway through, I switched over to Sketch as my primary tool after picking up speed and proficiency in it. Additionally, after implementing a design system, it was much easier to create new pages.

image-1

Prototyping/Reiteration Cycles

Using the CRAFT plugin by Sketch, I was able to conveniently upload all artboards to InVision within the app. I organized my artboards into collections with a standardized naming convention.

image-1

Prior to InVision, development of early pages were minimal as it did not require much reiteration. I would present already coded pages and asked for feedback through Google Docs and Slack. Feedback was slow and inefficient due to miscommunication and confusion to which part of the screen the feedback was pointing at. Furthermore, I was putting on 2 hats (Designer and Web Dev) at the same time.

The scale of this project was different and takes up a more development time. Being the only designer meant that I had to learn from outside the company. I picked up best practices from Medium articles, and learned tips and obtained valuable advice from communities such as UX Designer Community (UXDC) and Designer Hangouts for approaches on working with a team. As a result, I introduced InVision to the team as a platform for feedback and the result was that feedback on specific areas of the page are demarcated clearer, resulting in efficient iteration cycles.

image-1

Development

Once the design and content was completed, I gathered assets from the high-fidelity mocks and coded out 'sections', a feature of Jekyll, that uses tags in Front Matter and custom variables (Liquid) for easier editing.

After completing the pages, I tested the responsiveness for mobile, Search Engine Optimization (SEO) scores and deployment on a staging server, before releasing for production.

Results and Success

The site including ‘Solutions’, ‘Product', and a new home page were released after 4 months.

There were immediate results since the release of the ’Solutions' pages on Google Analytics since August where these new pages account for 20.67% of the total visits since the release.

image-1

The ‘IOTile/Product’ pages accounted for 58.92% of total views at the end of the week of release. We also have a new front page that better explains our product line.

image-1

Analytics dated 11/19/17.

What could I have done better?

While I had done formal research on the requirements of the project, I lacked severely in quantity of feedback as I was only receiving feedback about the site from mostly my internal team and close friends.

For implementation, I learned new tools to prototype faster and efficient ways of gathering feedback that helped me gain speed in delivery. However, more best practices with these tools could be applied such as naming convetions and providing a guideline for feedback to my team as the information was a little over the place. The website is ever-evolving and continual improvements are expected as Arch continues to expand.

Contact for more info