IETC Website Build

Designing a Debut

When planning a project for 2020 at the start of 2019 it can seem far off, but when it comes to planning, meetings, revisions and building the designs, May 2020 can come fast. Beginning in May of 2020, UVU will be hosting the annual Intermountain Engineering, Technology & Computing conference (IETC) that will begin with UVU and make its way round each of the prominent Utah universities each year. Working in a team of two with oversight from a mentor, we were given the opportunity to design branding and a website for the conference for when it makes it debut in May 2020.

As the conference is titled with “intermountain” and will be hosted by several Utah universities, the theme from the start was to include mountains. During this stage we researched different mountain ranges in Utah and modeled a few designs after ranges like Timpanogas.

Also in this stage we retained a running color theme of red, green and blue. This color scheme seemed to fit the project because first, it represented each university color and then second, “RGB” are colors used commonly throughout engineering, technology and computing. The logo designs varied heavily throughout this stage as it was essentially a brainstorming period.

After receiving feedback on the initial designs, we chose to go with a simplified logo that conveyed the look of mountains but also retained a modern and “tech” feel, much like the logos from “Front” conference and “silicon slopes”. We also worked on confirming a more original typeface for the logotype as along with the logo, it would be something that is seen many times over. Once we had decided on several logos, we took them around the Computer science building at UVU and asked people their thoughts on the logos.

We decided upon three major inquiries for the research; the first two being an easy “which is your favorite and least favorite” and the third being “what program are you in?”. We decided on these as we could gauge which logo people connected with and whether their area of study connected to the theme of the conference, therefore possibly influencing their decision.

Once the survey had concluded, we found that number 6 had the majority of votes with number 5 tailing behind. Personally it was a surprise that many had chosen number 6 and I wondered if we had created an unintended bias from the way that the logo placement had been set up on the survey page (see above image).

While the website is still in development, we wanted to make sure there was a current landing page that would announce the event and allow for those interested to submit papers and/or sign up for updates on the full site and event.

When creating the mockup, we knew that we wanted to include the logo, a header, information about the conference, a coming soon message and a place to sign up. We also used a gradient of the red green blue that was overlaid on an image of the iconic salt lake city skyline and mountain range.

Upon receiving feedback from our project manager, we made necessary changes to the landing page to finalize the look and information on the page. We updated the logo, added in the official dates, added in an official UVU logo to inform of who was hosting and decided on a background image that would better represent where the conference would be.

Version 2 of the landing page was created in a fairly fast paced manner as we had to fulfill a temporary landing page request. This landing page was intended to be a placeholder that could gather information and inform people about minor details about the upcoming conference.

During the publication of this phase we focused primarily on the landing page of the site, gathering visitors emails for updates and providing information to visitors and interested parties. During this phase we began with creating a mood board and studying other conference sites to draw inspiration from assets that we saw. We also started building wireframes, mainly focusing on the wireframe for the landing page as this was the main focus for phase one.

When designing the wireframes for the landing page there were two goals for the landing page, the first being that it needed a form for people to submit a file and the second being that it needed information about the event. For the form I designed it as a floating area that was enough of a focal point to draw the eye to it while a person would be browsing. Having the form hang off of the landing page hero image section helped to draw more attention to the object. The secondary information of date, time, venue and other information accompanied the form area by staying nearby but not overpowering the form as the focal point. The icon and text design that can be seen in the hero image section was created with inspiration drawn from other conference and event websites. Its a simple and nice design as its subtle in its presentation but also accomplishes its purpose.

After some feedback for the first wave of wireframes we re-designed areas of the wireframes so that the landing page wasn’t focusing on the form. It made more sense to draw the visitor into visiting the actual papers page to learn more and sign up. Also at this stage in the production, the submission system was not set up yet so we would have had a hollow form. With this knowledge, we opted to go with an eye catching call to action that directed the visitor to the paper submission page. On the paper submission page, we added a plethora of information and also a button that would link to correct scholarly guidelines for submitting a paper.

Once we had got the wireframes to a place where they were more functional and having done some light prototyping with them, we moved onto the surface comps. Within this stage, we were able to finalize a few design choices and add more substance to the style guide. As we built out the surface comps, we continued to iterate upon areas of the pages to display visual hierarchy or for colors and contrasts to work together. It was important for us to revise as color came into the equation due to it having effects upon principles such as hierarchy, tone and grouping.

Throughout this stage we received feedback several times and continued to reiterate on our designs. Reiterations were not carried out because wireframes were wrong or unsubstantial but rather because as we received content, we were able to better plan layouts and designs so that the content could fit and be effectively displayed along with copy that we received and other elements. The reiterations are also a good reminder that needs change throughout the design process and even after a site is live.

After building the final surface comps and prototypes, we passed the project to another team to build the live site using our designs. We also included a documentation of the project to pass to the new team along with the asset files.

Related posts:

As cannabis has been treated more tolerantly in recent years and was fully legalized last fall, it’s become more available to a group of people whose habits and assumptions have been formed by…

This week I share the where, why and how much of getting a UNIX shell account. I go through the benefits of having a managed UNIX Shell account at a host like Panix, the World or the Well.

Everyone who has ever had a desire to start a side-hustle for extra income has come across starting a blog website as one of the alternatives. Some people mow lawns on the weekend, others might make…