Sovos is a local company that helps corporations with tax compliance.  I recently did a design challenge for them. 

Sovos has a professional website but the UX team is trying to make the site less dry.  The users are professionals who are used to looking at charts and government websites so the challenge was to give the designs more character and fun without being too edgy or casual.

Design Challenge Part 1- THE LOGIN SCREEn

The challenge was to design a login screen for their corporate website.  I was given inspiration from the team and their logo.  I did not know how to animate but the inspiration was animated! So, I got to work learning how to use Adobe After Effects.  After many hours I came up with a very simple animation.  This used the current layout of their pages on their site, and had some fun, very simple moving parts.  I researched the best login pages and made sure to have a username and password field, and also various buttons for help requests and learning about the company.  I used the corporate pallette and designed for a desktop because that is what their users use. 

After submitting my first draft I received feedback from the director of UX design.  She sent excellent feedback suggesting that I update my animation to have a more realistic movement (a bounce at the end as if the "V" of Sovos was hitting the ground).  She also thought that my boxes and borders were too heavy and that dated my design.  I confirmed with her that I didn't need to use the current layout (which I had been designing into) and was excited to get to work on the second more modern iteration. 

My second iteration was redesigned completely.  I was in complete agreement with the feedback I had gotten and was excited to learn more about the animation tools in after effects.  This was more similar to what my original vision had been for the animation but I had not learned enough about after effects to execute it.  I had seen these blue triangles appear a few times on their website and wanted the spining triangles to take up space and spin at different speeds into the slanted line.  This is reminiscent of the "V" in the Sovos logo.  I took the advice I had gotten and got rid of all of the borders and boxes and updated the design to have simple lines to type into  and changed the side bar to be a light, tonal, clean bottom bar for the extra buttons for the user. I submitted this to the team and they liked the changes!

Design challenge part 2- The modal

The second part of the design challenge was taking a modal that existed and redesigning it.  The modal that was given to me was filled with information I didn't understand but it also looked dated and messy. I wanted to redesign it so it was easier to read.  

I took the modal that was given to me and made it the corporate font, roboto.  This already helped things look better.  Then I rearranged the information at the top so it didn't take up so much space. I used the corporate palette to separate the different sections of information. I made the account number at the top an obvious downloadable item by adding an icon and made the invoice numbers more obvious as links by making them blue and underlined.  I also shaded every other line of the chart so that it was easier to read. 

I submitted this design to the team and received feedback similar to the the Log In screen design challenge.  The containers felt heavy and dated and everything looked too separated. They felt the navy was too harsh and that although the hierarchy of information looked good it was too boxed in.  They liked the link and download adds but didn't love the overall feel of the modal. I took this feedback and got back to work!

My second iteration of the modal was much cleaner. I took away the edges and made it less colorful and more modern by taking the majority of the modal to shades of grey and white.  I took out the boarders and added in very subtle shadows to separate them from the background. It looked so much better! 

Conclusion- what i learned

I was surprised at what you don't see sometimes even when you are looking at inspiration.  Looking at the cleaner more modern second iterations I am surprised that I didn't land there in the first place. 

The first project was so fun because even though I only learned the basics, I got to spend time on animation.  After the first iteration I liked it so much that I added the animations to my site.  After getting more comfortable with the basics I was able to execute my original vision.  That was really exciting.  It took some time and effort to get used to Adobe After Effects but the more I used it the more I liked it. 

The second project was interesting because I didn't know what all of the numbers and information that was given to me meant, so looking at it from an outsiders point of view and making it visually appealing was interesting.  I had to figure out the hierarchy and make sure that someone could read what they needed to easily and know what there was to click on to get more information. 

These design challenges were very fun and different that anything I had worked on and I look forward with taking everything I learned from them and using it in future design projects and challenges.