Gloo is a Boulder-based company working on platforms designed to help people grow—in all areas from health and wellness to education to recovery to spirituality—through their relationships with coaches, mentors, and teachers.
While Gloo has been in the business of creating one-off web and native applications, or white labels, for individual organizations and companies to support this core interaction, we’ve now shifted our vision towards creating an app that anyone can download and connect with people who can help them grow.
Putting pencil to paper
Our process starts with a design sprint followed by written feature requirements from the product owner. Once requirements are in hand, I draw out a flow to include every screen and actionable item within the feature. This helps me find gaps both in the requirements and in what we may have initially thought the scope of the project was. I then write out each journey a user could take through the various points in the flowchart and use that as a reference throughout the project.
Wireframing
After gaining an understanding of the scope of the project and getting any questions I had throughout that initial phase answered, I then move on to wireframing, typically starting with native. If there are screens I came across in the flow that may be unclear to me later, I will usually quickly sketch them out.
More often, I jump straight to high-fidelity wireframing. Because we use a component-based system, I typically already have all of the assets I need to build out a design and can skip low-fidelity wireframes for the most part. The wireframes are useful for fleshing out flows and content, as well as getting initial buy-in from the team.
Copywriting
At Gloo, we don’t currently have a content strategist or app copywriter so most of the copywriting for each feature falls to the individual designer working to that feature. This created a lot of inconsistencies in copy treatment and how we refer to the same things across our product. I decided to take it upon myself to up my own copywriting skills and have taken lead on making sure we are styling all of our copy consistently (for example, using sentence case exclusively) and using the same language across the board.
Pushing the pixels
Once wireframes are at a good point, I move into designing out every screen that feature touches since most of our features are not only undergoing functionality updates but also a full design refresh. The high-fidelity wireframes make this process go much quicker and there are no surprises when it comes to content fitting within a space since we already saw it represented well in the wireframes.
In this stage, it’s more about fit and finishing the designs and making sure our components work well in a given feature’s context. There are often updates to the components throughout this process as we are constantly improving and optimizing them to work better across our system.
Annotating all the things
One of the largest gaps in our process prior to this past year was a lack of design QA once something was developed. When we finally included design QA as part of our process, there was still a disconnect between our new level of design standards and how things were being interpreted and developed from the designs.
Luckily, Zeplin came to our rescue and now I annotate all designs thoroughly and include robust specs around things like resting vs hover states before handoff via Zeplin. This not only has helped developers develop to spec better, but it’s helped the designers all stay on the same page in terms of flows and potential component updates.
Hacking the process
The biggest challenge I’ve faced at Gloo has been our process. When I started, there were no set critiques, no set processes for getting from idea to design to development, and no design QA before features were launched. Since I’ve been here, I’ve worked with the team to help define our processes and really hone in on what that ideal collaboration between product owners, designers, and developers looks like within the context of Gloo. Although this wasn’t a design solution, it has impacted how I work through a feature to its final solution.
