Loading

Renovatio

Research, design and development for a small company's website.

The mission

Renovatio Cloud Solutions is a small B2B company based in Austin, TX, that specializes in building custom Salesforce solutions. Their website at the time needed an upgrade in terms of design and content. While the website did a sufficient job of explaining the services provided by Renovatio, the lack of visuals made it less engaging.

As the UX/UI Associate, I was tasked with reconsidering the branding, minus the logo, of the website. The new design needed to be responsive, engaging, modern and have a look different from the competitors, without breaking the communication value.

Research and Benchmarking

I began with researching Renovatio's competitors to understand the type and hierarchy of content, and communication and engagement tactics. After researchingg and drawing references from 6-10 competitor websites, the following benchmarks were established:

  • Hero images are frequent and desired, especially if the subject matter involves people.
  • Iconography is an effective way of communicating technical aspects.
  • Website has to be responsive.
  • Information differentiation needs to be clear.
  • A color pallette needed to be developed.
  • Photo assets had to be created.

Hero images with people as subject matter. Minimalist design.

The Personas

The Old School CEO

He comes from a conservative background and has taken over the family owned oil business. He is a born and raised Texan. He has strong family values and leans towards political and business conservatism. He's an aggressive business man who holds himself, his workers and company to high standards. He has an Ivy League education.

As far as trends go, Mr. CEO is primarily concerned with gas prices and stock market. His technical awareness is limited to accounting softwares. He has tinkered with other digital developments such as smart phones and can operate them, though not expertly. His primary source of information is print media, but he does enjoy reading daily news on his iPad when on the go.

Technological Awareness
Business Prowess
Willingness to Adapt
The Entrepreneur

Our Entrepreneur enjoys being his own boss and is pro-growth. She has drive, capacity and motivation to achieve the goals she sets for her new venture. She is from the Midwest, grew up in a nuclear family. Her younger brother is a budding developer and is one of the primary sources of her knowledge of existing technologies. She is well educated, obtaining her MBA from Europe.

Ms. Entrepreneur has fresh ideas and is a risk taker. Her interest is to invest in technologies to better her company and increase efficiency. She is aware of Salesforce and its capabilities, but could stand to know more. She stays up to date with consumer technology trends and is an avid Marvel comic reader. Her business practices are more liberal, as is her general outlook towards life.

Technological Awareness
Business Prowess
Willingness to Adapt

Wireframing

Wireframe concepts were first hand-sketched, and then digitized using Adobe Illustrator. For better understanding of how the concepts transitioned between devices, wireframes for desktop, tablet and mobile were developed. The idea was to try and convince the client that the new content arrangement and look did a better job of communicating.

wireframe

Concept 01

SEO Name
SEO Name
SEO Name
wireframe

Concept 02

SEO Name
SEO Name

Design and Prototype

Modern design standards were defined and executed. The design process involved several rounds of client meetings to gather feedback, have discussions and establish the final website. Icons were developed to easily communicate the meaning of technical jargon. Once the design was approved, I used Axure RP to create fully functional high fidelity prototypes

wireframe

Concept 01

SEO Name
SEO Name
wireframe

Concept 02

SEO Name
SEO Name

Color

Primary Colors


Secondary Colors


Primary Interaction Color


Secondary Interaction Color

Typography

This is a page header.

This is a subtitle.

This is a non-clickable subtitle.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Iconography

The following is a sample from over 30 icons made for this website. Examples of topics included Internet of Things, Cloud Application Development, Order Fulfillment, Quote to Order Apps, etc.

icons illustration b2b
icons illustration b2b
icons illustration b2b
icons illustration b2b
icons illustration b2b
icons illustration b2b

Development

I was responsible for executing responsive web development. Along with a coworker who has better mastery of JavaScript and back-end technologies, we worked in tandem to create and publish the website.

My responsibilities included:

  • Developing a fully functional, responsive prototype using Axure RP.
  • Creating image assets for we use
  • Using HTML5 and CSS3 to create the website
  • Website be Bootstrap or Foundation compatible. I used Foundation.
  • Execute website to closest likeness of approved designs.
  • Quality control on various screen sizes and browsers

Agile software development was employed. Trello was our primary method of keeping track of development and bug ticket assignment/resolution.

Final Design and Takeaways

The final design was arrived on by discussing approximately 4 total iterations with the company members. They also served as the tester base.

Design

I found the discussions revolving around structure of information to be the most helpful in the design process. It's always helpful to hear more than an "I don't like it." I worked under the company's Director of UX, Latife Yardim, and she provided constant guidance and direction on how to improve my design. On an average, we covered details about how to draw attention to particular areas, what information hierarchy made most sense, whether iconography was relevant to content, etc. She also encouraged keeping brand intact, and develop aesthetics in a way that helped the brand grow. Overall, I believe that we arrived at a design that breaks the traditional look of company websites similar to Renovatio, without compromising on the information and communication value.

Development

In terms of web development, I worked along with a backend developer. We were guided by the company's CTO, Osman Seyrek. He and the backend developer helped me understand the workings of backend, and how the frontend and backend technologies work together. It was during the development process that I learnt version control using GitHub, BitBucket and Terminal. I also got a chance to strengthen responsive skills using Bootstrap. The development process also required web-friendly asset generation, which was accomplished via Adobe Suite.

Visit Website