Below is the approach I take when taking on any new design challenge. It's a framework I use, however every project is unique and it's best to be flexible and to be able to adapt to any complexity that can't be dealt with via that framework. Nevertheless, it's a solid starting point and successful structure to work from when beginning any project.
As well as deductive reasoning, what you also get from me beyond static imagery, is animations, prototyping and web development. I turn it up to 11.
1. User research
Analytics (Google, Userlytics), interviews, surveys, CRM, socials, feedback, reviews, find pain points and customer wants/needs.
2. Competitor analysis
Identify competitors, evaluate their product/strategy, compare, discover successes and failures.
4. User profiles
Define user profiles based on Discovery phase and based on clients data and brief.
5. User flows/empathy map
Define customer flows and intended experiences. The What, Why and How? The heart of understanding the requirements/ problem you’re solving, as a User Centred Approach.
6. Technical assessment
Define what technical challenges may block ideas. What is the ideal solution versus what is the MVP.
7. Brand comprehension
Evaluate and understand the brands purpose and visual identity.
8. Map app/site structure
Decipher the structure of content, categorise content, card sorting, information architecture.
9. Scamp/wireframe
Begin scamping/wire-framing out user flows, incorporating information architecture into the flows. Are they fulfilling the customer needs?
10. Design system/component library
Building out a Design System is vital for identity, consistency, accessibility, and speed. Working out atoms, molecules, organisms, templates and pages, is a necessity for working in a pressured agile environment. It also outlines, typography, spacing, iconography, brand colour palette etc
11. Design screens/interface
Using the established flows/wireframes and the design system; design the screens in accordance with the platform/ operating system.
12. Product analysis
What are the products successes, where can improvements be made, what do the analytics tell you, have A/B tests shown differing results?
13. Reiteration
Design is always evolving and nothing is ever perfect. With constant advances in tech, there’s always room for improvement and this is the opportunity to reiterate the process and see where valued improvements can be made.
1. Transform an under performing, un engaging app, with cluttered content, into a stylish, streamlined app.
2. Create an experience that caters to, and focuses on what their wide user base needed and something that visually aligned with their brand.
Greggs is the fastest growing fast food chain in the UK. Traditionally on old fashioned bakery, they changed focus and became a value brand for a much younger generation.
I had to incorporate the brands refocus and user insights into everything I did.
Regular visits to their Head Offices in Newcastle, it was useful to in helping me collaborate with them successfully.
Knowing the mission and purpose of the brand as well as the needs of the consumer are vital in producing the very best product possible!
The Greggs Rewards app was challenging because there were so many factors to consider.
The inception of the project was based on user stories that incorporated personas that were not only already existing Greggs customers, but customers they were
aspiring to attain.
Using these scenarios, with Greggs, I mapped out best case scenarios for user experiences.
Their strong Visual Identity and Tone of Voice were a great guide and influencer on UX and UI decision making. However, as was often the case during the beginning of app work, the brand guidelines weren’t focused towards digital and were more often than not, 88 pages on how to use the logo in print and a colour palette!
Working with Greggs and giving them the benefits of our experience, I helped create a Design System that was geared toward digital. User flows were the basis of initially creating all the wireframes. Progression, user testing and re-iteration helped me discover that not all wireframes could be done in isolation.
Although a modular flow is good, consideration needs to be given to the app as a whole product. The app wasn’t just a passive viewing experience. Interactivity included search functionality, filtering, store finder, account data and payment information. Hierarchy and importance of information was governed by user data and feedback.
Greggs was going through a transition in so much as it needed to respond to a change in healthier living lifestyles. Weight was put on product nutritional information, as well as value for money. I also had to work with 3rd parties to help incorporate payment gateways. This process went through various iterations, to help achieve a better flow, but also remaining compliant with legal limitations of payment gateways.
Reviewing flows and having a re-iterative approach helped me understand and have greater insight on what was technically achievable versus what the consumers wanted.
It’s often a fine balance keeping all stakeholders happy!
The UI went through many rounds and whilst you can give justification and reasoning to layout, sometimes this may not lend a design to be the most aesthetically pleasing.
Purpose and reasoning versus what’s visually pleasing is another fine balance. I also had to take into consideration Greggs brand identity and the rules they adhere to, for continuity purposes. Also accessibility is important, along with design trends and best practises!
Consideration was given to a tabbed versus hamburger menu approach. At the time, hamburgers were relatively new. Research and data showed that hiding important information can be a barrier to functionality and speed of use.
Increases in downloads, user engagement, sales, and positive customer feedback, meant a lot of re-iteration and updates were done based on the introduction of new products and client changes.
After the success of the App, I was also given the opportunity to redesign their website, and although the purpose was slightly different for the site, the same design system and principals were adhered to.