UI Case Study — Web browser based mobile app

Elena Lo Piccolo
Apr 8 · 5 min read

Brief

Re-branding the visual identity of Bloomsbury Beginnings website realising an MVP for a web browser mobile app.

I had already the pleasure to work with Ann in a previous project where I was working in the UX team: you can find the relative case study at this link.

On this occasion we had to implement a new member area on the website, customised around users needs to have access to a dynamic interface.

Tools: Photoshop, Sketch, InVision

Team

Working in the UI team together with Alex we brought on board all the UI process starting from the UX team’s wireframes.

Deliverables

A number of deliverables where included in this project, here’s a quick breakdown:

  • Research insight and online survey
  • Personas and scenarios
  • User journey and sitemap
  • Sketches of ideas and layout of the website
  • User flows and screen flows
  • Affinity Diagram
  • Moodboard
  • Style Tiles
  • Style Guide
  • Low and mid-fidelity wireframes
  • High fidelity mock up
  • Prototype of design(s)
  • Final presentation to the client

Results

  • Re-design key pages of the UI of Bloomsbury Beginnings current website
  • Creation of New Members area for users
  • Community area to interact & collaborate with other social & environmental impact entrepreneurs
  • Implement relevant and engaging user experience
  • Create a professional feel without losing the ethos of being community driven

UX Research

From the contextual inquiry and online survey, the UX team highlighted key elements and areas to improve from users and client feedbacks.

Similarities with my previous research emerged like the necessity for the user to have more information on the website regarding courses and appreciation of strong community feeling combined with advisors support.

A user persona was then created to represent the website typical user. From this starting point we were able to deduce the user pain points, goals and needs. Our main user was a new member with an idea for a sustainable business looking for support through experts and courses.

Analysing competitors to find strength points of Bloomsbury proposition
Site map structure for the landing page of the website

UI Research

Inception Design helped us moving from the why to the mood of the website

The why

To help people that want to run successful social and environmental ventures to overcome obstacles and create powerful propositions for social and environmental change.

The focus of our inception design was on a mood that is overall safe and collaborative but at the same time professional.

This mood is accompanied by the presence of the community, real core of Bloomsbury Beginnings.

We also wanted to add an element of creativity and sustainability given by the Calthorpe Project and Ann presence.

The movement is calm and fluid, a reflection of this growing environment.

The shape is soft, like a mother’s touch, abstract to show evolutions of new ideas.

Colour palette

As the colours are heavily influenced by natural elements, we wanted to balance them with an element of professionalism with sleek colours such as violet and grey, but with subtlest touch’s of yellow to give that sense of creativity.

To highlight the member area we created a space that is overall minimal and professional, but predominantly collaborative and interactive.

We worked with images that evoke a sense of growth and improvement over time in a natural environment. Also, a sense of support was given by stones, a reference to meditation and therapy.
After a first version, we reviewed the moodboard together with Ann’s feedback. We were asked to integrate images on human collaborations in place of images that were focused on maternal protection.

The illustrations where created by Alex while I’ve created the new logo

Moving towards the end of the UI research we identified graphic elements that would be the base of our app.

We identified the final font in the soft and rounded presence of Typo Round: flexible and with four different weights to choose from.

Iconography

Working with Material design icons and structure the feeling is minimal but functional to allow easy and immediate interaction to the user.

The new logo needed to incorporate all about Bloomsbury Beginnings: rebranding meant reanalyse the existing one and the previous design. Circularity, repetition and an enclosed space with a bond with natural elements brought us towards the chosen one: simple and minimal but with the capacity to stand out.

A link to the final prototype can be find attached

On this occasion, more than one group was working on this project and I found quite challenging keeping up the competitive pressure, although I really appreciated the numerous feedback that emerged from this project.

Working again with Ann was a valuable experience, that helped me review a previous project from a UI point of view.

Thanks to Mattia Giuffrida

Elena Lo Piccolo

Written by

UX/UI designer in London

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade