Edlio Gallery Redesign
Edlio's Gallery (an offering of single-use web templates) needed some rethinking in how we approached the client's experience of selecting a design and the designs themselves.
Timeline: 9 months (began before pandemic, derailed timeline to longer than intended)
Role: Collaborated with our Lead Developer to conduct multiple types of research and strategic planning to revamp our most popular design offering.
Team: Tim Robinson (Lead Developer)


Overview
Assignment: Improve the Edlio Gallery by finding out what part of the experience is hindering clients from selecting a design.

We had been seeing a number of complaints from clients about the experience of our current gallery. We were using Invision to house the whole experience, a platform many of our clients found lacking and hard to use. We wanted to get to the bottom of which specific red flags kept getting raised with Invision as a tool.
Observations
Many of our clients loved the idea of getting a one-of-a-kind design, but had no real ideas with what direction to go. We created the Edlio Gallery in 2018 as a means of offering a selection of single-use templates that could be catered to the client's needs, at a more fast-paced timeline and cheaper rate. This very quickly became our fastest growing offering, growing in popularity every year. Invision at the time was one of the most promising prototyping tools; we could upload our photoshop mock ups in a dynamic way that clients could interact with. It allowed you to view the design on any browser with a link, animate interactions like hover states and drop downs, and allowed the client to leave in context comments for the Project Manager's brief. But with the growth also emerged more complications with the sustainability of the Gallery.
The Existing Gallery Experience
The Edlio Gallery was housed entirely in an Invision link that would be shared with the client upon signing a contract with us. When opening the link they would come upon the first design in the prototype, then would either have to use arrows to view one-by-one or find the mode in the menu to see the rest of the screens. There was anywhere between 35-50 designs they could see all at once.

Our Designers were encouraged to design in any style they chose but had to include the same features in every design. The designs were labelled with the designers initials and a numerical indicator. Clients then had to give the project manager the label of the 3 designs they liked most. These three designs would then be reserved by the Project Manager in another Invision Project folder until their kick off call with the client.

In this call they'd discuss which design would be most fitting for them, as well as the limited revisions of the template. The Project Manager would then create a brief and that template would be removed from the Gallery and assigned to a Designer to translate to the client's branding and requests into a new mock up.
Initial Questions - Invision
Being the initial concerns were brought to us from our Project Management team, we conducted some questions to understand the issues with Invision as a tool. We found the following key insights from the PM team:
1
Clients being confused about the lack realistic of sizing of mock ups. Designs are created in large desktop sizing 2045 px width but restricted to 1024px width for responsive features (A common annoyance at the "extra" white space on the sides of the mock up). Often clients struggle to visualize the jump from desktop to mobile without a mobile mock up.
2
Clients struggle to navigate in Invision. Labelling is confusing as name of school in mock up and label of design name in Invision differ.
3
The comments feature is helpful when the client knows how to use it and let's the PM know they left comments on the link. Otherwise many do not use it or revision notes get ignored being Invision doesn't notify the PM about them, only the Designer.
4
Hovers and other more "realistic" interactions help clients move forward with designs, feeling it reflects their expectations of how the website will look and function once coded.
Competitive Analysis
My team and I did research with our Lead Developer to get some ideas for potential prototyping tool replacements for Invision .
Adobe XD

Pros:

The best part about this is that with us moving into XD, we wouldn't have to worry about using another app/tool. We can share our mocks directly from the program.


Easy Responsiveness

"Adobe XD provides a robust set of responsive design tools. One standout feature, responsive auto-mode, guesses how the screen should respond to varying device sizes.

This is an incredibly useful feature which can be turned on and off using a simple slider button. If the auto-mode falls short of its expected behavior, a designer can change the responsive properties manually."

Feedback/Communication

"Adobe XD includes built-in functionality for mockups and prototypes to be shared online so anyone can add general comments, or point to specific locations on a layout and leave feedback.

These features, combined with Adobe XD's dynamic prototyping mode, can also be tested on mobile phones with the native Adobe XD app, or even recorded for non-interactive demonstrations."

Price

Not far off from what we're paying for with Invision.

Shows hovers/animations

Yay! There's a feature that can do this automatically for the designer too and they can adjust from there.

Cons:

Favors Mac Users

If a Windows user wanted to view a live prototype, meaning one with interactions, they may face problems trying to view it. Though, it's possible this could be worked on in the future.

Organization

It had been noted under some reviews that XD is clunky compared to Invision when it comes to organizing mocks.

Prevue

Pros:

Client-friendly

"Not all clients have the latest gear, which is why projects and images are optimized for all browsers (yep, even IE7)"

Brandable

"Your agency logo appears wherever your work does, from projects to notification emails. Prevue is your own private app."

Secure

'We take the privacy and security of your work seriously. Password protect anything, all safe behind 256-bit SSL connection."

Google Analytics

"In addition to built-in stats, integrate with your own Analytics account to get detailed information on viewing activity."

+ Team features somewhat similar to Invision, fast, and reliable.

Cons:

Price

$50/Month vs. Invision @ $25/Month (considering we have two accounts, so it would total up to something similar, but for one account)

Tool Interface

Not as smooth as we'd like it to be. And there are no options to add in hovers.

Red Pen

Pros:

Fast

"From the beginning, our goal has been to make collaboration super-fast. No matter where your colleagues are in the world, if you work with visuals we'll help you collaborate with your team effortlessly."

Easy Sharing

"You can ask colleagues and clients for feedback by giving them a private link, or inviting them via email. We don't restrict the number of collaborators you can have, so you're free to get everyone involved."

Organization

'When a design has many states, screens or alternatives, drag them in together to make a project. We'll keep your team updated about comments, additions, and new versions."

Unlimited invites, unlimited teammates, unlimited singles (not projects), unlimited versioning

Tool Interface

The interface is so clean, much better than what Prevue had to offer.

Cons:

Price

Highest @ $90/Month for 40 projects. This can be tricky, would we be okay with replacing a single each time we make a revision? Although, you can archive projects and that won't count towards the 40 limit.

