SITE REDESIGN

Website redesigns can be an excellent chance to revamp a site based current user information, improved technology, and better-established UX practices.



Some of my UX work includes redesigning websites. I've conducted in activities that span the life of a project from user research to wireframing to problem solving to usability testin. Here are some of the highlights of the UX activities I've done for various redesign efforts.


SITE AUDIT ANALYSIS





I led a team of six through a heursitc evaluation for a site that desperately needed a redesign. For this audit, I defined the scope of the audit, as well as compiled all the data findings and recommendations. Since this was a federal goverment client, they also had to adhere to an additional set of laws and best practices. I created a separate audit questionnaire and evaluated the site based on that. For the final report, I created a presentation that included easy-to-understand graphics, so the client could see how well the current site was meeting usability best practices. As a result of the report, we were contracted to do a complete redesign of the site.


PERSONA DEVELOPMENT




Understanding your users is imperative in making a valuable website. In this case, this client helped "everybody," but through a series of stakeholder interviews, website emails, call logs, and contextual inquiries, we were able to identify three user categories and three typical users in each category (for a total of nine user types). The personas have helped the team and the client stay focused for whom we're really redesigning this site.




TASK FLOW ANALYSIS




For this project, each category of visitors used the site for a different purpose. Mapping their typical tasks and how they go about finding information allowed the client to see what was working, what the user painpoints were, and what areas needed improvement. Having the task flows outlined in a very simplistic timeline helped the clients, who were unfamiliar with the UX process, understand how people really use their current site.




SITE MAP CREATION





Figuring out the new navigation and site map for a site can be tricky. Over the years, this client added on several new pages to their site and in time their navigation became bloated. It's a common issue we see in many projects. When rearchitecting the site map, we had to evaluate their current content, interview various user types, and really think about how we were going to change the content and structure to meet the users' needs. In this particular example, I facilitated the card sorting, participated in the decision making, and created the site map in Omnigraffle. Photos from the card sorting activity were taken with my GoPro, which I set to take pictures of us working every 10 seconds.


DIGITAL WIREFRAME PROTOTYPING



Rather than creating traditional paper-based wireframes for the client, I created a "digital wireframe prototype" (foreground of image). Paper-based wireframes are often difficult to interpret for people who aren't familiar with them. For this prototype, I hand coded the HTML using the Zurb Foundation framework. The prototype was stripped of all visual design elements and focused purely on layout, hierarchy, and functionality. When walking through the prototype, the client easily understood how the redesigned site would take shape and function. For some of the more complicated interactions, I would add tooltips as annotations to the wireframes.

In this example, the current site has a good amount of information that was really difficult to navigate (background of image). Using an "information foraging/scent" approach, I broke the site into several topic-specific landing pages so could easily drill down to the right information they needed.


RESPONSIVE WIREFRAMES





Responsive design is imperative these days with so many different devices and their different dimensions. When wireframes for responsive projects are needed, I prefer to create them using an HTML framework like Zurb Foundation or Twitter Bootstrap. Rather than create three different sets of wireframes and annonating them, I roughly sketch out what I'm designing, then I code it once in HTML. It's a quicker approach and helps clarify the responsive functionality with the team and clients. To see my presentation on this wireframing technique, see the Leadership page on my site.

 

Created using Foundation (v4.3.2)
michelletchin @ mac . com

Twitter icon    LinkedIn icon    Instagram icon    Flickr icon