I designed a component-based website for [Rosetta AI](https://rosetta.ai) and modelled the content in [Prismic](https://prismic.io) to allow for a great deal of customisation thanks to [Prismic's slices technology](https://prismic.io/docs/slice), resulting in countless hours saved on design and engineering resources, by allowing the marketing team to quickly make changes, add new pages and content whilst still keeping the site visually and functionally consistent.

### **Requirement:**

Design and plan a website that matches the Rosetta's fashion focused brand, and a website that can be fully customised by the marketing team without the need for a design or engineering implementation.

### **Final product:**

Designed a component-based website for Rosetta and modelled the content in Prismic to allow for a great deal of customisation thanks to Prismic's slices technology.

### **The result:**

Countless hours saved on design and engineering resources, with the marketing team being able to quickly make changes, add landing pages and more whilst still keeping the site visually and functionally consistent.

### **Iteration:**

**A different approach to web design: component-based design**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2F7ACW9MpdO77XrMcRkJzb%2F67627a7f-cfb5-47aa-b89f-b9004b15cdd9.png?alt=media&token=ef629046-3122-4cb5-8456-044ff76b2025","id":"67627a7f-cfb5-47aa-b89f-b9004b15cdd9","width":3840,"height":2880,"filename":"website-broken-down.png","type":"image/png","caption":"A view of the website broken down into slices","border":false}]}
```

The brief for the site was a little different than usual, while usually I would start with mapping out the information architecture, then move onto content strategy and wireframes, this time I had to create a website that had to fulfil requirements that were not yet known.

In order to do this, I decided to start with components first, and design a large number of components taken from the familiar patterns and use cases from the web and then put the pieces together.

I started by creating a base number of pages, which would then go to become "custom pages" in the Prismic content model.\
The base pages were the "homepage" and the "pricing page" which are single type pages, which means there can only be one of each. Then a number of repeatable pages that can be re-used and re-created at wish, these were the "feature page", "resource page, "landing page" and a few more.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2Frosetta-ai-website%2F7a93c50c-c8c4-4713-a846-a516a5b8706b.png?alt=media&token=31467ce6-fc94-412b-ab63-1fbd8d255698","id":"7a93c50c-c8c4-4713-a846-a516a5b8706b","width":3200,"height":2400,"filename":"rosetta-sitemap.png","type":"image/png","caption":"The sitemap of the website","border":false}]}
```

Once these have been decided and discussed, I started mapping out the components that will go into these pages.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2Frosetta-ai-website%2Fbb9802c1-94fb-483f-9e60-7779b91cdfeb.png?alt=media&token=38a3626f-3117-4158-bd9b-df002c0e8fe5","id":"bb9802c1-94fb-483f-9e60-7779b91cdfeb","width":3840,"height":2880,"filename":"rosetta-components.png","type":"image/png","caption":"Quick view of the components blueprint","border":false}]}
```

I have created over 20 components, with lots of customisable options, from different layouts, to different background colours.\
\
Now it was time to design the components.\
\
The main inspiration for the site visual patterns were Apple's Human Interface Guidelines, a simple and sure-fire way to create and interface that is consistent and pleasing to eye.\
\
Once the components (which I'm gonna start calling "slices" going forward to match Prismic's own terminology) were mapped out and the base elements designed, I have created different variants for background colour, layout as well s for the different breakpoints.\
\
I have used a total of 4 breakpoints (mobile, tablet, desktop, large desktop) so if a designer wanted to put together a page before doing it within Prismic they could do it easily and quickly in Figma first.\
\
Once the slices were completed it was time to go through approval and revision stages.\
I've also created a couple of pages as an example to show stakeholders on how a finished page is supposed to look like.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2Frosetta-ai-website%2Fb94e1209-18e7-4b48-805b-67ae8a244b2e.png?alt=media&token=95308a50-a347-4660-89ac-1b9cc74c200e","id":"b94e1209-18e7-4b48-805b-67ae8a244b2e","width":3840,"height":2880,"filename":"rosetta-website-pages.png","type":"image/png","caption":"A view of the mid fidelity UI designs","border":false}]}
```

The approval marked the end of the design phase. Next step was the [content modelling](https://prismic.io/docs/content-modeling) phase, which is another Prismic term for data modelling within the platform.

### **Content modelling within Prismic**

The Prismic interface and mental models are pretty straightforward and probably one of the easiest Content Management Systems to use.

I have setup the base pages following the site structure, and then proceeded onto creating the "slices".

I have added certain limitations depending on which slices should or should not be included in a specific page type, as well as added limitations around the design itself, to keep the design consistent in all possible scenarios.\
\
Once that was completed, I have filled all the content from the previous website version and proceeded to document the work on Loom.\
\
Once this was all complete, the designs and the content model was handed over to the developer.

### **The impact**

The website looks slick, but more importantly thanks to the simplified workflow and to the ability given to the marketing team to make changes on the go, create new pages on a whiff, the speed of execution has drastically increased from 1 week of work to create one page, to a couple of hours at worst.

Designing a fully customisable marketing website

The project below is one of the latest I worked on and it consists specifically of adapting web elements of their re-design to fit into a fully native experience. I worked on the adaptation of the Product Detail Page and its numerous edge cases.\
\
The web re-design has been implemented by the Creative and UI team with principal focus on web elements and patterns.\
\
Main goal of the project was to take the web elements and adapt these to the native mobile app grids, patterns and best practices whilst still maintaining the look and feel of the re-design and of the brand.\
\
This project is strictly technical design adaptation, here are some examples of translated patterns and reasoning behind them.

### **Product Image**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2F7cR5h9YxJT79EmYZzpJC%2Fe81d6032-da15-489f-b062-7fcd571e47e4.png?alt=media&token=65e5fcec-8a2f-4174-b0e6-086f0b0d5dc2","id":"e81d6032-da15-489f-b062-7fcd571e47e4","width":3200,"height":2400,"filename":"selfridges-product-detail.png","type":"image/png","caption":"A translation from a web pattern with a bleed and a mobile pattern without one","border":false}]}
```

In the adapted version a header is present allowing the user to clearly see the full image and rendering the navigational controls slightly more accessible.\
Contrary to web, a mobile app doesn't have an added navigation as one that is found in the browser, therefore the bleed would overflow into the app bezels on iOS and a part of the image would be cut off.

### **Product detail component**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2F7cR5h9YxJT79EmYZzpJC%2F5071b0a9-6c22-4eaf-a320-24fe68571bca.png?alt=media&token=a3d824b4-61b4-42fc-b23a-ce58601bed82","id":"5071b0a9-6c22-4eaf-a320-24fe68571bca","width":3200,"height":2400,"filename":"selfridges-product-image.png","type":"image/png","caption":"A view of all the edge cases","border":false}]}
```

I worked on numerous edge cases, such as personalisation, gift messaging, delivery, out of stock notices etc.\
\
Every edge case has been implemented into designs, components that have been added to a styleguide library file in Sketch and then documented every case with scenario and rules.

Adapting web store design patterns to native Mobile App patterns

Ocean Yoga Kenting is a boutique yoga studio in southern Taiwan and was in need of elaborating and defining their brand identity to start building up their online presence.

Ocean Yoga Kenting was looking to create an unique and high-end brand identity that matches the look and feel of their venue and keep the tropical spirit of the area.

### **Creating a sophisticated brand identity**

The requirement for the brand was to be simple, memorable, but sophisticated.\
I have created a boho-style logo showcasing the tropical feel of the studio and the area the studio is located in.

### The Logo

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FDEmdRVBdhDAR8dGbckjC%2Fce3502d1-1662-4e5c-9bf9-6c1293c73d34.jpg?alt=media&token=d65db54f-5e9a-4c20-b5fd-07ce8dd8a1b3","id":"ce3502d1-1662-4e5c-9bf9-6c1293c73d34","width":4000,"height":3000,"filename":"ock-logo.jpg","type":"image/jpeg","caption":"The logo","border":false}]}
```

I have created two logo variants: a more detailed logo (left) to be used on all physical assets and to serve as the main logo and a more minimal logo (right) to be used for social media and other assets where the logo would be too small to see the details.

### Brand colours

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FDEmdRVBdhDAR8dGbckjC%2Fcbfbc1ad-ff0b-408e-a0dd-f028fa1ff41f.png?alt=media&token=9d849ef3-30bf-47f0-8e2c-13a74819b513","id":"cbfbc1ad-ff0b-408e-a0dd-f028fa1ff41f","width":4000,"height":1093,"filename":"ock-colours.png","type":"image/png","caption":"The colour palette","border":false}]}
```

The colours are inspired by the natural palettes of the Kenting National Park area as well as by some of the services the studio offer such as Red Wine Yoga for the Burgundy colour

### Business cards

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FDEmdRVBdhDAR8dGbckjC%2F7bd52f88-c115-4c45-95cb-777a856376fa.png?alt=media&token=26c4907f-488c-4742-a333-eaec4944f6ea","id":"7bd52f88-c115-4c45-95cb-777a856376fa","width":3840,"height":2880,"filename":"ock-business-card-shot.png","type":"image/png","caption":"Front view of business cards","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FDEmdRVBdhDAR8dGbckjC%2Ff5cf04ab-cadb-4ad9-919e-3b1de73cae96.png?alt=media&token=f34abd4f-d071-4200-b447-1b484963af02","id":"f5cf04ab-cadb-4ad9-919e-3b1de73cae96","width":3840,"height":2880,"filename":"ock-business-card-shot-3.png","type":"image/png","caption":"Back view of business cards","border":false}]}
```

## **Building a no-code website for a yoga studio**

### Requirement

Create a website with booking functionality on a limited budget

### The Final Product

A no code website created within Wix with booking and payment functionality

### The impact

A super easy to use website that allows all clients to book and pay, helping the business increase sales.

### Strategy

I sat down with the business owner and outlined the studio's business requirements.\
The studio is newly opened with zero customer exposure so the timeline for creating the website was very tight.\
\
The first item of business was to choose the platform that will allow a non technical business owner to get up to speed with the necessary tools to run a business online and a booking platform that was easy to set up and had traditional mandarin language capabilities\
\
After researching a few software options such as Momoyoga or Calendly, the business owner decided to move on with Wix, which has a pretty decent booking platform as well as traditional mandarin language capability.

### Design

Considering the tight timeline the website has been designed and built at the same time with the classic Wix Editor, choosing not to make the most of Wix EditorX advanced functionality for the time being.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FDEmdRVBdhDAR8dGbckjC%2F549964dd-c91e-4636-b526-4120866dee1a.png?alt=media&token=9b27362d-b9a0-4bcb-b933-9fd71efb00bd","id":"549964dd-c91e-4636-b526-4120866dee1a","width":2974,"height":1748,"filename":"ocean-yoga-site.png","type":"image/png","caption":"A screenshot of the live site","border":false}]}
```

### Information Architecture

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FDEmdRVBdhDAR8dGbckjC%2F753d2739-b540-40b0-b5d5-9fe0108ddd84.png?alt=media&token=adb7f31f-ede6-4b1d-84bf-092a3187f85a","id":"753d2739-b540-40b0-b5d5-9fe0108ddd84","width":3200,"height":2400,"filename":"ocean-yoga-sitemap.png","type":"image/png","caption":"The sitemap","border":false}]}
```

The brand colours are inspired by the nature around Kenting, with sand yellow backgrounds and dark green accents, to give a natural but sophisticated feel.

### Conclusion

The result is a clean site that clearly showcases the look and feel of the studio, its brand values and easily allows potential customers to gather information about the studio's facilities and services and book their classes on the website.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FDEmdRVBdhDAR8dGbckjC%2Ff1a35909-26ee-4012-bf91-d56222a88e4d.png?alt=media&token=0c7481ad-5c5e-4500-aa19-5a0fa6ebf812","id":"f1a35909-26ee-4012-bf91-d56222a88e4d","width":3840,"height":2880,"filename":"ock-browser-shot-5.png","type":"image/png","caption":"A mockup of the live site","border":false}]}
```

Crafting an online brand and presence for a boutique yoga studio

A good component library and design system are fundamental to improve speed of execution allow teams to iterate through ideas and hypotheses much faster compared to the classic workflow where UX and UI are separate.

The first requirement upon joining Rosetta.ai was to create a component library / design system to allow for easier prototyping in design.\
\
A good component library and design system are fundamental to improve speed of execution and allow teams to iterate through ideas and hypotheses much faster compared to the classic workflow where UX and UI are separate.\
\
UX designers can now build up wireframes with existing components while UI designers only work on maintaining the system and managing handover with developers.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FHpWmoyIa7g4kp6KDtjLQ%2F80d8509b-ff1f-4816-b886-04d17d4f508d.png?alt=media&token=574e0808-7851-410c-aac9-9be0cd2cfc68","id":"80d8509b-ff1f-4816-b886-04d17d4f508d","width":1934,"height":836,"filename":"Workflow Graphic.png","type":"image/png","caption":"A view of a workflow with and without a design system","border":false}]}
```

The first step is to take an existing base library whose look and feel is closer to our brand.\
The development team has been using ChakraUI in development so we took that as a base and started building on top.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FHpWmoyIa7g4kp6KDtjLQ%2F9738335c-0c8e-4465-80b5-8b9bc7de8b0a.png?alt=media&token=4ad7a5fe-f4af-4f5d-81e7-fafa723f456d","id":"9738335c-0c8e-4465-80b5-8b9bc7de8b0a","width":1604,"height":1240,"filename":"chakra-ui-components.png","type":"image/png","caption":"A quick view of chakra components","border":false}]}
```

You may ask, why not just use ChakraUI then? Well, those libraries are extensive and decently thorough but they are also fixed and harder to personalise down the line. While the styling of the components can be changed it requires work on top of these components which will create bloated code and will likely decrease productivity, therefore going against one of the main principles of building a design system: speed of execution.\
\
Open source component libraries are a good resource to use for prototypes or MVPs but once you start building your app, having your own custom components, tailored to your brand, tailored to your use cases and functionalities is fundamental.

### **Using Atomic Design Principles**

First thing to do when creating a design system is to create principles for categorising all the components.\
Even if we only have 30 components, if they are nor organised properly it is very easy to get lost or create duplicates.\
\
The best way to organise a component library based on my experience is to use Atomic Design principles by Brad Frost:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FHpWmoyIa7g4kp6KDtjLQ%2Ff04ff084-8d80-4ccc-b288-8b5acbea7803.png?alt=media&token=da195dbc-5775-4c0f-8162-2a49178cfd1f","id":"f04ff084-8d80-4ccc-b288-8b5acbea7803","width":3200,"height":2400,"filename":"atomic-design.png","type":"image/png","caption":"A graphic of how an atomic design system works","border":false}]}
```

The main principle is to divide the components hierarchically, starting from Atoms, to Molecules, to Organisms, to Templates and end up with full Pages.

I have taken a few ChakraUI components and the base html fields needed for a good component library and got to work.

### **The structure**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FHpWmoyIa7g4kp6KDtjLQ%2F903fdb28-0871-4905-8ecc-39433012bcfc.png?alt=media&token=e77e6ed4-0239-4643-b51a-61e3acb6782c","id":"903fdb28-0871-4905-8ecc-39433012bcfc","width":3113,"height":2335,"filename":"Design system structure graphic.png","type":"image/png","caption":"The structure of the design system","border":false}]}
```

### **Foundations**

The foundations include all of the base elements that each component and atom is going to be made of, these include:

### Colours

Includes all the colours that can be used within the system and is sub-divided into four categories:

* Base colours, which are the black and white shades and tints adjusted to the main brand colour.

* Brand colours, which are the main brand colour accents, with shades, tints, muted versions and gradient variations.

* System colours, which are the base green (success), orange (warning), blue (information) and red (errors).

* Graph colours, which are variations of all possible colours that can be used within graphs, adjusted to fit well with the main brand colours.

### Typography

Includes all possible text use cases from headings, to links, to single line text, to paragraphs.

### Layout Primitives

Which are the base foundation of all containers, boxes, cards and layouts.\
These are subdivided into different elevations and different background colours.

### Grids

Includes all the grid layouts for every single screen (large desktop, desktop, tablet, mobile and more)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FHpWmoyIa7g4kp6KDtjLQ%2F1e260c3a-c84a-4281-a591-6cdf7b5d8bdc.png?alt=media&token=4107f20e-8d3a-4473-b3c9-799a7fb42950","id":"1e260c3a-c84a-4281-a591-6cdf7b5d8bdc","width":4000,"height":3000,"filename":"Foundations Graphic.png","type":"image/png","caption":"The foundations of the Design System","border":false}]}
```

### **Atoms**

These are the building blocks of all interface components and include base HTML elements such as labels, checkboxes, radio buttons, inputs and more.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FHpWmoyIa7g4kp6KDtjLQ%2F34bbaa20-ede5-4a98-81c8-69e9f4fb8c11.png?alt=media&token=aabda26a-0883-4aae-8acb-72c68a9e7d8d","id":"34bbaa20-ede5-4a98-81c8-69e9f4fb8c11","width":4000,"height":3000,"filename":"Atoms Graphic.png","type":"image/png","caption":"A view of the Atoms","border":false}]}
```

### **Molecules**

These are components made of two or more atoms, that usually have a specific function. Like a search input with a label, search icon and different states.

### **Organisms**

More complex components that incorporate two or more molecules and can serve more than one specific function. An example of an organism is a header section.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FHpWmoyIa7g4kp6KDtjLQ%2F2caade16-234f-4b62-991e-13c7246f115c.png?alt=media&token=e198f185-5336-4631-a6c2-1a084c8b77e2","id":"2caade16-234f-4b62-991e-13c7246f115c","width":4000,"height":3000,"filename":"Organisms Graphic.png","type":"image/png","caption":"A view of the Organisms","border":false}]}
```

### **Templates and Pages**

These are the final components built with multiple organisms, templates are similar to bare bone pages layouts without imagery and content. Whilst pages are the complete interface design.

### **The result**

A component library of 40+ fundamental components which led to increased speed of ideation for the design team and increased speed of execution for the development team.\
All while maintaining and promoting brand consistency across the platform.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FHpWmoyIa7g4kp6KDtjLQ%2F3e5768cb-6557-43f4-ac74-5e92b254eef2.png?alt=media&token=3e717970-e78f-4996-b2e8-a05192510e7b","id":"3e5768cb-6557-43f4-ac74-5e92b254eef2","width":3200,"height":2400,"filename":"design-system-cover2.png","type":"image/png","caption":"","border":false}]}
```

Creating a design system from scratch

The Selfridges Human Resources department was in need of a re-design of their careers site with the objective of attracting major talent through an inspiring and informative site

### **Scope**

* User Research & Discovery

* User Experience Design

* Usability Design

### **Brief**

* Create an exciting site to push the Selfridges employer brand and ethos and help attract top talent across Retail and Technology sectors

* Re-design the current version of the site with focus on Life at Selfridges, with easy access to the application platform.

* Create pages with existing elements within the AEM Content Management System

### **Iteration**

### Research & Discovery

The main focus of the discovery phase was to create an inspirational flow and content for highly skilled users to join the company and create a site that can compete, at a talent acquisition level with up and coming industry giants such as Farfetch, Canada Goose and established businesses like Harvey Nichols.

After a short research conducted together with the HR team and prospective and existing employees, user pain points and objectives came to light:

Following the initial user interviews and a quick competitive analysis we moved onto the ideation stage

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FO6jqNGTHzq0JZvWlP9Fi%2F19e2dd51-8334-464e-b4a9-28e63ddfaea7.png?alt=media&token=d96795cb-87b1-4113-aa45-9429c7060885","id":"19e2dd51-8334-464e-b4a9-28e63ddfaea7","width":4000,"height":3000,"filename":"pains-objectives.png","type":"image/png","caption":"The pains and objectives of the potential users","border":false}]}
```

### Customer Journey

The customer journey has been segmented in 3 separate sections:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FO6jqNGTHzq0JZvWlP9Fi%2Fe0bde5ad-7157-48d8-878d-9f783c89eebb.png?alt=media&token=07f6789f-23c9-4f6f-8d05-9cb87b4e29bf","id":"e0bde5ad-7157-48d8-878d-9f783c89eebb","width":4000,"height":3000,"filename":"journey.png","type":"image/png","caption":"The customer journey in a nutshell","border":false}]}
```

The primary focus of the re-design iteration was the part 1 of the journey: the discovery.\
The technical flow of the candidate application was handled by a third party software and couldn't be modified.

We focused therefore on helping users complete objectives 3 ("I want to apply to a job/company with confidence and pride") and 4 ("I want to find a company that matches my values and inspires me to do better") and solve pain points 1 ("The journey through the site is unclear") and 2("The site lacks fundamental and inspiring information").

### Proposed Solutions

I proposed several solutions to directly target the key objectives laid out earlier:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FO6jqNGTHzq0JZvWlP9Fi%2Fb01b2c07-3ff1-4050-9dad-51e1901a5c38.png?alt=media&token=700f83d5-fccc-47d7-a152-83e9b5ce2256","id":"b01b2c07-3ff1-4050-9dad-51e1901a5c38","width":4000,"height":3000,"filename":"solutions-results.png","type":"image/png","caption":"The proposed solutions and expected results","border":false}]}
```

### Personas

In order to be able to create detailed user flows I dug deeper into the potential candidates profiles and created 3 distinct personas, differentiated by their intention when reaching the site

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FO6jqNGTHzq0JZvWlP9Fi%2Fb57e52b8-75f4-4eb9-b154-e1d3e11d4282.png?alt=media&token=9a8bfe27-6e66-4e77-bb5b-702248ce4496","id":"b57e52b8-75f4-4eb9-b154-e1d3e11d4282","width":3200,"height":2400,"filename":"selfridges-personas.png","type":"image/png","caption":"The personas","border":false}]}
```

### User Flows

I have then created user flows for each part of the journey, see below homepage flow

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FO6jqNGTHzq0JZvWlP9Fi%2Feed1725f-c7d6-4033-8e4c-25ac7594da6f.jpg?alt=media&token=9a9cf2ba-962e-4602-b3f3-0e625afb3860","id":"eed1725f-c7d6-4033-8e4c-25ac7594da6f","width":1280,"height":572,"filename":"User-flows-Large.jpeg","type":"image/jpeg","caption":"The user flows","border":false}]}
```

### Information Architecture

And created the information architecture of the new site

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FO6jqNGTHzq0JZvWlP9Fi%2F40d0eff3-7e1c-46e2-a7d8-f1d66eef85bf.png?alt=media&token=bf9210a8-005a-4d11-8070-de1ed49afe8e","id":"40d0eff3-7e1c-46e2-a7d8-f1d66eef85bf","width":13758,"height":4076,"filename":"selfridges-sitemap.png","type":"image/png","caption":"The Sitemap of the sitee","border":false}]}
```

### Wireframes

I have drafted wireframes based on the flows and information architecture ideated earlier.As this project was using already existing AEM components, creating high fidelity mockups was out of scope

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FO6jqNGTHzq0JZvWlP9Fi%2F0ab67ce8-1051-4a94-b9d1-80af85baa6b0.png?alt=media&token=8581abcf-37dd-4a4b-9217-b34f041ff954","id":"0ab67ce8-1051-4a94-b9d1-80af85baa6b0","width":3200,"height":2400,"filename":"selfridges-wireframes.png","type":"image/png","caption":"The wireframes","border":false}]}
```

### Prototype & Usability Testing

The wireframes have then been packaged in a prototype with mid-fidelity mockups in InVision Studio and tested with select Selfridges employees from different departments.\
The test turned out positive with minor changes that resulted in a more simplified navigation and structure, especially around the content and department pages.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FO6jqNGTHzq0JZvWlP9Fi%2Fff69f1bd-2aad-4aa7-9563-1065a862b646.mp4?alt=media&token=c0c00b5d-1b52-4b6b-bb58-d957a0a6926d","id":"ff69f1bd-2aad-4aa7-9563-1065a862b646","width":1168,"height":656,"filename":"Selfridges-careers-desktop-new.mp4","type":"video/mp4","caption":"Quick view of the prototype used for testing","border":false}]}
```

### **The result**

Selfridges Careers now has a sleek and modern site, with outstanding multimedia content created by their creative team.\
The site is inspiring, easy to navigate, informative and with easy access to job descriptions, a big step up from the previous site.\
The website has recently been nominated for a careers site award.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FO6jqNGTHzq0JZvWlP9Fi%2Fe5c0037c-6080-4256-912b-20cb82aa2302.png?alt=media&token=b114b95c-efa0-40f5-bcd0-dd8b0213ec2f","id":"e5c0037c-6080-4256-912b-20cb82aa2302","width":4000,"height":3000,"filename":"before-after-mobile.png","type":"image/png","caption":"A before and after view of the mobile site","border":false}]}
```

Revamping a career website for an outstanding candidate experience and job discovery

In this page I'll walk you through the design thinking process I use when working on product designs. This process takes the original Design Thinking and the Double Diamond design process as a base, plus additions that I have added from my years of experience.

### **What is design thinking?**

Design thinking is a creative, problem-solving approach to innovation that focuses on understanding user needs, exploring solutions, and testing prototypes.

It\`s an iterative process that involves gathering data, brainstorming ideas, creating solutions, and refining those solutions until the most viable one is found.

### **The process**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FQXqiC4NnJWLnY3bJEyfy%2Fc0c1e0cb-8567-4319-b615-613c752f5b0e.png?alt=media&token=88a977f1-7d32-4d4c-97c2-06974bae0efe","id":"c0c1e0cb-8567-4319-b615-613c752f5b0e","width":4800,"height":1600,"filename":"Process Graphic@4x.png","type":"image/png","caption":"A representation of the process","border":false}]}
```

### Step 1: Discover

The first step of the process involved defining the problem at hand. The Discover step consists of conversations with the main stakeholders that are relevant to the problem, gathering data from analytics, run user interview sessions and gather data from the market in the form of market research, competitive analysis and more.

### Step 2: Define

In the second step all the data from the discovery step will be used to formulate a thorough brief that includes the main problem statement and a list of actions for next steps, as well as what metrics can be used to quantify the success of the iteration.

### Step 3: Develop

The develop phase is where ideas are brainstormed to come up with a number of suitable solutions. There are multiple ways to conduct ideation, this could be a workshop or a brain-writing session.

### Step 4: Deliver

The deliver phase is divided into multiple sub-steps:

* **Prioritisation:** where the solutions are discussed and focus is channelled into the most viable one from the list.

* **Low Fidelity Stage:** The idea is then laid out in user flows and low fidelity wireframes to showcase how the functionality will work. This is an important step as it allows for a breakdown of the idea and implementation from a different perspective.

* **Testing stage (optional):** The functionality itself is then tested and validated. If it doesn't pass validation we go back to the Low Fidelity stage. Testing at this stage can only be done with BETA customers or via dogfooding (testing functionality internally with employees)

* **High Fidelity Stage:** Once the functionality is validated we move onto the high fidelity stage, where the look and feel of the brand is added onto the wireframes, as well as advanced interactions and advanced prototyping if needed.

* **Further Testing stage:** The prototype is then tested with a wider range of users or potential users.

* **Handover:** Once the developed designs pass validation and fulfil the acceptance criteria set in the brief, we move onto the Delivery phase where the designs are documented for seamless handover to the engineers.

The design thinking process is a powerful tool for problem-solving and innovation. By understanding user needs, exploring solutions and testing prototypes, it allows us to quickly and efficiently create solutions that are tailored to the problem and the user. The process is iterative and allows for feedback and validation at each stage, ensuring that the final solution is the most viable one. With the help of design thinking, we can create products and services that are tailored to the user's needs and have a greater chance of success.

My design thinking process

This project was part of an optimisation effort to allow users to enable stock notifications for specific products.\
Business case was to increase urgency and fear of missing out in users and purchase products as soon as they're back in stock, this way increasing conversion rates.

### **The process**

I started outlying all possible edge cases and scenarios for different states of product stock availability, which in this case were:

* Specific Colour is Out of Stock

* Specific Size is Out of Stock

* Product is in Stock but specific size is Out of Stock

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FZACHuso5h48fH4GUuID4%2F0cc36f39-9796-4bf9-a6f7-9b0b2f639c10.png?alt=media&token=7909b5da-8487-4a0c-98a9-0b048ee7e8b5","id":"0cc36f39-9796-4bf9-a6f7-9b0b2f639c10","width":3200,"height":2400,"filename":"selfridges-edge-cases.png","type":"image/png","caption":"Out of stock colour selection","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FZACHuso5h48fH4GUuID4%2Fffc94cf3-8751-49ff-bd6c-ff6bdefb71ec.png?alt=media&token=16990580-0dea-47d8-872a-65d758ae4382","id":"ffc94cf3-8751-49ff-bd6c-ff6bdefb71ec","width":3200,"height":2400,"filename":"selfridges-notifs-app.png","type":"image/png","caption":"Out of Stock Size Selection","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FZACHuso5h48fH4GUuID4%2F3a5397f3-b67b-4dc1-9a09-a8556d78306b.png?alt=media&token=5a2f437b-d111-4362-9854-719c19da1cae","id":"3a5397f3-b67b-4dc1-9a09-a8556d78306b","width":3200,"height":2400,"filename":"selfridges-in-stock-size.png","type":"image/png","caption":"In Stock Size Selection","border":false}]}
```

You can see documented all components for the "Add to Bag" button, "Enable notifications" component and "Error Messaging" component.\
\
I have worked on the first ideation of user flows, wireframe and documentation and on the second iteration of the high fidelity designs when I have adapted the old design to match the re-design, as I have shown in the Mobile App UI tab.

Creating an e-commerce stock notifications blueprint

I have worked on the first implementation of the Ballot to Buy, or Yellow Draw as is called in the Mobile App currently. The functionality allows users to enter a draw for limited edition products and if successful, be able to buy the product.\
\
The main goal of the project was to create a fool-proof user flow and wireframes to allow users to use the functionality and cover all edge cases (win, loss, etc.)\
\
I have created basic wireflows to outline the functionality and the interface:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FiwXhzuENyIFBhmnhXT0M%2Ffacceabb-ad5a-43db-aaa8-ab6264232008.png?alt=media&token=2855effa-804c-4cde-8a71-be644806b0d1","id":"facceabb-ad5a-43db-aaa8-ab6264232008","width":3200,"height":2400,"filename":"selfridges-yellow-draw-1.png","type":"image/png","caption":"Phase 1: Discovery","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FiwXhzuENyIFBhmnhXT0M%2F2f1ac861-14e1-4dde-be7d-3aef231c59cd.png?alt=media&token=5820db68-d0e7-4d77-9914-cfb238914224","id":"2f1ac861-14e1-4dde-be7d-3aef231c59cd","width":3200,"height":2400,"filename":"selfridges-yellow-draw-2.png","type":"image/png","caption":"Phase 2: Sign in / register","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FiwXhzuENyIFBhmnhXT0M%2F36f2f071-955b-4417-ad71-d72b7a3ad42b.png?alt=media&token=d3dd0bf6-12c3-4226-baef-23c904f201e9","id":"36f2f071-955b-4417-ad71-d72b7a3ad42b","width":3200,"height":2400,"filename":"selfridges-yellow-draw-3.png","type":"image/png","caption":"Phase 3: Entering the ballot","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FqFQeL2KTGtNUPTRdC9egzJ86xgv2%2FiwXhzuENyIFBhmnhXT0M%2F5162fe13-ac97-4114-86d7-21e490586c49.png?alt=media&token=93ec64fa-d016-4539-8aea-4e882f8ecb37","id":"5162fe13-ac97-4114-86d7-21e490586c49","width":3200,"height":2400,"filename":"selfridges-yellow-draw-4.png","type":"image/png","caption":"Phase 4: Results","border":false}]}
```

Ideating a draw journey for e-commerce