Logo Design, Branding, UX, Web Design & Web Development
BrightSky is a platform that exists to help make meaningful connections through shared purpose and to facilitate healthy livelihoods, people and communities. As an agency, we immediately felt drawn to everything that BrightSky is about and how they’re making their own unique mark within the health & wellness sector.
We were tasked with re-branding, designing and developing their website as part of a larger campaign strategy to launch the company to a wider audience.
We thought it would be a great opportunity to document our process so you can get an insight into how we work and why we made the decisions that we did. If you'd like to read more about that, you can read through it all on our journal here.
We knew BrightSky was going to be constantly growing and evolving so we made sure the website was designed to allow room for flexibility and growth. We have tried to keep as many design elements consistent as possible to make sure we can manage users expectations easily making for an intuitive and easy-to navigate site.
BrightSky is a fairly complex site so keeping the user interface simple was paramount. One thing that we experimented with was inline content editing. The plan was to have a toggleable edit button which would allow put the page into an editable state and allow people to edit the text content without being taken to a different page. This would make it obvious what the user was editing rather than filling in an abstract regular form.
However, we found some problems with this. First was accessibility. While it was possible to make this work in an accessible way, and to make it work across platforms (including, for example, mobile where user's can't hover over content or get feedback from mouse cursors) the workarounds to do so completely counteracted the simplistic nature of the interface and the result was something that was more complex than a regular form and which users were unfamiliar with and therefore found confusing or intimidating.
The second was that not everything was text. While making text editable could have worked, there is plenty of data that needs to be filled in in other ways. There are file uploads, checkboxes and drop-down menus. There were also some more advanced text inputs, such as URLs that need extra validation or feedback to the user.
In the end we kept the idea of the "edit" toggle switch but when editing is enabled, we show the user regular form inputs arranged in a way that matches the layout of the page they are editing. This is a nice middle-ground as we get all of the benefits from tried and tested HTML forms as well as the clean user journey that we had planned before. It's not quite as clean as our original dream interface but we're really happy with how it turned out.
The BrightSky site implements a flexible, granular subscription model. Admins can assign various capabilities to each subscription 'type', which allow users who subscribe to them to access specific features of the site. They can also override them on a per-subscription basis, allowing admins to work with their clients to fully customise their experience.
Membership types themselves are managed via Stripe, keeping all of the financial logic in one place, and then synced with the site using their API and webhooks. There they can add payment plans for different prices or durations. The payments themselves are also taken via Stripe, ensuring that confidential data never lands on or gets stored in the database. Much better for security to let the experts handle it.
eCourses allow site admins to put together learning materials for their users. An eCourse is comprised of a brief introduction and a set of lessons, each of which can be built up in a simple editor with pre-defined data types to maintain a consistent look and feel.
The site tracks when a user completes each lesson so that return visitors can pick up where they left off. Users can then review the course, leaving comments and/or a star review to help other users understand whether a course will be useful for them.
