SELECTED PROJECTS. Lizzie Capelin EAST LONDON BASED UX / UI DESIGNER

Size: px

Start display at page:

Download "SELECTED PROJECTS. Lizzie Capelin EAST LONDON BASED UX / UI DESIGNER"

Blaise Butler
5 years ago
Views:

1 SELECTED PROJECTS Lizzie Capelin EAST LONDON BASED UX / UI DESIGNER

2 BEANWORK 02 Creating an employee rewards platform Beanwork is a rewards systems for employees to receive recognition from their coworkers and incentives for their work. I am leading all of the design for this multi-platform app and website from the early stages of creation. SERVICES - User flow mapping User experience Branding strategy App design Responive web design Usability & comprehension testing

BEANWORK 03 User!ow GIVE BEANS GIVE BEANS 2 GIVE BEANS SUCCESS SCREEN! + We defined the app s hierarchical structure, and then created appropriate user funnels to get people to their end goal.

3 BEANWORK 03 User!ow GIVE BEANS GIVE BEANS 2 GIVE BEANS SUCCESS SCREEN! + We defined the app s hierarchical structure, and then created appropriate user funnels to get people to their end goal. GIVE BEANS GIVE BEANS HOME 1 PRIMARY USER FLOW MY BEANS 3 REDEEM BEANS REWARD DETAIL SUCCESS SCREEN We have established a path for primary users to give out and redeem credits (beans), and separated out the content relevant to secondary users. SECONDARY USER FLOW GIVE BEANS + # GIVE BEANS # ACTIVITY REWARDS PEOPLE CHAT $

rewards Activity feed Leaderboard Chat There are also additional functions for

4 BEANWORK 04 Android & ios app design The app s core sections for staff members are: Log in page Give someone beans View your received beans Redeem beans for rewards Activity feed Leaderboard Chat There are also additional functions for admin users such as adding and deleting staff, approving activity and adding new rewards.

5 BEANWORK 05

6 BEANWORK 06 Atomic Design Using Atomic Design methodology as a guideline, we created foundational GUI elements as symbols in Sketch to sequentially build up pages. ATOMS Max Becker Search Marketing Specialist Start typing Home 14 MOLECULES LAST 30 DAYS Post publicly Leaderboard ALL TIME Post privately ORGANISMS 5:41 Give beans Who are you giving beans? Ma! Atomic Design helps us ensure that styles across all pages remain consistent, and it enables multiple designers to work in parallel. " HELP ADDING ICONS BUTTON 1 BUTTON 2? # 100 Amazon gift card From Addie Stanley 12 March Top feedback from client on Meat Free Monday social campaign. Success Mark Reimelt Marsha Borrell Max Becker Send a message

Desk-based users may use this more than the app so having a strong

7 BEANWORK 07 Desktop web app The web app kept the same approach and style of the app, whilst maximising the space available for desktop. Desk-based users may use this more than the app so having a strong visual dashboard that is optimised for any display size is important.

8 BEANWORK 08 Brand de!nition Beanwork Inbox 9:00 AM You ve got beans! To: Our objective is to establish a powerful visual experience that gives life to the platform and product. You ve got beans Someone thinks you re awesome. Go you! The fun brand identity captures Beanwork s friendly and interpersonal essence of the brand. 2 Isabella s ability to juggle multiple projects was unlike any I ve seen before and made a dramatic difference in the productivity level of our team. From Esther Christensen GO TO YOUR DASHBOARD + This was sent to you because you re signed up to receive Beanwork notifications. You can unsubscribe anytime.

You will receive your gift card within 48 hours by email. BUY! We are processing your order.

9 BEANWORK 09 Treat yourself! Almost there Success 50 Amazon gift card 50 Amazon gift card " Please confirm you wish to redeem 50 beans for this reward You will receive your gift card within 48 hours by . BUY! We are processing your order. Please don t close or refresh the page CLOSE Choose an icon Choose an icon FOOD & DRINK HEALTH & BEAUTY TRAVEL BUSINESS SPORTS HOBBIES FOOD & DRINK HEALTH & BEAUTY TRAVEL BUSINESS SPORTS HOBBIES Search icons # Phone Insurance! Keep going! Nice job!

10 DON VEETO 10 Designing a smart shopping experience Don Veeto is a new online shop specialising in organic, biodynamic, SO2-free and vegan wine. I worked with the creator from concept to launch to create a user-friendly online shop and sophisticated brand identity. SERVICES - User experience Responsive interface design Ecommerce integration Visual identity and definition Icon design QA testing during dev

11 DON VEETO 11 User-centered design Wine is a fun product, but it is a really competitive industry. To set apart from the competitors, we wanted to demystify the process of chosing a wine with an intuitive search and filter page, where shoppers could easily find a wine based on criteria like bouquet (oak aging, black fruit, spice) or food pairings. We also offered collection cases, for example; six super-aged reds, or six biodynamic, vegan wines. These could be gifted. The product page was highly detailed with high-res images, comprehensive descriptions, and well-placed call to actions.