No tool to show hovers :(

It was going so well.. Until this. Our clients LOVE to be able to see hovers so this is definitely an issue.

No mock settings

Without being able to adjust the settings of how the mock will display on screens. It's most likely that the clients will get much more frustrated than they already are with Invision. Perhaps there is a way but I had no luck finding where to do this.
We had been discussing switching over to Adobe XD from the get go (being majority of the teams who touched our files already had Adobe accounts) it proved to be the best option out of what we found. It had a cloud based prototype links for easy sharing, hover animation and other interactions (our clients usually asked for) and the ability to create quick mocks so designing responsive versions would be more efficient. Lastly, we would not need to pay more for a service we already had Adobe Creative Cloud.
Empathy/Research
In order to get some ideas about how to move forward we took some of our competitive analysis and insights from our initial individual interviews to form questions to pose to our client-facing teams as a group.

Team Interviews -
Project Mangement
  • Project names are really confusing, the clients select the project referencing the "school name" and not for the name of the project "gallery_N_000"
  • We need to have different design for the different educational levels
  • Sizes on Invision, and how is gonna work, the clients don't get
  • Categorize the projects by features and styles is a better solution
  • An initial packet that encompasses a lot of preliminary information for the client to have many of their questions/concerns addressed early.
  • Have an overall process that lets them feel freedom, rather than limitation.
Team Interviews -
Sales
  • Clients see designs as the same can use thematic ideas for effective differentiation: i.e. Kid-friendly vs. district, etc.
  • Categories for sorting/ filtering would be helpful
  • Overwhelming for clients to narrow down a site with particular features
  • What can/can't be changed, free vs. paid customizations, etc.
  • Showing a before/after version of design to communicate how Gallery works
Overall Research Insights
With our team interviews we found some of the overarching themes of pain points were not just with Invision but the Gallery itself.

Lack of Labels/Navigation
We knew labelling and navigation were already confusing for our clients.
Recalling the labels of the templates when the label didn't match the name of the design was a constant issue. Just navigating the Gallery proved to be overwhelming to figure out.
Ambiguity of Process
In the contract for Gallery, there is a stipulation that with these templates would be held to a tighter timeline, so there would only be certain kinds of allowed revisions. There was a lot of grey area in which revisions were possible, which lead to lots of frustration with clients feeling misled. The entire process of Gallery was also confusing as many were stunted on how to approach picking a template.
Variety of Designs
With the requirement of standard features on the designs, there was a lack of variation when it came to how much we could differentiate the designs. Edlio's Gallery, being our most popular offering meant we had to produce a great number of designs, often recycling previous features or sections to just keep up with demand. With the Designers having free reign on how they styled the templates, there were some designs that were either hit or miss. Some had no logic behind if there was an audience they catered to, leaving some designs unpicked for months.
Definition
With having a better understanding of the issues each client-facing team brought to our attention we strategized on how to implement them into the revamped version. We now knew that the best way to improve the Gallery was to use the tools that made it easiest...our Edlio CMS and Adobe XD.
Problem Statement
We believe that our client's have had multiples reasons for why they had trouble choosing a design template in the Edlio Gallery. The main problems being unclear labelling and lack of instructions, designs looking too similar that nothing stands out, and not having a clear understanding of responsiveness and other kinds of functionality. We believe that we can solve all of these problems by using our company CMS and Adobe XD to directly tailor the Gallery to our needs.

By categorizing designs stylistically we knew we could create more variety quickly and efficiently. Using Adobe XD we could iterate mobile and desktop mocks fast and accurately and prototype with interactions. With our CMS we could upload & label designs as well as archive them easily for the project managers. We could design the experience of the Gallery better to have instructions and clear notes on best practices for selecting designs.

Ideation
The idea of creating our Gallery through our Edlio CMS would mean we could address many of the primary concerns and more in this approach.
Concept of Design Collections
We utilized content chunking and the rule of 3's to make sections 'snackable' and "easy as 1, 2, 3."
  • 1
    Streamline
    content into one website (LAHSA.org)
  • 2
    Simplify
    sign up process into three easy steps
  • 3
    Clarify
    role of volunteer and address concerns upfront
UX Scenario
We further expanded Victor's experience by establishing the scenario in the context of him and his surroundings.
1
Victor walks home from his school, passing a homeless individual.
He feels empathy for the homeless in his neighborhood and wishes he could help in some meaningful way. However, he feels overwhelmed by the homelessness crisis and is not sure what actually will help, so he moves on with his day.
2
While on Facebook, Victor sees his good friend tagged LAHSA in a post."

He trusts this friend and is interested in learning more about his shared post.
3
He clicks the tag in the post and ends up on LAHSA's Facebook page, where he finds a link to their official website.
When he sees a possible solution to his earlier concern, he feels hopeful and curious. He wonders if LAHSA helps in a meaningful way.
4
On the homepage he is informed quickly of the ease of volunteering. He clicks the feature section to learn about the homeless count.
He still has a lot of questions about the project but so far it sounds too good to be true.
5
All of his other concerns and questions about volunteering are answered and he decides to click to sign up.
He feels more confident in the process and trusts that this will be a good use of the limited time that he can allocate to volunteering.
6
He puts his phone away, turns off the light and goes to bed.
He feels better knowing he is using his limited time for a cause that has high impact in his community for an issue he cares about.
Prototypes/Revisions
With the task flow decided, we started creating prototype content to test on users.
Lo-fi prototype
We began by fleshing out initial ideas through sketches of RWD screens of the experience of getting a volunteer to sign up for the GLHC.
Team Feedback
We tested 3 users on our mid-fidelity prototype. We wanted to see if we had made the experience convincing enough for them to sign up to volunteer. Through the feedback we received, we refined and tested again with a hi-fidelity prototype.
Insights
A lot of the feedback suggested that through our streamline, simplify, and clarify method; helped users feel informed and comfortable enough to sign up for the GLHC.
Edlio Rebrand
In order to rebrand the look and voice of LAHSA to be more engaging and motivating, we created a style guide.
Logo
The original logo wasn't very legible as the strokes on the three figures made it hard to understand the image. Also the colors had accessibility issues when it came to contrast. The logo only worked with a color in the background and wouldn't work in all black and white alone. The revised logo is more simplified and can be used in full color or in white on a single color background. Also it now has a proper lock up, all of it's elements positioned in a visually understandable layout.
Original Logo
Revised Logo
Colors
To keep to our brand voice we wanted to change the colors of the original brand. The combination of Teal & Orange is complimentary...on opposites sides of the color wheel. The Orange's warmth is uplifting, it is determined to be noticed, therefore impactful. The Teal is a cool, revitalizing and rejuvenating color that also represents open communication and clarity of thought. Bring these two together to collaborate and they become a metaphor for a community.
Typography
To keep it similar to the condensed typeface that initially branded LAHSA, we choose Barlow Semi-Condensed as the primary font and Roboto for the secondary font. Barlow reads well for titles and gives us longer titles due to it being condensed. Roboto is easy to read and provides clarity for long copy.
Illustration
To continue our goals of simplicity and clarity and community; we choose simple line icons that felt engaging. We wanted to show icons of gatherings, compassion, neighborhoods, and communication. Also icons of clocks, clipboards, charts in order to convey organization.
Conclusion
We believe that through our new sign up experience for volunteers, LAHSA can benefit by increasing the concerns of volunteers and therefore raising the amount of people signing up for the Greater Los Angeles, Homeless Count.
Previous
LAHSA
Made on
Tilda