Team Knowhow website
Senior UX/UI Designer
What the story?
Team knowhow is a new brand from Dixon's Carphone that combines Geek Squad and Knowhow services. Key prepositions are gadget repair and insurnace.
This project was a big part of the Dixon's Carphone future as Europe’s leading specialist electrical retailer.
What did I do?
I was working as a one of 3 UX/UI Designer to create a new responsive websites.
Exploring design solutions to business requirements.
Translate brand promises into useful and functional experiences.
Producing clear, consistent, annotated wireframes and prototypes.
Explaining design decisions to others and providing documentation for developers.
Taking part in hands on visual design and testing
Many of the challenges came from balancing the business needs with the limitations of the platforms and backend systems.
Finding common ground with many stakeholders.
Combining UK vs Ireland Services.
Adobe AME, Component limitations.
Search, sort and filter interactions.
New brand identity, visual consistency and visual accessibly
Concepts and sketches
I worked with business analysts, project manger, designer, dev ops, and others to plan out the schedule work and prioratise features.
2. Gathering requirements
Once we knew what features we was working on and who was working on them, I sat down with our business analysts to start a JIRA to verify and collect requirements and design files.
3. Site map
I created a living Sitemap document what was regularly updated and pined it up on a wall. We used it in team stand up meetings to share ideas and It helpded give us insights on SEO and digital marketing.
4. Style guide
A totally new brand identity meant that we had to create our own design resources. So we created a style guide document that included, Icons, colours, logos, textures, typography button styles and other UI elements.
Which are all important for the dev team in creating a consistent CSS document and for other designers and other teams in the business who might pick it uplater.
We also created a shared Adobe cloud library of all these elements.
5. Responsive grid & CMS
We was working with many complex back-end systems and Adobe AME and bootstrap 4 for our front end framework. So as a key element we created a grid layout for all the breakpoint which all the compionents would sit under.
6. Wire framing & concepts
I worked though the many features of the back end systems to come up with simple user journeys by created| Wireframe to show journeys and user flows which where validated with the team before delivery.
7. Visual design
Once the wireframes and concepts were signed off we moved into the visual UI design stage. This stage was a balance between how the UI components and interactive elements with work with the brand identity and bring delightfulness to the user.
I started by fleshing out the new brand with guidelines and rules to fit the flexible responsive UI that we stout. We designed every page of the website with its different sizes and components.
As a important way to get all stakeholders, developers and designer onboard used Invision to build prototypes which we could present during meetings. Invoice was suitable for this project as it was a website and we only had to upload the visual designs from Adobe CC.
I worked to supply the developers detailed specifications that showed spacing and gaps between elements. I used Zeplin and Adobe CC to share files and support developers.
10. User testing support & feedback
Once the test environment was live and the developers started building the website I worked to provide detailed feedback with screenshots and annotations of all the breakpoints. I also tested the website on diferant devices and help with UAT.