Product, Design - UX Design - UI Design - Information Architecture - Sitemaps - User Journeys - Wireframes - Workshops - Stakeholder Management - Analytics
| Industry | Publishing |
|---|---|
| Skills | Product Design, UX Design, UI Design, Information Architecture, Interaction Design |
| Tools | Visio, Omnigraffle, Excel, Word, PowerPoint, R, HTML/CSS/JS, JQuery, Adobe Creative Suite |
| Example | Automotive industry |
The two below pictures were the original design.
This project had three broad strands of content. The client reported being unhappy with the general UI design, specifically the layout and navigability and usability. There was also a desire to increase the cross-sell of other products.
One strand of information had already been updated but it was felt this could be bettered.
My job was to take one of these strands (industry information) and make it better than it was before.
I made a content inventory to assess the scale of work and rationalise content into templates: I had to understand the problem space first by mapping out the content hierarchy.
I created a full content inventory of the industry information using several maps that reflected different approaches to the data. This showed how all the different components related to each other and how they were grouped in ways that were meaningful to users and editors.
Outcomes: This helped me understand the current system and a quick heuristic analysis furnished me with sufficient detail to gain insight into the challenges that users faced. Below is a section of this content inventory.
I examined analytics for user behaviours / user journeys: How did users get around? How did they navigate? When did they go down a rabbit warren only to turn back?
I interviewed stakeholders to understand the business needs, what challenges they faced, what they wanted from a redesign and the many constraints necessary for a new design to take into account including desired marketing messages.
Outcomes: Cross-sell was now "baked-in" to increase subscriptions by offering related content, navigation was made easier and topics of interest could be located more easily. Social media was used to complement the publishing cycle and visualisations were used to make the site less text-heavy.
I created a new draft sitemap/information architecture which iterated as work progressed. I began making a real thing of creation here by sketching out how information could be structured, and tested how users would get from one point to another followed by how this could be smoothed.
The final draft of the sitemap was intended for developers and stakeholders and worked to illustrate how everything held together. Separate maps of the navigation system (desktop and mobile) communicated how users would navigate from point to point.
The final artefact from this phase was that I could calculate the number of templates required for this transformation.
Outcomes: By now, we had all the information in detail, we had a good idea how it should be structured and we knew what templates were needed for this transformation.
The image below shows some screenshots of sketched designs. Once there was internal business support for the designs, they were documented in a more formal way.
This work included calculating the number of templates needed to convey all of the client's information to customers.
Outcomes: Wireframes were sketched for free ideation and rapid feedback from stakeholders. Doing this allowed me to create many sketches for templates in a short space of time and finalise the design.
The designs received some usability testing but less than an ideal amount but was necessary given project funding restrictions.
The testing showed that users handled the new version better than the existing version with fewer misunderstandings about subscriptions and product visibility, more accurate navigation, and better focus.
I began to create annotated wireframes to pass the design to the development team. This included some clickable prototypes in HTML/CSS and JQuery (JavaScript) to illustrate how different widgets were meant to work.
Outcomes: The final site was handed over to the developers over a series of meetings and was built and released. See the very first picture for an example, or see for yourself.