Webonise Site Redesign
My team and I were tasked with redesigning the entire Webonise marketing website. We collaborated with our design director, fellow designers, our development teams, and our internal stakeholders during this entire process.
Summary
User Tracking and Stakeholder Collaboration
Analyzed user tracking data to understand user behaviors
Collaborated with internal stakeholders to define expectations and preserve essential features
Ensured continuous communication among team members
Information Architecture and User Flows
Created sitemaps to structure the site and determine page content
Developed user flows based on sitemaps
Iterated information architecture using feedback and CrazyEgg metrics
Wireframes and Prototypes
Designed low-fidelity wireframes for basic site functionalities
Collaborated with team members to refine wireframes
Built InVision prototypes for interactive presentations
User Interface Design and Branding
Explored designs aligned with the Webonise brand
Leveraged user-tracked metrics and stakeholder feedback
Created prototypes for a better understanding of functionalities
Development and Quality Assurance
Obtained final approval from development teams and stakeholders
Assisted with QA to ensure proper functionality
Addressed bugs, interactions, and visual issues
Tasked with the recreation of our very own marketing website we set out to inspire a more welcoming look and feel. But before we dove into the user experience or design of the said site, we first looked at the user tracking we had available. This effort was completed so we could see where users were sticking around or bouncing off the website. We wanted to gain insights into the “whys” here and understand where we could make improvements to the website during our rebuilding of it.
We also met with our internal stakeholders to understand and collaborate on what expectations were, what features they wanted to preserve from the previous site as well as new features and ideas. We also continued to meet to understand timelines associated with these previously mentioned expectations and to ensure continuous communication amongst the varying team members on this effort.
Once we started to have a better vision of what problems were known and just as importantly, what problems were unknown - we began to map out the information architecture of this website redesign. As a team we created sitemaps to gain a better understanding of the general structure of the site, what information would be located on what page, and why. In parallel to this effort, we also created user flows to help map out how users would navigate the site based on the site maps I previously mentioned.
All this was done in constant collaboration with all fellow team members and stakeholders during multiple meetings. We took in feedback and iterated our information architectures based on this feedback as well as information we gathered from tracking metrics through CrazyEgg.
As visions of the new site became more concrete in the collective team's minds, we started to put together wireframes to build out and map basic site functionalities. As well as to understand what content would be located where and why. These were low-fidelity wireframes that served to help us map various aspects of the site redesign.
Through these processes, we continued to collaborate with the rest of our team members from all sections to gain a better understanding of limitations, functionalities, and areas where the wireframes could be improved upon. On key wireframes and flows we built out prototypes via Invision to invite further feedback and understanding of the direction the site was going towards.
From this stage in the project, we started to explore possible designs and how the user interface would look and feel in concern to the Webonise brand at that time. We continued to leverage user-tracked metrics and feedback from stakeholders and varying team members during meetings and presentations. For these presentations, we also created prototypes within Invision, so we could give the rest of our team a much better understanding of functionalities and obtain a better sense by interacting with the fleshed-out user interfaces.
Once we had final approval from our development teams and stakeholders the building of the site started in more serious terms. As development was completed we were kept in the loop to help QA the varying pages to ensure things we working properly and functioning as expected. We noted bugs, interaction, and visual issues throughout this process and conducted calls in areas where more explanation was required.