12 DON VEETO 12

DON VEETO 13 Responsive interface design Research showed that nearly half of online food and drink sales were placed on handheld devices, so with this in mind we designed all devices

13 DON VEETO 13 Responsive interface design Research showed that nearly half of online food and drink sales were placed on handheld devices, so with this in mind we designed all devices concurrently to give desktop, tablet and mobile the same importance. The mobile shopping experience was optimised with an intuitive navigation, accessible shopping cart, and fast load times.

14 DON VEETO 14

15 DON VEETO 15 Ecommerce As the websites main purpose was based around selling wines, ecommerce was built in as part of the core functionality, with a smooth checkout process for a simple user journey.

They wanted a sophisticated website, strong emphisis on whitespace, with an

16 DON VEETO 16 Branding I talked extensively with the client about their vision for the brand. They wanted a sophisticated website, strong emphisis on whitespace, with an individual and uncluttered design. The clean style from the website was carried through to offline branding and wine packaging materials.

17 DON VEETO 17 COLOUR PALETTE TYPOGRAPHY Montserrat ExtraLight H1 Heading # #BE1522 #94C11F #CBBB9F #B3BCCD Montserrat Light H2 Heading ICONOGRAPHY Montserrat Regular Montserrat Medium H3 HEADING Body copy Text link Montserrat Bold Body copy small USER INTERFACE Text field Dropdown Selection dropdown Primary button style TEXT FIELD Valid text entered # Account details Order history Standard delivery 3-5 business days Express delivery Secondary button style TEXT FIELD Invalid text entered ERROR INFO $ Saved addresses Favourites & wishlist 2 business days Click and collect Next business day Input with button!

18 ST CHRISTOPHER'S 18 Brand update for a growing charity St Christopher s is a charity founded in 1870, offering children s homes, fostering and support services for young people in care. I worked with the charity to create a new responsive website with a better user experience and a stronger brand identity. SERVICES - Brand refresh User experience Wireframing & flow design Information architecture Responsive interface design QA testing during dev

19 ST CHRISTOPHER'S 19 OLD SITE NEW SITE

ST CHRISTOPHER'S 20 User experience Home Page Search results St Christopher s has lots of great services to support young people and foster carers, but finding the required page on their old website

20 ST CHRISTOPHER'S 20 User experience Home Page Search results St Christopher s has lots of great services to support young people and foster carers, but finding the required page on their old website took too long. Improved user experience was a major part of the whole project. About us Our services Support us Contact We created a new site map which simplified and improved the navigation so the information required could be found quickly. Our mission Our history Children's homes 16+ homes Make a donation Leave a legacy Footer links FAQ I also worked closely with the digital marketing team to ensure the end product would work from a lead generation perspective. Where we work Fostering Corp. support T&C Our approach Runaway children Volunteering Accessability Latest news Fundraising Consultancy Jobs & careers

21 ST CHRISTOPHER'S 21

22 ST CHRISTOPHER'S 22 Brand refresh St Christopher s were lacking an ownable identity and an engaging web presence. Keeping their bright colour palette, the new design is simple, friendly and bold. Big images are used throughout along with bold typography and clear calls to action. Positive fostering experiences are shared across the site by young people and their carers in the form of case studies to showcase the charity s values.

23 ST CHRISTOPHER'S 23 UI design The client was keen for the look and feel of the new site to appeal equally to the adults and children who would be using the services of St Christopher s. As one of the main audiences was young people in care, there was a strong emphasis on the site s usability on mobile.

ST CHRISTOPHER'S 24 COLOUR PALETTE GUI ELEMENTS Text field Primary button style #37B548 #2EACE3 #EFB14C #F13E4B #F2F2F2 Dropdown field " Secondary button style TYPOGRAPHY Aa Aa Check box Radio button!

24 ST CHRISTOPHER'S 24 COLOUR PALETTE GUI ELEMENTS Text field Primary button style #37B548 #2EACE3 #EFB14C #F13E4B #F2F2F2 Dropdown field " Secondary button style TYPOGRAPHY Aa Aa Check box Radio button! Check box Radio button FONT FAMILY Din Condensed FONT FAMILY Source Sans Pro BANNER IMAGERY FONT WEIGHT Bold FONT WEIGHT Light Regular Bold H1 Heading H2 Heading H3 Heading H4 HEADING Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ornare orci. Aenean eget pharetra erat, non suscipit arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ornare orci. Aenean eget pharetra erat, non suscipit arcu.

2 December NCFE Corporate Guidelines. Introduction

2 December NCFE Corporate Guidelines. Introduction Introduction Introduction How we connect with people through our brand is essential to who we are, and plays a big part in the NCFE experience. We created this document (which is simpler than it looks)