Sprout Events — A UI Case Study
The Background
Sprout Events is a start-up company looking for a simplified approach to seek, discover and connect event organizers to willing workers in the short term gig market. The founder of the company, Cindy Tran, wants to save time and create opportunities for both event organizers and gig workers using a mobile app.
At the start of our project, the company was called Heyhyr, although a week into our project, there was a scope pivot as a result of our UX team members’ research. Cindy Tran decided to rebrand her company and call it Sprout Events instead. The company not only connected event organizers to paid workers as Heyhyr did, but now included volunteers as well.
The Timeline
Both the UX and UI teams were allotted 3 weeks in total to complete this project. On the UI side, the specific timeline entails:
The Team
The team consisted of two UX designers, as well as two UI designers including myself (I’m Fatimah!):
The Challenge
Event organizers currently struggle to find, track and retain short term gig workers while gig workers find it challenging to easily find work that fits into their schedule.
The Goals
After meeting our client, Cindy Tran, during our kick-off meeting, we came up with the following goals:
Temporary Staff and Volunteers: easily find gigs that fit into a schedule that works for them.
Organization: Have organizers effectively book and manage gig workers seamlessly
A simplified approach to seek, discover and connect event organizers to willing workers and volunteers in the gig marketplace.
Create a beta version of a multi-faceted mobile application that makes event staffing simple and efficient for both parties.
The Target Market
Based on their research, our UX team came up with a few target personas for our project that we’ll keep in mind moving forward with our process. The first persona is an event planner, the second is a job seeker and the third is a volunteer:
The Research
Kick-Off Meeting
During our initial meeting with Cindy, we asked her a few questions to learn more about the company brand and logo. We wanted to get a sense of how she envisioned her brand and the key visuals and feelings she associated with it. We learned the following:
- Cindy described her brand as fun, cheerful, passionate, festive and community-minded.
- She wanted users to feel celebratory, calm and a sense of belonging and possibility while using her app.
- During our colour test, where we presented Cindy with a variety of colours to select in the representation of her brand, we learned that she was drawn to both a warmer and cooler colour palette for her brand. She especially liked pinks, yellows and blues.
- She was open to a rebrand of her logo, and since she didn’t have any current branding in place for an app , she was open to this as well.
Gut Test
After the initial meeting, we met with Cindy again to do a gut test, where we presented her with a range of designs of different apps to better gauge the design she envisioned for her app.
During this exercise, we showed the client 20 different slides, each containing a different design of a website. For each slide, Godwyn had 20 seconds to rate the design from 1 (Hates it) to 5 (Loves it).
Cindy’s favourite designs include:
Rating: 5
- Cindy liked the use of cards to separate content
- She was a fan of the large, bold numbers in the cards themselves
- She also liked the gradient used in this app design
Rating: 5
- Cindy liked that this design felt youthful to her
- She particularly liked the use of a lot of white space in this design
- She also thought that the design had an appealing roundness to it
Cindy’s least favourite designs include:
Rating: 1
- Cindy thought this design looked dark — and thought it was hard to navigate as a result
Rating: 1
- Cindy liked the simple icons and and calendar in this design, but again, she thought it was hard to navigate because it felt too dark
To sum it up, we learned that Cindy liked:
- Large, bold text
- Cards to separate content
- The use of white space
- Gradients
Cindy disliked:
- Apps with dark backgrounds because she thought it was harder to navigate
The Why
While we gathered research, we simultaneously worked on establishing the ‘Why’ of our project i.e. what makes Sprout Events unique as a company.
Prior to the rebrand, our initial why was: We empower companies and job seekers to discover their untapped potential.
Due to the new direction of the rebrand, we came up with additional iterations of our why. We thought it would be wordy to state that we wanted to empower companies, job seekers and volunteers — so we took this out of the why altogether. We also wanted to experiment more with the words possibility and passion instead of potential, since these were words Cindy consistently associated with her brand. As a result, we came up with: Explore possibilities that align with your passions
We further refined this and came up with:
Our final why: Celebrate your passion and discover new possibilities with Sprout Events
Our main challenge was finding a why that applied to companies, job seekers and volunteers simultaneously. We thought our final iteration applied to everyone, without having to say it does within the why itself.
Design Directions + Moodboards
Based on our research, we came up with two different design directions for the app — one that encompasses passion and growth to convey a feeling of empowerment to explore one’s potential and passion in their careers — and one that’s more celebratory i.e. a company celebrating the success of an event and job seekers and volunteers celebrating finding work or volunteer opportunities.
Design Direction: Celebratory
For our first design direction, we wanted to convey a triumphant, celebratory and enthusiastic mood.
Visual language
Colour: yellow, purple, pink
We planned on using bright yellows, purples and pink hues to convey friendliness, enthusiasm and a youthful energy within the app.
Space: breathable, open, minimal
Through our research, we learned Cindy wanted the space within the app to look minimal and clean, and so wanted to ensure there was a lot of open space to convey that.
Shape: rounded, wavy
Rounded, wavy, shapes were appealing for Cindy in the gut test, so we decided to incorporate this in our design language.
Movement: fluid, spontaneous
To convey a celebratory mood, we wanted movement within the app to be fluid and spontaneous.
Moodboard
In our first moodboard, the bright pops of pink and yellow convey an enthusiastic, uplifting mood. The first image communicates a feeling of triumph, in holding the world in the palm of your hands, where the world and all of the opportunities it has to offer are yours. The second image is celebratory and enthusiastic, while the third symbolizes the synergy that exists within a community.
Design Direction: Passion & Growth
For the second and chosen design direction, passion and growth, we wanted to cultivate a strong, driven and accomplished mood.
Visual language
Colour: gradient, green and blue
We incorporated gradients in this design direction, not only because it appealed to Cindy, but also because we thought gradients visually corresponded to different stages of growth. We also included blues and greens because blue represents trustworthiness and maturity while green is connected to growth.
Space: white space, clean
In our gut test, we learned that for her brand, Cindy liked white, clean space — and so we thought it was important to incorporate into our design language.
Movement: intuitive, fluid
We decided to keep movement fluid and intuitive throughout the app.
Shape: rounded, lines, simple
We planned on emphasizing roundness in shapes within the app, because it was apparent that smooth, rounded shapes made sense for Cindy and her brand.
Moodboard
For our second moodboard, the image of nature and plants symbolizes growth, while the pink door and green steps symbolizes stepping into open opportunities. The pink plug represents connecting with the community, and the illuminated hustle sign represents strength and drive.
A note on the chosen design direction — we presented Cindy with both directions and she ended up liking passion and growth because she thought the colours were calm, and that the direction was clear and approachable. Although she liked the celebratory design direction, she felt it was too feminine and that it wouldn’t relate to everyone.
Style tile
The style tile above correspond to the chosen design direction. We chose green and blue as primary colours, and orange and coral as accents. The typeface chosen for headers and body text is Proxima nova for its simplicity and clean look.
For the background, we went with a blue and green gradient which again, represents different stages of growth while the wave gives a fluid movement to the app.
For our UI elements, our button design is visually consistent with the background as we incorporated gradients as well. We decided to use the accented corals and oranges for majority of the UI elements, including iconography, to contrast the blue and green background.
Logo design
For our logo design, we started off by creating a word map of what sprout events represents and decided to focus on celebration, growth and possibilities in our design because it aligns with our why the most.
After that, we designed numerous paper iterations and decided on three different logos to present to Cindy:
The first one is a wordmark, while the second is a combination logo representing both a sprout and a person holding their hands out in celebration. Cindy mentioned she loved the idea of incorporating a sprout in the logo and so the third image has a similar idea, although it also represents a bird spreading its wings to symbolize an individual spreading their wings and embracing opportunities. After presenting our logos to Cindy, she chose the second because she loved that it tied into the celebratory aspect of her brand.
The logo design process of the chosen logo started with a simple sprout. It evolved into a design incorporating both the idea of a seed growing as well as person rejoicing with their arms in the air.
The final logo embodies the the idea of a seed growing and discovering new journeys, while also incorporating the concept of a person celebrating their passions and embracing their growth.
Final App Design
UI design
Once the Mid-Fi screens were complete, the UX team handed it over to us in week three to complete the final hi-fi design. We had one week to design approximately 60 screens for our first UI-project, and although this was more than the average amount of screens most groups got, we were up for the challenge!
In relation to UI, a few key features of our final design include:
- The use of white cards to display content. We used cards throughout our design to create a clean, sleek look as we intended with our design direction. We also borrowed from material design principles and added subtle drop shadows to create depth in the design of the cards, so that it would be more familiar and approachable for users to interact with.
- The creation of hierarchy in content using font sizing and colour. Since date, for example, was most important to feature in certain screens (including the ‘Events’ Screen above), we increased the sizing of the numbers to prioritize it first. We also highlighted the number of positions filled/to fill in green and coral to indicate which positions were filled (in green), and which positions weren’t (in coral).
- Gradient waves, buttons and confirmation pages to create a consistent visual identity. Gradients took front and centre of our design, as it directly corresponded to our passion and growth design direction.
Final Prototype
To see the final design, view our prototype below:
So, was the problem solved using our solution? Let’s revisit the challenge and the goals we set to overcome it:
Challenge: Event organizers currently struggle to find, track and retain short term gig workers while gig workers find it challenging to easily find work that fits into their schedule.
Project goal: Create a beta version of a multi-faceted mobile application that makes event staffing simple and efficient for both parties.
The app we’ve designed helps event organizers and gig workers connect in a very simple and efficient way. From a UI perspective, the hierarchy in content, the use of open, white space and cards to separate content — create a simple, approachable design for both parties to use in connecting with each other comfortably and efficiently. The seamless design help event organizers and gig workers focus on what motivated them to use the app in the first place, to celebrate their passions and discover new possibilities.
For future considerations, I’d experience with different colours for the cards to contrast the white background of the app. I would also increase the sizes of the pictures of staff as it appears smaller than the size of staff names within the same card. Also, I’d fill in some more of the content within the app to replace the Lorumlpsum default texts.
If you liked my case study, show me some love and send some claps my way — I’d appreciate it! I’m also interested in any feedback you might have, so feel free to leave any comments or suggestions as well.
Thanks for reading,
Fatimah
